: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;}
}

/* ══════════════════════════════════════════════════════════════════
   WORLD GEOGRAPHY — additions to the shared design system.
   The palette above is the platform contract and is untouched; everything
   below uses the var(--accent*) aliases so a future re-theme is 3 lines.
   ══════════════════════════════════════════════════════════════════ */

/* region picker rows */
.vs-reg{font-size:14px;color:var(--text);}
.vs-cont{font-size:10px;font-weight:600;background:var(--accent-bg);color:var(--accent);
  border:1px solid rgba(192,147,48,.2);padding:2px 7px;border-radius:10px;white-space:nowrap;}
.vs-n{font-size:11px;color:var(--text2);}
.vs-sec{padding:8px 13px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text2);font-weight:600;background:var(--card);}

/* flags */
.flag-xl{font-size:88px;line-height:1.1;}
.flag-lg{font-size:52px;line-height:1.1;}
.flag-md{font-size:26px;line-height:1;}
.flag-sm{font-size:17px;line-height:1;}
.opt-flag{font-size:40px;padding:14px 8px;font-family:'Inter',sans-serif;font-style:normal;line-height:1.15;}
.geo-ans{font-family:'Fraunces',serif;font-style:italic;color:var(--accent-l);}

/* question card — shared by Flag Match, Multiple Choice, Speed and Review */
.q-top{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:600;margin-bottom:8px;}
.q-main{font-family:'Fraunces',serif;font-style:italic;font-size:30px;color:var(--text);line-height:1.15;word-break:break-word;}
.q-mainsm{font-size:22px;}
.q-sub{font-size:12px;color:var(--text2);margin-top:6px;}
.q-note{font-size:12px;color:var(--text2);line-height:1.55;margin-bottom:12px;padding:9px 12px;
  background:var(--card);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:0 8px 8px 0;}
.q-centre{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.q-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

/* small segmented control (direction / mode switches) */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:14px;flex-wrap:wrap;}
.seg-b{background:var(--card);border:none;border-right:1px solid var(--border);color:var(--text2);
  font-family:inherit;font-size:11px;font-weight:500;padding:6px 12px;cursor:pointer;transition:all .12s;white-space:nowrap;}
.seg-b:last-child{border-right:none;}
.seg-b:hover{color:var(--text);}
.seg-b.on{background:var(--accent-bg);color:var(--accent-l);}
.seg-lbl{font-size:11px;color:var(--text2);margin:0 8px 14px 0;align-self:center;}

/* BIGGER OR SMALLER */
.cmp-wrap{max-width:600px;}
.cmp-q{font-size:15px;color:var(--text);margin-bottom:4px;}
.cmp-q strong{color:var(--accent-l);font-weight:600;}
.cmp-hint{font-size:12px;color:var(--text2);margin-bottom:16px;}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;}
.cmp-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .15s;text-align:center;}
.cmp-card:hover:not(.done){border-color:rgba(192,147,48,.45);background:var(--card2);transform:translateY(-2px);}
.cmp-card.win{background:var(--ok-bg);border-color:var(--ok);}
.cmp-card.lose{background:var(--err-bg);border-color:var(--err);}
.cmp-card.done{cursor:default;}
.cmp-name{font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:var(--text);line-height:1.2;}
.cmp-val{font-size:15px;font-weight:600;color:var(--accent-l);min-height:20px;}
.cmp-sub{font-size:11px;color:var(--text2);}
.cmp-vs{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text2);
  text-transform:uppercase;letter-spacing:.1em;margin:12px 0 0;}
.cmp-streak{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:12px;color:var(--text2);}
.cmp-streak b{color:var(--accent-l);font-size:15px;}

/* ATLAS */
.at-tools{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.at-search{flex:1;min-width:170px;max-width:320px;padding:9px 13px;background:var(--card2);
  border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;outline:none;transition:border-color .15s;}
.at-search:focus{border-color:rgba(192,147,48,.5);}
.at-search::placeholder{color:var(--text2);}
.at-count{font-size:12px;color:var(--text2);}
.at-sec{margin-bottom:26px;}
.at-th{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:600;color:var(--accent-l);
  margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border);}
