:root{
  --navy:#0d1525;--navy2:#131d32;--card:#192038;--card2:#1f2944;
  --border:#253055;--gold:#c09330;--gold-l:#e0b545;--gold-bg:rgba(192,147,48,.12);
  --text:#d8e4ff;--text2:#7888b0;
  --ok:#3ecfb0;--ok-bg:rgba(62,207,176,.1);--ok-b:rgba(62,207,176,.3);
  --err:#f07878;--err-bg:rgba(240,120,120,.1);--err-b:rgba(240,120,120,.3);
  /* platform alias — future per-subject retheming changes only these 3 lines */
  --accent:var(--gold);--accent-l:var(--gold-l);--accent-bg:var(--gold-bg);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--navy);color:var(--text);min-height:100vh;display:flex;flex-direction:column;}

/* HEADER */
header{background:var(--navy2);border-bottom:1px solid var(--border);padding:11px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.brand{font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:var(--gold-l);letter-spacing:-.02em;white-space:nowrap;}
.hd-right{display:flex;align-items:center;gap:14px;margin-left:auto;}

/* VERB SEARCH */
.vs{position:relative;}
.vs-btn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 11px;cursor:pointer;font-family:inherit;transition:border-color .15s;min-width:180px;}
.vs-btn:hover{border-color:rgba(192,147,48,.4);}
.vs-btn.open{border-color:rgba(192,147,48,.5);background:var(--card2);}
.vs-inf{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--gold-l);}
.vs-tr{font-size:11px;color:var(--text2);flex:1;text-align:left;}
.vs-arr{font-size:11px;color:var(--text2);transition:transform .2s;}
.vs-btn.open .vs-arr{transform:rotate(180deg);}
.vs-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:var(--card2);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 36px rgba(0,0,0,.5);z-index:300;overflow:hidden;}
.vs-drop.open{display:block;}
.vs-search{width:100%;padding:10px 13px;background:none;border:none;border-bottom:1px solid var(--border);color:var(--text);font-family:inherit;font-size:13px;outline:none;}
.vs-search::placeholder{color:var(--text2);}
.vs-list{max-height:300px;overflow-y:auto;}
.vs-item{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;cursor:pointer;transition:background .1s;gap:10px;}
.vs-item:hover,.vs-item.cur{background:var(--border);}
.vs-item-l{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;text-align:left;}
.vs-iinf{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--text);}
.vs-itr{font-size:11px;color:var(--text2);}
.vs-grp{font-size:10px;font-weight:600;background:var(--gold-bg);color:var(--gold);border:1px solid rgba(192,147,48,.2);padding:2px 7px;border-radius:10px;white-space:nowrap;}
.vs-badges{display:flex;align-items:center;gap:6px;flex-shrink:0;}
/* multi-select dropdown */
.vs-check{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;position:relative;transition:all .12s;}
.vs-check.on{background:var(--gold);border-color:var(--gold);}
.vs-check.on::after{content:'✓';position:absolute;top:-3px;left:1px;font-size:12px;color:var(--navy);font-weight:700;}
.vs-item.on{background:var(--gold-bg);}
.vs-quick{display:flex;flex-wrap:wrap;gap:5px;padding:9px 11px;border-bottom:1px solid var(--border);}
.vs-qbtn{font-size:11px;font-weight:500;background:var(--card);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:5px 9px;cursor:pointer;font-family:inherit;transition:all .12s;}
.vs-qbtn:hover{border-color:rgba(192,147,48,.5);color:var(--gold-l);}
.vs-qclear{color:var(--text2);}
.vs-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;border-top:1px solid var(--border);font-size:12px;color:var(--text2);}
.vs-ok{background:var(--gold-bg);color:var(--gold-l);border:1px solid rgba(192,147,48,.3);border-radius:7px;padding:5px 14px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;}
.vs-ok:hover{background:rgba(192,147,48,.2);}
.vs-ph{font-size:10px;font-weight:600;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-b);padding:2px 7px;border-radius:10px;white-space:nowrap;}
/* dropdown filter toggle */
.vs-filter{display:flex;align-items:center;gap:8px;padding:8px 13px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12px;color:var(--text2);user-select:none;}
.vs-filter:hover{color:var(--text);}
.vs-filter input{display:none;}
.vs-filter-box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;position:relative;transition:all .15s;}
.vs-filter input:checked+.vs-filter-box{background:var(--ok);border-color:var(--ok);}
.vs-filter input:checked+.vs-filter-box::after{content:'✓';position:absolute;top:-3px;left:1px;font-size:11px;color:var(--navy);font-weight:700;}
.vs-empty{padding:12px 14px;font-size:12px;color:var(--text2);}
.tgl{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--text2);user-select:none;}
.tgl input{display:none;}
.tgl-p{width:32px;height:18px;background:var(--border);border-radius:9px;position:relative;transition:background .2s;flex-shrink:0;}
.tgl-p::after{content:'';width:12px;height:12px;background:var(--knob);border-radius:50%;position:absolute;top:3px;left:3px;transition:left .2s;}
input:checked+.tgl-p{background:var(--gold);}
input:checked+.tgl-p::after{left:17px;}

