: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);
}
*{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;}
.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;}
.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:#fff;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);}

/* 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);}