.at-th .at-n{font-size:11px;color:var(--text2);font-weight:400;}
.at-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;}
.at-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;transition:all .13s;}
.at-card:hover{border-color:rgba(192,147,48,.4);background:var(--card2);}
.at-card.open{border-color:rgba(192,147,48,.5);background:var(--card2);grid-column:1/-1;}
.at-head{display:flex;align-items:center;gap:10px;}
.at-name{font-family:'Fraunces',serif;font-style:italic;font-size:16px;color:var(--text);line-height:1.2;flex:1;min-width:0;}
.at-cap{font-size:11px;color:var(--text2);display:block;font-family:'Inter',sans-serif;font-style:normal;margin-top:2px;}
.at-obs{font-size:9px;font-weight:600;background:var(--accent-bg);color:var(--accent);
  border:1px solid rgba(192,147,48,.25);padding:1px 6px;border-radius:9px;white-space:nowrap;}
.at-body{margin-top:12px;padding-top:11px;border-top:1px solid var(--border);}
.at-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.at-fact{background:var(--navy2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;}
.at-k{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);font-weight:600;}
.at-v{font-size:13px;color:var(--text);margin-top:3px;line-height:1.35;}
.at-v.big{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--accent-l);}
.at-note{margin-top:10px;font-size:12px;color:var(--text2);line-height:1.6;font-style:italic;}
.at-feat{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;padding:10px 13px;}
.at-fe{font-size:22px;flex-shrink:0;line-height:1;}
.at-ft{flex:1;min-width:0;}
.at-fn{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--text);}
.at-fs{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.45;}
.at-fv{font-size:12px;font-weight:600;color:var(--accent-l);white-space:nowrap;flex-shrink:0;}

/* PROGRESS — continent breakdown */
.dash-sub{font-size:11px;color:var(--text2);margin:-6px 0 12px;line-height:1.5;}
.dash-row .nm.wide{width:170px;}
.dash-none{font-size:11px;color:var(--text2);width:42px;text-align:right;}

/* MEMORY — flags need more room than words */
.mtext.flagcard{font-size:30px;font-family:'Inter',sans-serif;font-style:normal;}

/* TYPE IT */
.ty-wrap{max-width:520px;}
.ty-input{width:100%;padding:11px 14px;background:var(--card2);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-family:'Fraunces',serif;font-style:italic;font-size:18px;outline:none;transition:border-color .15s;}
.ty-input:focus{border-color:rgba(192,147,48,.5);}
.ty-input.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);}
.ty-input.err{border-color:var(--err);background:var(--err-bg);color:var(--err);}
.ty-row{display:flex;gap:8px;margin:12px 0 10px;align-items:center;flex-wrap:wrap;}

@media (max-width:720px){
  .flag-xl{font-size:66px;}
  .opt-flag{font-size:34px;}
  .at-grid{grid-template-columns:1fr;}
  .cmp-grid{grid-template-columns:1fr;}
  .q-main{font-size:24px;}
  .dash-row .nm.wide{width:120px;}
}

/* ══════════════════════════════════════════════════════════════════
   UNDERSTANDING AI  —  components specific to this app.
   Every colour here is a var() so all six themes work; the audit is
     awk '/^:root\{/,/^\}/{next}{print}' styles.css | grep -E "#[0-9a-fA-F]{3,8}"
   and it must come back empty.
   ══════════════════════════════════════════════════════════════════ */

.qw-wide{max-width:720px;}

/* A definition as the prompt is a whole sentence, so it needs to be smaller
   and to breathe more than a single word does. */
.q-def{font-size:20px;line-height:1.45;font-style:italic;}
.q-term{font-style:normal;font-weight:600;letter-spacing:.01em;}
.q-area{font-weight:400;letter-spacing:0;text-transform:none;color:var(--text2);font-size:10px;}

/* Long options (abbreviation expansions) stack in one column, left-aligned
   and smaller — four centred serif phrases in a 2×2 grid is unreadable. */
.opts-long{grid-template-columns:1fr;}
.opt-long{font-family:'Inter',sans-serif;font-style:normal;font-size:14px;text-align:left;padding:12px 14px;line-height:1.4;}

/* ── IN ORDER ────────────────────────────────────────────────────── */
.ord-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}
.ord-slot{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--card);
  border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s;}
.ord-slot:hover{border-color:var(--accent);background:var(--card2);}
.ord-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--accent-bg);
  border:1px solid var(--accent);color:var(--accent-l);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;}
.ord-txt{flex:1;font-size:13px;line-height:1.45;color:var(--text);}
.ord-mark{flex-shrink:0;font-size:12px;color:var(--text2);}
.ord-slot.ord-ok{background:var(--ok-bg);border-color:var(--ok-b);cursor:default;}
.ord-slot.ord-ok .ord-num{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);}
.ord-slot.ord-ok .ord-mark{color:var(--ok);}
.ord-slot.ord-err{background:var(--err-bg);border-color:var(--err-b);cursor:default;}
.ord-slot.ord-err .ord-num{background:var(--err-bg);border-color:var(--err);color:var(--err);}
.ord-slot.ord-err .ord-mark{color:var(--err);}
.ord-slot.ord-ok:hover,.ord-slot.ord-err:hover{background:inherit;}
.ord-empty{padding:16px 12px;border:1px dashed var(--border);border-radius:9px;
  color:var(--text2);font-size:12px;text-align:center;}