/* XP BAR */
.xpbar{background:var(--navy2);border-bottom:1px solid var(--border);padding:6px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lvl-badge{font-size:11px;font-weight:600;background:var(--gold-bg);color:var(--gold-l);border:1px solid rgba(192,147,48,.25);padding:2px 9px;border-radius:12px;white-space:nowrap;}
.xp-track{flex:1;min-width:60px;max-width:180px;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.xp-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .4s;}
.xp-txt{font-size:11px;color:var(--text2);white-space:nowrap;}
.sep{color:var(--border);}
.stat{display:flex;align-items:center;gap:3px;font-size:12px;}
.stat .n{font-weight:600;font-size:13px;}
.s-ok .n{color:var(--ok);}
.s-err .n{color:var(--err);}
.s-str .n{color:var(--gold-l);}
.stat-lbl{color:var(--text2);}
.btn-rst{margin-left:auto;background:none;border:1px solid var(--border);color:var(--text2);font-size:11px;padding:3px 9px;border-radius:6px;cursor:pointer;transition:all .15s;font-family:inherit;}
.btn-rst:hover{color:var(--text);border-color:var(--text2);}

/* LAYOUT */
.layout{display:flex;flex:1;min-height:0;}
aside{width:195px;background:var(--navy2);border-right:1px solid var(--border);padding:16px 11px;flex-shrink:0;overflow-y:auto;}
.ss{margin-bottom:20px;}
.st{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text2);font-weight:600;margin-bottom:8px;padding-left:5px;}
.si{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;transition:background .12s;}
.si:hover{background:var(--card);}
.si input{accent-color:var(--gold);width:12px;height:12px;cursor:pointer;flex-shrink:0;}
.si span{font-size:12px;color:var(--text);line-height:1.3;}
/* filter mode */
.fm-opt{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;cursor:pointer;transition:background .12s;}
.fm-opt:hover{background:var(--card);}
.fm-radio{width:11px;height:11px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:all .15s;box-sizing:border-box;}
.fm-radio.on{border-color:var(--gold);background:var(--gold);}
.fm-lbl{font-size:12px;color:var(--text);}
.fm-groups{padding-left:8px;margin:2px 0 4px;}
.fm-verb-row{display:flex;align-items:center;justify-content:space-between;padding:4px 7px 4px 20px;}
.fm-verb-name{font-family:'Fraunces',serif;font-style:italic;font-size:13px;color:var(--gold-l);}
.fm-change{background:none;border:none;color:var(--text2);font-size:11px;cursor:pointer;padding:0;font-family:inherit;transition:color .12s;text-decoration:underline;}
.fm-change:hover{color:var(--gold-l);}
.content{flex:1;padding:18px 22px;overflow-y:auto;}

/* TABS */
.tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:1px solid var(--border);overflow-x:auto;}
.tab{padding:7px 13px;font-size:12px;font-weight:500;color:var(--text2);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--gold-l);border-bottom-color:var(--gold-l);}
.tab.locked{opacity:.4;}
.tab.locked::after{content:' 🌙';}

