/* wizWick app chrome: top bar, home, library, create flow, review editor.
   Tokens come from study.css. */
body{
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(60,185,255,.16), transparent 62%),
    radial-gradient(700px 480px at -10% 30%, rgba(40,90,255,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}
:root[data-theme="light"] body{background:var(--bg)}
a{color:var(--accent)}
.skip{position:absolute; left:-999px; top:8px; background:var(--accent); color:var(--accent-ink); padding:8px 14px; border-radius:8px; z-index:99}
.skip:focus{left:12px}
main:focus{outline:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.narrow{max-width:780px; margin:0 auto; padding:0 20px}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:16px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand img{width:38px; height:38px; border-radius:11px; box-shadow:0 0 0 1px var(--accent), 0 0 16px rgba(60,185,255,.35)}
.wordmark{font-family:var(--font-head); font-weight:700; font-size:1.3rem; letter-spacing:-.02em; line-height:1}
.wordmark b{color:var(--accent); font-weight:700}
.brand small{display:block; font-size:.72rem; color:var(--soft); letter-spacing:.02em; margin-top:2px}
.nav{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav a{color:var(--soft); text-decoration:none; font-weight:700; font-size:.95rem; padding:8px 12px; border-radius:10px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); background:var(--surface)}
.nav .cta{color:var(--accent-ink); background:var(--accent)}
.nav .cta:hover{color:var(--accent-ink); background:var(--accent2)}
.theme-btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line2); background:var(--surface); color:var(--ink); border-radius:999px; padding:7px 12px; cursor:pointer; font-size:.85rem; white-space:nowrap}
.theme-btn svg{width:16px; height:16px}
.nav .short{display:none}
@media (max-width:720px){ .nav a.hide-sm{display:none} .brand small{display:none} .theme-btn .lbl{display:none} .nav .long{display:none} .nav .short{display:inline} }

/* ---------- home ---------- */
.hero{padding:56px 0 36px}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero h1{font-family:var(--font-head); font-size:clamp(3rem,8vw,5.4rem); line-height:.95; letter-spacing:-.04em; margin:0; font-weight:700}
.hero h1 b{color:var(--accent); font-weight:700; text-shadow:0 0 28px rgba(60,185,255,.45)}
:root[data-theme="light"] .hero h1 b{text-shadow:none}
.hero .sub{font-family:var(--font-head); font-size:clamp(1.3rem,3vw,1.8rem); margin:.35em 0 0; font-weight:600}
.hero .rule{height:2px; width:min(420px,80%); margin:18px 0; background:linear-gradient(90deg,var(--accent),transparent)}
.hero p.lead{font-size:1.15rem; color:var(--soft); max-width:34em; margin:0 0 24px}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap}
.hero .ctas .wz-btn{flex:none; padding:10px 24px}
.virtues{display:flex; flex-wrap:wrap; gap:8px 18px; margin:26px 0 0; padding:0; list-style:none; font-family:var(--font-head); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2)}
:root[data-theme="light"] .virtues{color:var(--accent)}
.virtues li::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:2px; box-shadow:0 0 10px var(--accent)}
.owl-frame{position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 0 0 1px rgba(60,185,255,.25), 0 30px 80px rgba(0,10,40,.55), 0 0 60px rgba(60,185,255,.18); aspect-ratio:640/775; max-height:560px; margin-left:auto}
.owl-frame img{display:block; width:100%; height:100%; object-fit:cover}
.owl-frame figcaption{position:absolute; left:14px; bottom:14px; right:14px; background:rgba(4,14,40,.72); color:#E9F1FF; border:1px solid rgba(60,185,255,.5);
  border-radius:12px; padding:10px 14px; font-size:.92rem; letter-spacing:.04em}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} .owl-frame{max-width:420px; margin:0 auto} .hero{padding-top:34px} }

.how{padding:20px 0 10px}
.how ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:how}
.how li{counter-increment:how; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 20px 18px}
.how li::before{content:counter(how); display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent-bg); color:var(--accent); font-family:var(--font-head); font-weight:700; margin-bottom:10px; border:1px solid var(--line2)}
.how h3{font-family:var(--font-head); font-size:1.08rem; margin:0 0 .3em}
.how p{margin:0; color:var(--soft); font-size:.98rem}
@media (max-width:760px){ .how ol{grid-template-columns:1fr} }