.ord-answer{margin-top:10px;opacity:.92;}

.ord-pool{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.ord-chip{text-align:left;padding:10px 12px;background:var(--navy2);border:1px solid var(--border);
  border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;line-height:1.45;color:var(--text);
  transition:border-color .15s,background .15s,transform .12s;}
.ord-chip:hover{border-color:var(--accent);background:var(--card2);transform:translateX(2px);}

/* ── MEMORY, widened ─────────────────────────────────────────────── */
.mem-wide{max-width:660px;}
.mem-grid-wide{grid-template-columns:repeat(3,1fr);}
.mcard-tall{height:132px;}
.mtext-sm{font-size:11px;line-height:1.35;padding:0 7px;text-align:center;font-family:'Inter',sans-serif;font-style:normal;}

/* ── HANDBOOK ────────────────────────────────────────────────────── */
.ref-wrap{max-width:760px;}
.ref-search{width:100%;padding:11px 14px;background:var(--card);border:1px solid var(--border);
  border-radius:9px;color:var(--text);font-family:inherit;font-size:14px;margin-bottom:16px;}
.ref-search:focus{outline:none;border-color:var(--accent);}
.ref-foot{font-size:12px;color:var(--text2);margin-top:16px;line-height:1.6;}

.bk-dom{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--accent-l);
  margin:20px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.bk-topic{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 6px;}
.bk-topic span{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--text2);font-weight:600;}
.bk-practise{background:none;border:none;color:var(--accent);font-family:inherit;font-size:11px;
  cursor:pointer;padding:2px 4px;white-space:nowrap;}
.bk-practise:hover{color:var(--accent-l);text-decoration:underline;}
.bk-terms{display:flex;flex-wrap:wrap;gap:6px;}
.bk-term{padding:6px 11px;background:var(--card);border:1px solid var(--border);border-radius:9px;
  cursor:pointer;font-family:inherit;font-size:13px;color:var(--text);transition:all .15s;}
.bk-term:hover{border-color:var(--accent);background:var(--card2);}
.bk-term.on{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-l);}
.bk-abbr{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);
  border:1px solid var(--border);border-radius:6px;padding:1px 4px;margin-left:3px;}

/* ── ONE TERM'S CARD ─────────────────────────────────────────────── */
.elc{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 20px;margin-bottom:18px;}
.elc-head{margin-bottom:12px;}
.elc-name{font-family:'Fraunces',serif;font-style:italic;font-size:25px;color:var(--accent-l);line-height:1.2;}
.elc-fam{font-size:12px;color:var(--text2);margin-top:4px;}
.elc-row{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:13px;line-height:1.5;}
.elc-k{color:var(--text2);min-width:130px;flex-shrink:0;}
.elc-v{color:var(--text);}
.elc-note{font-size:12px;color:var(--text2);line-height:1.55;margin:12px 0;padding:9px 12px;
  background:var(--navy2);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:0 8px 8px 0;}

@media (max-width:560px){
  .mem-grid-wide{grid-template-columns:repeat(2,1fr);}
  .mcard-tall{height:118px;}
  .elc-k{min-width:0;}
  .elc-row{flex-direction:column;gap:2px;}
  .q-def{font-size:17px;}
}
.si-hint{font-size:11px;line-height:1.5;color:var(--text2);margin:2px 7px 8px;padding:7px 9px;
  background:var(--navy2);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:0 7px 7px 0;}

/* ── SPOT IT ─────────────────────────────────────────────────────────
   The scenario card. It carries a short story rather than a definition, so
   it reads as prose — left-aligned, roomy line height, and visually distinct
   from the question cards in every other tab. */
.scene{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 20px;margin-bottom:16px;}
.scene-tag{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent);
  font-weight:600;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.scene-txt{font-size:15px;line-height:1.62;color:var(--text);margin-bottom:12px;}
.scene-ask{font-family:'Fraunces',serif;font-style:italic;font-size:19px;line-height:1.35;
  color:var(--accent-l);}

@media (max-width:560px){
  .scene{padding:15px 16px;}
  .scene-txt{font-size:14px;}
  .scene-ask{font-size:17px;}
}