/* BUTTONS */
.btn{padding:8px 18px;border-radius:8px;border:1px solid;cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all .15s;}
.btn-g{background:var(--gold-bg);color:var(--gold-l);border-color:rgba(192,147,48,.3);}
.btn-g:hover{background:rgba(192,147,48,.18);}
.btn-gh{background:var(--card);color:var(--text2);border-color:var(--border);}
.btn-gh:hover{color:var(--text);border-color:var(--text2);}
.btn-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-b);}
.btn-err{background:var(--err-bg);color:var(--err);border-color:var(--err-b);}

/* SPEAK */
.spk{background:none;border:none;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;transition:background .12s;vertical-align:middle;line-height:1;}
.spk:hover{background:var(--card2);}

/* PROGRESS BAR */
.pbar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:4px;}
.pfill{height:100%;background:var(--gold);border-radius:2px;transition:width .3s;}

/* FLASHCARD */
.fc-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:4px 0;}
.fc-prog{width:100%;max-width:430px;}
.fc-lbl{font-size:11px;color:var(--text2);text-align:right;}
.fc-scene{width:100%;max-width:430px;height:210px;perspective:1000px;cursor:pointer;}
.fc-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.fc-inner.flipped{transform:rotateY(180deg);}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;background:var(--card);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:22px;}
.fc-back{transform:rotateY(180deg);background:var(--card2);border-color:rgba(192,147,48,.3);}
.fc-tense{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600;}
.fc-pron{font-family:'Fraunces',serif;font-style:italic;font-size:38px;color:var(--text);line-height:1;}
.fc-form{font-family:'Fraunces',serif;font-style:italic;font-size:44px;color:var(--gold-l);line-height:1;}
.fc-sub{font-size:12px;color:var(--text2);}
.fc-hint{font-size:11px;color:var(--text2);}
.fc-acts{display:flex;gap:9px;}

/* QCM */
.qw{max-width:490px;}
.qcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-bottom:14px;}
.qtense{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600;margin-bottom:7px;}
.qlbl{font-size:13px;color:var(--text2);margin-bottom:4px;}
.qpron{font-family:'Fraunces',serif;font-style:italic;font-size:28px;color:var(--text);line-height:1.2;}
.qsub{font-size:12px;color:var(--text2);margin-top:5px;font-style:italic;}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px;}
.opt{padding:13px 10px;background:var(--card);border:1px solid var(--border);border-radius:9px;cursor:pointer;font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:var(--text);text-align:center;transition:all .15s;}
.opt:hover:not(:disabled){background:var(--card2);border-color:rgba(192,147,48,.4);}
.opt.correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);}
.opt.wrong{background:var(--err-bg);border-color:var(--err);color:var(--err);}
.opt:disabled{cursor:default;}
.qfb{font-size:12px;min-height:16px;margin-bottom:10px;}
.qfb.ok{color:var(--ok);}
.qfb.err{color:var(--err);}

/* FIB */
.fiw{max-width:490px;}
.ficard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-bottom:14px;}
.fitense{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600;margin-bottom:10px;}
.fis{font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:var(--text);line-height:1.9;}
.fiblank{display:inline-block;min-width:76px;border-bottom:2px solid var(--gold);color:var(--gold-l);text-align:center;padding:0 4px;}
.fitr{font-size:12px;color:var(--text2);margin-top:7px;font-style:italic;}
.firow{display:flex;gap:7px;margin-bottom:10px;align-items:center;}
.fiinput{flex:1;padding:9px 12px;background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:'Fraunces',serif;font-style:italic;font-size:16px;outline:none;transition:border-color .15s;}
.fiinput:focus{border-color:rgba(192,147,48,.5);}
.fiinput.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);}
.fiinput.err{border-color:var(--err);background:var(--err-bg);color:var(--err);}
.fifb{font-size:12px;min-height:16px;margin-bottom:10px;}
.fifb.ok{color:var(--ok);}
.fifb.err{color:var(--err);}