.section{padding:44px 0 10px}
.section h2{font-family:var(--font-head); font-size:clamp(1.5rem,3.4vw,2rem); letter-spacing:-.02em; margin:0 0 .3em}
.section .intro{color:var(--soft); margin:0 0 20px; max-width:44em}
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.pack{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:relative; overflow:hidden}
.pack::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--tint,var(--accent))}
.pack .subj{font-family:var(--font-head); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tint,var(--accent)); margin:0 0 6px}
.pack h3{font-family:var(--font-head); font-size:1.18rem; margin:0 0 .35em; line-height:1.2}
.pack p{margin:0 0 12px; color:var(--soft); font-size:.95rem}
.pack .stats{font-size:.85rem; color:var(--faint); margin:auto 0 14px}
.pack .row{display:flex; gap:8px; flex-wrap:wrap}
.pack .row .wz-btn{flex:1 1 auto; min-height:44px; font-size:.95rem; padding:8px 14px}
.pack .tag-draft{display:inline-block; font-size:.75rem; border:1px solid var(--warn); color:var(--warn); border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px}
.empty{border:1.5px dashed var(--line2); border-radius:var(--radius); padding:26px; text-align:center; color:var(--soft)}
.importer{margin:14px 0 0; font-size:.92rem; color:var(--soft)}
.importer label{color:var(--accent); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.philo{margin:50px 0 0; padding:30px; border-radius:24px; background:linear-gradient(135deg,var(--surface2),var(--surface)); border:1px solid var(--line2); display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center}
.philo img{width:110px; height:110px; border-radius:24px; box-shadow:0 0 0 2px var(--accent), 0 0 30px rgba(60,185,255,.35)}
.philo blockquote{margin:0; font-family:var(--font-head); font-size:clamp(1.2rem,2.6vw,1.55rem); line-height:1.35; font-weight:600}
.philo p{margin:.6em 0 0; color:var(--soft)}
@media (max-width:640px){ .philo{grid-template-columns:1fr} }
.sitefoot{margin:60px 0 0; border-top:1px solid var(--line); padding:26px 0 40px; color:var(--soft); font-size:.88rem}
.sitefoot .wrap{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
.sitefoot a{color:var(--soft)}

/* ---------- forms (create + edit) ---------- */
.page-head{padding:34px 0 8px}
.page-head .wz-kicker{margin-bottom:6px!important}
.page-head h1{font-family:var(--font-head); font-size:clamp(2rem,5vw,2.8rem); letter-spacing:-.03em; margin:0 0 .25em; line-height:1.05}
.page-head p{color:var(--soft); margin:0; max-width:42em}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:22px 0 0}
.panel > h2{font-family:var(--font-head); font-size:1.25rem; margin:0 0 .2em; display:flex; align-items:center; gap:10px}
.panel > h2 .n{display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--accent-bg); color:var(--accent); font-size:.95rem; border:1px solid var(--line2)}
.panel > p.hint{color:var(--soft); margin:0 0 16px; font-size:.95rem}
label.f{display:block; font-weight:700; font-size:.92rem; margin:0 0 6px}
label.f span{font-weight:400; color:var(--soft)}
.in, select.in, textarea.in{width:100%; background:var(--bg2); border:1px solid var(--line2); border-radius:10px; padding:10px 12px; color:var(--ink); font-size:1rem}
:root[data-theme="light"] .in{background:#fff}
textarea.in{min-height:90px; resize:vertical; line-height:1.5}
textarea.in.mono{font-family:var(--font-mono); font-size:.88rem}
.in:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px}
@media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr} }
.fld{margin:0 0 14px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{flex:1 1 150px; display:block; border:1px solid var(--line2); border-radius:12px; padding:10px 12px; cursor:pointer; background:var(--bg2)}
:root[data-theme="light"] .seg label{background:#fff}
.seg input{accent-color:var(--accent); margin-right:6px}
.seg label:has(input:checked){border-color:var(--accent); box-shadow:var(--glow)}
.seg small{display:block; color:var(--soft); font-size:.82rem; margin-left:22px}

/* dropzone */
.drop{position:relative; display:grid; place-items:center; text-align:center; gap:6px; padding:34px 20px; border:2px dashed var(--line2); border-radius:var(--radius);
  background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(60,185,255,.035) 14px 28px), var(--bg2); cursor:pointer; transition:border-color .15s, box-shadow .15s}
.drop:hover,.drop.over{border-color:var(--accent); box-shadow:var(--glow)}
.drop .big{font-family:var(--font-head); font-size:1.2rem; font-weight:650}
.drop .types{color:var(--soft); font-size:.88rem}
.drop svg{width:42px; height:42px; color:var(--accent)}
.drop input{position:absolute; inset:0; opacity:0; cursor:pointer}
.files{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px}
.file{border:1px solid var(--line); border-radius:12px; background:var(--bg2); padding:12px 14px}
:root[data-theme="light"] .file{background:#fff}
.file .top{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.file .ico{flex:none; width:38px; height:38px; border-radius:9px; display:grid; place-items:center; font-family:var(--font-mono); font-size:.68rem; font-weight:500; text-transform:uppercase; background:var(--accent-bg); color:var(--accent); border:1px solid var(--line2)}
.file .nm{flex:1; min-width:160px}
.file .nm b{display:block; word-break:break-word}
.file .nm span{color:var(--soft); font-size:.86rem}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; border-radius:999px; padding:3px 10px; border:1px solid var(--line2); color:var(--soft); white-space:nowrap}
.pill.ok{border-color:var(--good); color:var(--good); background:var(--good-bg)}
.pill.warn{border-color:var(--warn); color:var(--warn); background:var(--warn-bg)}
.pill.err{border-color:#FF7A93; color:#FF7A93; background:rgba(255,122,147,.1)}
:root[data-theme="light"] .pill.err{border-color:#B3243F; color:#B3243F; background:#FDECEF}
.pill.run::before{content:""; width:10px; height:10px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.file .acts{display:flex; gap:6px; flex-wrap:wrap}
.mini{border:1px solid var(--line2); background:transparent; color:var(--ink); border-radius:9px; padding:6px 10px; font-size:.86rem; font-weight:700; cursor:pointer}
.mini:hover{border-color:var(--accent)}
.mini.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.mini.danger:hover{border-color:#FF7A93; color:#FF7A93}
.mini[disabled]{opacity:.45; cursor:not-allowed}
.file .body{margin:12px 0 0}
.file .meta{display:flex; justify-content:space-between; gap:10px; color:var(--soft); font-size:.84rem; margin:6px 0 0}
.file .msg{margin:10px 0 0; font-size:.92rem; color:var(--soft)}
.file .msg.warn{color:var(--warn)}
.consent{display:flex; gap:12px; align-items:flex-start; background:var(--accent-bg); border:1px solid var(--line2); border-radius:12px; padding:14px 16px; margin:0 0 16px}
.consent input{width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--accent)}
.status-line{display:flex; align-items:center; gap:10px; color:var(--soft); font-size:.92rem; margin:0 0 14px}
.dot{width:10px; height:10px; border-radius:50%; background:var(--faint)}
.dot.on{background:var(--good); box-shadow:0 0 10px var(--good)}
.dot.off{background:var(--warn)}
.progress{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px}
.progress li{display:flex; align-items:center; gap:10px}
.progress li .pill{min-width:84px; justify-content:center}
.notice{border-radius:12px; padding:14px 16px; margin:14px 0 0; border:1px solid var(--line2); background:var(--surface2)}
.notice.warn{border-color:var(--warn); background:var(--warn-bg)}
.notice.err{border-color:#FF7A93; background:rgba(255,122,147,.08)}
.notice b{display:block; margin-bottom:2px}

/* ---------- editor ---------- */
.ed-bar{position:sticky; bottom:0; z-index:15; margin:26px 0 0; padding:12px 0; background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--line)}
.ed-bar .narrow{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.ed-bar .state{flex:1 1 150px; color:var(--soft); font-size:.88rem; line-height:1.3}
.ed-bar .wz-btn{flex:0 1 auto; min-height:46px; font-size:.95rem; padding:8px 16px}
@media (max-width:640px){ .ed-bar .state{flex-basis:100%} .ed-bar .wz-btn{flex:1 1 auto} }
.ed-sess{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin:16px 0 0}
.ed-sess > summary{list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:10px; font-weight:700}
.ed-sess > summary::-webkit-details-marker{display:none}
.ed-sess > summary::before{content:"▸"; color:var(--accent); transition:transform .15s}
.ed-sess[open] > summary::before{transform:rotate(90deg)}
.ed-sess > summary .cnt{margin-left:auto; color:var(--soft); font-weight:400; font-size:.9rem}
.ed-sess .inner{padding:0 18px 18px}
.ed-item{border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0 0; background:var(--bg2)}
:root[data-theme="light"] .ed-item{background:#fff}
.ed-item.bad{border-color:#FF7A93}
.ed-item .hd{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px}
.ed-item .hd b{font-family:var(--font-head); color:var(--accent); font-size:.95rem}
.ed-item .hd .sp{flex:1}
.ed-item .hd select.in{width:auto; padding:4px 8px; font-size:.86rem}
.ed-item textarea.in{min-height:64px}
.ed-steps .row{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin:0 0 8px}
.opt-row{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; margin:0 0 8px}
.opt-row input[type=radio]{width:20px; height:20px; accent-color:var(--good)}
.issues{margin:16px 0 0}
.issues ul{margin:6px 0 0; padding-left:1.2em}
.issues li{margin:0 0 4px}
.addrow{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0}

/* study page tools */
.study-tools{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:740px; margin:22px auto 10px}
.study-shell{padding:0 18px 40px}

/* toast */
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:60; background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:12px; font-size:.95rem; max-width:92vw; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.prose h2{font-family:var(--font-head); font-size:1.3rem; margin:1.6em 0 .4em}
.prose li{margin:0 0 6px}

/* ---------- accounts ---------- */
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.nav .acct{display:inline-flex; align-items:center; gap:6px}
.nav .acct .cr{display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 7px; border-radius:999px; background:var(--accent-bg); color:var(--accent); border:1px solid var(--line2); font-size:.8rem}
body.share-mode .nav a{display:none}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.chip{border:1px solid var(--line2); background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 14px; font-weight:700; font-size:.9rem; cursor:pointer; text-decoration:none}
.chip span{color:var(--soft); font-weight:400; margin-left:4px}
.chip[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-bg); box-shadow:var(--glow)}
.chip.archived{opacity:.7}
.chip.add{color:var(--accent); border-style:dashed}
.sub-h{font-family:var(--font-head); font-size:1.12rem; margin:30px 0 .3em}
.pack .move{display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:.88rem; color:var(--soft)}
.pack .move select.in{width:auto; flex:1; padding:6px 8px; font-size:.88rem}
.pack .tag-link{color:var(--good)}
.credit-line{margin:0 0 14px; padding:10px 14px; border-radius:12px; border:1px solid var(--line2); background:var(--bg2)}
:root[data-theme="light"] .credit-line{background:#fff}
.big-num{margin:4px 0 10px; font-size:1.05rem; color:var(--soft)}
.big-num b{font-family:var(--font-head); font-size:2.6rem; color:var(--ink); margin-right:6px; vertical-align:-4px}
.ws-list{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:8px}
.ws-list .ws{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; padding:10px 14px; background:var(--bg2)}
:root[data-theme="light"] .ws-list .ws{background:#fff}
.ws-list .ws.archived{opacity:.75}
.ws-list .nm{flex:1; min-width:160px}
.ws-list .nm b{display:block}
.ws-list .nm span{color:var(--soft); font-size:.86rem}
.ws-list .acts{display:flex; gap:6px}
.ws-list form{flex:1}
.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.inline-form .in{flex:1 1 220px; width:auto}
.wz-btn.danger{border-color:#FF7A93; color:#FF7A93}
:root[data-theme="light"] .wz-btn.danger{border-color:#B3243F; color:#B3243F}
.signin .gsi{min-height:48px; display:flex; align-items:center; color-scheme:light}
.notice.ok-notice{border-color:var(--good); background:var(--good-bg)}
.linkbox{display:flex; gap:8px; align-items:center; margin:10px 0 0}
.linkbox .in{flex:1; min-width:0; font-size:.85rem}
.links{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.links li.off .in{opacity:.55; text-decoration:line-through}
.links p{margin:6px 0 0}
ul.tight{margin:.4em 0 0; padding-left:1.2em}
ul.tight li{margin:0 0 6px}
.share-head{max-width:740px; margin:22px auto 0}
.share-head p{margin:0 0 4px}
table.data{width:100%; border-collapse:collapse; font-size:.9rem; margin:10px 0 0}
table.data th,table.data td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
table.data th{color:var(--soft); font-weight:700; font-size:.82rem; white-space:nowrap}
table.data .num{text-align:right; white-space:nowrap}
table.data .neg{color:#FF7A93}
table.data .pos{color:var(--good)}
:root[data-theme="light"] table.data .neg{color:#B3243F}
.table-wrap{overflow-x:auto}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:22px 0 0}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.stat span{display:block; color:var(--soft); font-size:.86rem; font-weight:700}
.stat b{display:block; font-family:var(--font-head); font-size:1.9rem; margin:2px 0}
.stat small{display:block; color:var(--soft); font-size:.82rem; line-height:1.4}
.owner .panel{margin-top:22px}