/* TABLE */
.ta-acts{display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap;align-items:center;}
.ta-sec{margin-bottom:22px;}
.ta-title{font-size:12px;font-weight:600;color:var(--gold-l);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.ta-grid{display:grid;grid-template-columns:125px 1fr;gap:1px;background:var(--border);border-radius:9px;overflow:hidden;border:1px solid var(--border);}
.tc{background:var(--card);padding:7px 12px;display:flex;align-items:center;gap:5px;}
.tc.hdr{background:var(--card2);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);font-weight:600;}
.tc.pro{color:var(--text2);font-size:12px;}
.tinput{width:100%;background:none;border:none;color:var(--text);font-family:'Fraunces',serif;font-style:italic;font-size:16px;outline:none;padding:1px 0;}
.tinput::placeholder{color:var(--border);}
.tinput.ok{color:var(--ok);}
.tinput.err{color:var(--err);}
.tscore{font-size:12px;color:var(--text2);}

/* SPEED */
.sp-land{display:flex;flex-direction:column;align-items:center;gap:18px;padding:36px 20px;text-align:center;}
.sp-land h2{font-family:'Fraunces',serif;font-size:26px;font-weight:600;color:var(--gold-l);}
.sp-land p{font-size:14px;color:var(--text2);max-width:320px;line-height:1.6;}
.sp-wrap{max-width:490px;}
.sp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sp-timer{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--gold-l);min-width:55px;}
.sp-timer.urg{color:var(--err);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.sp-sco{font-size:14px;color:var(--text2);}
.sp-btrack{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:18px;}
.sp-bfill{height:100%;background:var(--gold);border-radius:2px;transition:width .95s linear;}
.sp-qcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;margin-bottom:14px;}
.sp-res{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;text-align:center;}
.sp-res h2{font-family:'Fraunces',serif;font-size:24px;color:var(--gold-l);}
.sp-big{font-family:'Fraunces',serif;font-size:56px;font-weight:600;color:var(--text);line-height:1;}
.sp-sub{font-size:13px;color:var(--text2);}
.hi-badge{background:var(--gold-bg);border:1px solid rgba(192,147,48,.3);color:var(--gold-l);font-size:12px;padding:4px 11px;border-radius:12px;}

/* MEMORY */
.mem-wrap{max-width:540px;}
.mem-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mem-hdr span{font-size:12px;color:var(--text2);}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px;}
.mcard{height:86px;perspective:600px;cursor:pointer;}
.mci{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.4,0,.2,1);}
.mcard.flipped .mci,.mcard.matched .mci{transform:rotateY(180deg);}
.mface{position:absolute;inset:0;backface-visibility:hidden;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.mback{background:var(--card);border:1px solid var(--border);font-size:20px;}
.mfront{transform:rotateY(180deg);background:var(--card2);border:1px solid rgba(192,147,48,.28);}
.mcard.matched .mfront{background:var(--ok-bg);border-color:var(--ok);}
.mctag{font-size:8px;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);font-weight:600;}
.mtext{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--text);line-height:1.2;text-align:center;padding:0 5px;}
.mcard.matched .mtext{color:var(--ok);}
.mem-done{text-align:center;padding:20px;background:var(--ok-bg);border:1px solid var(--ok-b);border-radius:13px;margin-top:8px;}
.mem-done h3{font-size:18px;color:var(--ok);margin-bottom:5px;}

/* REFERENCE */
.ref-sec{margin-bottom:24px;}
.ref-th{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--gold-l);margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.ref-cell{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;}
.ref-p{font-size:11px;color:var(--text2);margin-bottom:3px;}
.ref-f{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--text);}

/* TOAST */
#tz{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column-reverse;gap:6px;z-index:9999;pointer-events:none;}
.toast{background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:12px;padding:8px 14px;border-radius:9px;animation:tIn .25s ease;box-shadow:0 4px 18px rgba(0,0,0,.4);}
.toast.xp{border-color:rgba(192,147,48,.4);color:var(--gold-l);}
.toast.lvl{border-color:var(--ok-b);color:var(--ok);font-weight:600;font-size:13px;}
.toast.bdg{border-color:rgba(192,147,48,.4);color:var(--gold-l);}
@keyframes tIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:none;}}

/* EMPTY */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 20px;color:var(--text2);text-align:center;font-size:14px;}
.ei{font-size:34px;opacity:.35;}

/* TIMER BAR */
.tbar{background:var(--navy2);border-bottom:1px solid var(--border);padding:7px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:42px;}
.tb-lbl{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;}
.tb-sep{color:var(--border);font-size:14px;}
.tb-name{padding:4px 10px;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;outline:none;font-family:inherit;width:120px;transition:border-color .15s;}
.tb-name:focus{border-color:rgba(192,147,48,.5);}
.tb-opt{padding:4px 12px;background:var(--gold-bg);color:var(--gold-l);border:1px solid rgba(192,147,48,.3);border-radius:20px;cursor:pointer;font-size:12px;font-family:inherit;transition:all .15s;white-space:nowrap;}
.tb-opt:hover{background:rgba(192,147,48,.2);}
.tb-time{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--gold-l);min-width:44px;}
.tb-time.paused{color:var(--err);animation:pulse 1s infinite;}
.tb-ptrack{width:120px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.tb-pfill{height:100%;background:var(--ok);border-radius:2px;transition:width 1s linear;}
.tb-status{font-size:11px;}
.tb-status.running{color:var(--ok);}
.tb-status.paused{color:var(--err);}
.tb-reward{font-size:12px;font-weight:600;color:var(--gold-l);}
.tb-x{background:none;border:none;color:var(--text2);cursor:pointer;font-size:15px;padding:2px 5px;border-radius:4px;line-height:1;margin-left:auto;transition:color .12s;}
.tb-x:hover{color:var(--err);}
.tb-cert{padding:4px 14px;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-b);border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit;font-weight:500;transition:all .15s;}
.tb-cert:hover{background:rgba(62,207,176,.18);}

/* PROGRESS DASHBOARD */
.dash{max-width:640px;}
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:22px;}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center;}
.dash-n{font-family:'Fraunces',serif;font-size:30px;font-weight:600;color:var(--gold-l);line-height:1;}
.dash-l{font-size:11px;color:var(--text2);margin-top:6px;}
.dash-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:12px;}
.dash-row .nm{width:150px;color:var(--text);flex-shrink:0;}
.dash-bar{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden;}
.dash-fill{height:100%;border-radius:4px;transition:width .4s;}
.dash-pct{width:42px;text-align:right;color:var(--text2);}
.weak-chip{display:inline-flex;align-items:center;gap:5px;background:var(--err-bg);border:1px solid var(--err-b);color:var(--err);border-radius:12px;padding:4px 10px;font-size:13px;cursor:pointer;margin:0 6px 6px 0;font-family:'Fraunces',serif;font-style:italic;transition:background .12s;}
.weak-chip:hover{background:rgba(240,120,120,.2);}

/* RESPONSIVE — phones & small tablets */
.side-toggle{display:none;}
@media (max-width:720px){
  header{padding:10px 12px;gap:9px;}
  .xpbar{padding:6px 12px;gap:8px;}
  .tbar{padding:6px 12px;}
  .vs-btn{min-width:140px;}
  .layout{flex-direction:column;}
  .side-toggle{display:block;width:100%;text-align:left;background:var(--navy2);border:none;
    border-bottom:1px solid var(--border);color:var(--gold-l);font-family:inherit;font-size:13px;
    font-weight:600;padding:12px 14px;cursor:pointer;}
  aside{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:none;
    overflow:visible;padding:12px 14px;display:none;}
  aside.open{display:block;}
  .content{padding:14px 12px;}
  .tabs{flex-wrap:wrap;}
  .tab{flex:1 0 auto;text-align:center;padding:10px 9px;font-size:12px;}
  .opts{grid-template-columns:1fr;}
  .mem-grid{grid-template-columns:repeat(3,1fr);gap:7px;}
  .mcard{height:80px;}
  .ref-grid{grid-template-columns:1fr 1fr;}
  .dash-row .nm{width:120px;}
}
@media (max-width:420px){
  .ref-grid{grid-template-columns:1fr;}
  .fc-form{font-size:36px;}
  .fc-pron{font-size:30px;}
}

/* ══════════════════════════════════════════════════════════════════
   HUMAN BODY — additions. Everything below uses var(--accent*).
   Nothing above this line has been re-themed.
   ══════════════════════════════════════════════════════════════════ */

/* system chips (used in the picker, the reference and the dashboard) */
.sys-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  background:var(--accent-bg);color:var(--accent-l);border:1px solid rgba(192,147,48,.25);
  padding:2px 9px;border-radius:11px;white-space:nowrap;}
.sys-chip.mut{background:var(--card);color:var(--text2);border-color:var(--border);}
.vs-blurb{font-size:11px;color:var(--text2);}

/* ── LABEL THE BODY ─────────────────────────────────────────────── */
.lab-wrap{max-width:560px;}
.lab-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.lab-pbtn{font-size:12px;font-weight:500;background:var(--card);border:1px solid var(--border);
  color:var(--text2);border-radius:8px;padding:6px 11px;cursor:pointer;font-family:inherit;transition:all .12s;}
.lab-pbtn:hover{color:var(--text);border-color:var(--text2);}
.lab-pbtn.on{background:var(--accent-bg);color:var(--accent-l);border-color:rgba(192,147,48,.4);}
.lab-ask{background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:14px 18px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lab-ask-l{font-size:12px;color:var(--text2);}
.lab-target{font-family:'Fraunces',serif;font-style:italic;font-size:24px;color:var(--accent-l);line-height:1.15;}
.lab-fb{font-size:12px;min-height:17px;margin:2px 0 10px;}
.lab-fb.ok{color:var(--ok);}
.lab-fb.err{color:var(--err);}
.lab-stage{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px;}
.lab-blurb{font-size:11px;color:var(--text2);margin-bottom:8px;line-height:1.5;}
.dg{width:100%;}
.dg svg{display:block;width:100%;height:auto;max-height:60vh;margin:0 auto;touch-action:manipulation;}
.dg .hs{cursor:pointer;transition:opacity .12s,filter .12s;}
.dg .hs:hover{filter:brightness(1.4);}
.dg .hs.hit{fill:var(--ok);stroke:var(--halo);}
.dg .hs.miss{fill:var(--err);stroke:var(--halo);}
.dg .hs.reveal{fill:var(--accent-l);stroke:var(--halo);}
.dg .hs-s.hit{fill:none;stroke:var(--ok);}
.dg .hs-s.miss{fill:none;stroke:var(--err);}
.dg .hs-s.reveal{fill:none;stroke:var(--accent-l);}
.dg .hs.done{opacity:.32;pointer-events:none;}
.lab-run{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;color:var(--text2);}
.lab-legend{font-size:11px;color:var(--text2);margin-top:9px;line-height:1.5;}

/* ── PUT IT IN ORDER ────────────────────────────────────────────── */
.seq-wrap{max-width:600px;}
.seq-hdr{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:14px 18px;margin-bottom:14px;}
.seq-name{font-family:'Fraunces',serif;font-style:italic;font-size:21px;color:var(--accent-l);line-height:1.25;}
.seq-note{font-size:12px;color:var(--text2);margin-top:5px;line-height:1.5;}
.seq-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.seq-col-t{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--text2);font-weight:600;margin-bottom:7px;}
.seq-step{display:flex;align-items:flex-start;gap:9px;background:var(--card);border:1px solid var(--border);
  border-radius:9px;padding:9px 11px;margin-bottom:6px;cursor:pointer;transition:all .13s;text-align:left;
  width:100%;font-family:inherit;color:var(--text);font-size:12.5px;line-height:1.45;}
.seq-step:hover{border-color:rgba(192,147,48,.45);background:var(--card2);}
.seq-step.placed{cursor:default;}
.seq-step.ok{background:var(--ok-bg);border-color:var(--ok-b);color:var(--ok);}
.seq-step.bad{background:var(--err-bg);border-color:var(--err-b);color:var(--err);}
.seq-n{flex-shrink:0;width:19px;height:19px;border-radius:50%;background:var(--accent-bg);color:var(--accent-l);
  border:1px solid rgba(192,147,48,.3);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.seq-step.ok .seq-n{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-b);}
.seq-step.bad .seq-n{background:var(--err-bg);color:var(--err);border-color:var(--err-b);}
.seq-empty{border:1px dashed var(--border);border-radius:9px;padding:16px 11px;text-align:center;
  font-size:12px;color:var(--text2);}
.seq-fb{font-size:12px;min-height:17px;margin:10px 0;}
.seq-fb.ok{color:var(--ok);}
.seq-fb.err{color:var(--err);}
.seq-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}

/* ── TYPE IT ────────────────────────────────────────────────────── */
.ty-clue{font-family:'Fraunces',serif;font-size:19px;line-height:1.5;color:var(--text);}
.ty-hint{font-size:11px;color:var(--text2);margin-top:8px;}
.ty-ans{font-family:'Fraunces',serif;font-style:italic;font-size:22px;color:var(--accent-l);}

/* ── REFERENCE ──────────────────────────────────────────────────── */
.rf-search{width:100%;max-width:340px;padding:9px 13px;background:var(--card2);border:1px solid var(--border);
  border-radius:9px;color:var(--text);font-family:inherit;font-size:13px;outline:none;margin-bottom:16px;}
.rf-search:focus{border-color:rgba(192,147,48,.5);}
.rf-sys{margin-bottom:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);}
.rf-sys-h{display:flex;align-items:center;gap:9px;padding:11px 15px;cursor:pointer;background:var(--card2);
  font-size:13px;font-weight:600;color:var(--accent-l);user-select:none;}
.rf-sys-h .n{margin-left:auto;font-size:11px;color:var(--text2);font-weight:400;}
.rf-sys-b{display:none;padding:4px 0;}
.rf-sys.open .rf-sys-b{display:block;}
.rf-row{padding:11px 15px;border-top:1px solid var(--border);}
.rf-nm{font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--text);}
.rf-alt{font-size:11px;color:var(--text2);}
.rf-f{font-size:12.5px;color:var(--text);margin-top:5px;line-height:1.5;}
.rf-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:11px;color:var(--text2);}
.rf-fact{font-size:11.5px;color:var(--text2);margin-top:6px;font-style:italic;line-height:1.5;}
.rf-proc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.rf-proc ol{margin:8px 0 0 20px;font-size:12.5px;line-height:1.7;color:var(--text);}

/* ── PROGRESS: mastery by body system ──────────────────────────── */
.dash-row .nm.sys{width:170px;display:flex;align-items:center;gap:6px;}
.dash-note{font-size:11px;color:var(--text2);margin:-4px 0 14px;line-height:1.5;}
.untouched{font-size:12px;color:var(--text2);}

@media (max-width:720px){
  .seq-cols{grid-template-columns:1fr;}
  .dash-row .nm.sys{width:118px;font-size:11px;}
  .lab-target{font-size:20px;}
  .dg svg{max-height:none;}
}

/* long multiple-choice options (a function is a sentence, not a word) */
.opt.long{font-family:'Inter',sans-serif;font-style:normal;font-size:13px;line-height:1.45;
  text-align:left;padding:12px 14px;}
/* memory cards carrying a whole sentence */
.mtext.mtext-long{font-family:'Inter',sans-serif;font-style:normal;font-size:10.5px;line-height:1.35;}

/* the tab strip and the long lists scroll on narrow screens — make the
   scrollbar match the theme instead of the browser's bright default */
.tabs,.vs-list,.content,aside{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.tabs::-webkit-scrollbar,.vs-list::-webkit-scrollbar,.content::-webkit-scrollbar,aside::-webkit-scrollbar{width:7px;height:7px;}
.tabs::-webkit-scrollbar-track,.vs-list::-webkit-scrollbar-track,.content::-webkit-scrollbar-track,aside::-webkit-scrollbar-track{background:transparent;}
.tabs::-webkit-scrollbar-thumb,.vs-list::-webkit-scrollbar-thumb,.content::-webkit-scrollbar-thumb,aside::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}