/* ============================================================
   SUMMIT — Design System
   A mature, modern learning platform for middle school.
   ============================================================ */
:root{
  --bg:#0f1220; --bg-2:#151a2e; --panel:#1b2140; --panel-2:#212a52;
  --card:#1e2547; --card-hover:#252e5c; --line:#2c3566; --line-soft:#242c54;
  --ink:#eef1ff; --ink-soft:#b9c0e6; --ink-mute:#8890c0; --ink-faint:#5f6699;
  --brand:#6c8cff; --brand-2:#8a6cff; --brand-ink:#0c1024;
  --good:#33d69f; --good-2:#12b886; --warn:#ffb454; --bad:#ff6b81; --info:#4dc3ff;
  --gold:#ffce54;
  /* subject accents */
  --s-math:#6c8cff; --s-ela:#ff8a8a; --s-sci:#33d69f; --s-soc:#ffb454; --s-elec:#c78cff; --s-fit:#4dd4c8;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --sh:0 10px 30px -12px rgba(0,0,0,.55); --sh-lg:0 24px 60px -20px rgba(0,0,0,.65);
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--f); background:
    radial-gradient(1200px 700px at 12% -8%, #202a55 0%, transparent 55%),
    radial-gradient(1000px 600px at 105% 0%, #2a1f52 0%, transparent 50%),
    var(--bg);
  color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#2b3568;border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3a4788;background-clip:content-box}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em}
.muted{color:var(--ink-mute)} .faint{color:var(--ink-faint)} .soft{color:var(--ink-soft)}
.hidden{display:none!important}
.mono{font-family:var(--mono)}

/* ---------- App layout ---------- */
#app{display:flex;min-height:100vh}
.sidebar{
  width:250px;flex:0 0 250px;background:linear-gradient(180deg,var(--bg-2),#11162a);
  border-right:1px solid var(--line-soft);padding:20px 16px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;margin-bottom:4px}
.brand .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 6px 18px -6px var(--brand);font-size:19px}
.brand .name{font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand .sub{font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase}
.nav-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding:14px 10px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--ink-soft);
  font-weight:600;font-size:14px;transition:.16s;position:relative;width:100%;text-align:left}
.nav-item .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex:0 0 26px}
.nav-item:hover{background:var(--panel);color:var(--ink)}
.nav-item.active{background:linear-gradient(90deg,rgba(108,140,255,.18),rgba(138,108,255,.06));color:var(--ink)}
.nav-item.active::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--brand)}
.nav-item .lock{margin-left:auto;font-size:11px;color:var(--ink-faint)}
.nav-item .prog{margin-left:auto;font-size:11px;color:var(--ink-mute);font-weight:700}
.sidebar .spacer{flex:1}
.side-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:12px;margin-top:8px}
.side-streak{display:flex;align-items:center;gap:10px}
.side-streak .fire{font-size:22px}
.side-streak .n{font-weight:800;font-size:18px}

/* ---------- Main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:14px;
  padding:14px 26px;background:rgba(15,18,32,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-mute);font-weight:600;flex-wrap:wrap}
.crumbs .sep{color:var(--ink-faint)}
.crumbs .cur{color:var(--ink)}
.crumbs a{color:var(--ink-mute)} .crumbs a:hover{color:var(--brand)}
.topbar .push{flex:1}
.chip-xp{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px 6px 8px;font-weight:700;font-size:13px}
.chip-xp .lvl{background:linear-gradient(135deg,var(--gold),#ff9f43);color:#3a2600;border-radius:999px;
  width:24px;height:24px;display:grid;place-items:center;font-size:12px;font-weight:800}
.chip-streak{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-weight:700;font-size:13px}
.btn-parent{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;color:var(--ink-soft)}
.btn-parent:hover{border-color:var(--brand);color:var(--ink)}
.content{padding:26px;max-width:var(--maxw);width:100%;margin:0 auto;flex:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 18px;
  font-weight:700;font-size:14px;transition:.16s;border:1px solid transparent;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 22px -10px var(--brand)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink-soft)}
.btn-ghost:hover{background:var(--card-hover);color:var(--ink)}
.btn-soft{background:rgba(108,140,255,.14);color:var(--brand);border-color:rgba(108,140,255,.25)}
.btn-soft:hover{background:rgba(108,140,255,.22)}
.btn-good{background:linear-gradient(135deg,var(--good),var(--good-2));color:#06251c}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:14px}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
.section-title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;margin:6px 0 4px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}
.pill-std{background:rgba(108,140,255,.16);color:#9db3ff}
.pill-good{background:rgba(51,214,159,.16);color:var(--good)}
.pill-warn{background:rgba(255,180,84,.16);color:var(--warn)}
.pill-bad{background:rgba(255,107,129,.16);color:var(--bad)}
.pill-gold{background:rgba(255,206,84,.16);color:var(--gold)}
.pill-mute{background:var(--panel);color:var(--ink-mute)}
.tag-std{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;background:var(--panel-2);color:var(--ink-mute);font-family:var(--mono)}

/* ---------- Progress rings & bars ---------- */
.ring{--v:0;--sz:64px;--tk:7px;width:var(--sz);height:var(--sz);border-radius:50%;
  background:conic-gradient(var(--rc,var(--brand)) calc(var(--v)*1%), var(--line) 0);
  display:grid;place-items:center;flex:0 0 var(--sz)}
.ring::after{content:"";position:absolute;width:calc(var(--sz) - var(--tk)*2);height:calc(var(--sz) - var(--tk)*2);border-radius:50%;background:var(--card)}
.ring{position:relative}
.ring .rv{position:relative;z-index:2;font-weight:800;font-size:calc(var(--sz)*.24)}
.bar{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar.good > i{background:linear-gradient(90deg,var(--good),var(--good-2))}
.bar.warn > i{background:linear-gradient(90deg,var(--warn),#ff9f43)}
.bar.thin{height:6px}

/* ---------- Hero / dashboard ---------- */
.hero{background:linear-gradient(135deg,rgba(108,140,255,.16),rgba(138,108,255,.10));
  border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 28px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(138,108,255,.35),transparent 70%)}
.hero h1{font-size:26px;margin-bottom:4px}
.stat{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.02em}
.stat .l{font-size:12px;color:var(--ink-mute);font-weight:600}
.stat .ic{font-size:16px}

/* ---------- Subject / unit tiles ---------- */
.subj-tile{display:flex;flex-direction:column;gap:12px;border-radius:var(--r-lg);padding:20px;border:1px solid var(--line-soft);
  background:var(--card);transition:.18s;cursor:pointer;position:relative;overflow:hidden;text-align:left;width:100%}
.subj-tile:hover{transform:translateY(-3px);background:var(--card-hover);box-shadow:var(--sh-lg)}
.subj-tile .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px}
.subj-tile.locked{opacity:.62;cursor:not-allowed}
.subj-tile.locked:hover{transform:none;box-shadow:var(--sh)}
.unit-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:var(--card);
  border:1px solid var(--line-soft);transition:.15s;cursor:pointer;width:100%;text-align:left}
.unit-row:hover{background:var(--card-hover)}
.unit-row.locked{opacity:.55;cursor:not-allowed}
.unit-num{width:34px;height:34px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;font-weight:800;flex:0 0 34px}

/* ---------- Module / activity ---------- */
.mod-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px;transition:.16s;cursor:pointer;text-align:left;width:100%}
.mod-card:hover{background:var(--card-hover);transform:translateY(-2px)}
.act-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:6px}
.act-tab{padding:9px 14px;border-radius:10px;font-weight:700;font-size:13px;color:var(--ink-mute);display:flex;align-items:center;gap:7px;transition:.14s}
.act-tab:hover{color:var(--ink);background:var(--card)}
.act-tab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.act-tab .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.tab-pts{font-size:10.5px;font-weight:800;color:var(--gold);background:rgba(255,206,84,.14);border-radius:999px;padding:1px 7px;margin-left:2px}
.act-tab.active .tab-pts{color:#fff;background:rgba(255,255,255,.22)}
.prof-chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;font-weight:700;font-size:13px}
.prof-chip .av{width:26px;height:26px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:15px}
.prof-chip:hover{border-color:var(--brand)}
.sync-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px;border:1px solid var(--line);background:var(--panel)}
.sync-dot.on{color:var(--good);border-color:rgba(51,214,159,.3)}
.sync-dot.warn{color:var(--warn);border-color:rgba(255,180,84,.3)}
.sync-dot.off{color:var(--ink-mute)}
.prof-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-soft);background:var(--card);transition:.15s;width:100%;text-align:left;cursor:pointer}
.prof-card:hover{background:var(--card-hover)}
.prof-card.active{border-color:var(--brand);background:linear-gradient(90deg,rgba(108,140,255,.14),transparent)}
.prof-card .av{width:44px;height:44px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-size:24px;flex:0 0 44px}
.av-pick{display:flex;gap:6px;flex-wrap:wrap}
.av-pick button{width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--line-soft);font-size:19px}
.av-pick button.sel{border-color:var(--brand);background:var(--card-hover)}

/* ---------- Learn content ---------- */
.learn h2{font-size:20px;margin:18px 0 8px} .learn h3{font-size:16px;margin:16px 0 6px;color:var(--ink)}
.learn p{color:var(--ink-soft);margin:8px 0}
.callout{border-left:4px solid var(--brand);background:var(--panel);border-radius:0 12px 12px 0;padding:12px 16px;margin:14px 0}
.callout.warn{border-color:var(--warn)} .callout.good{border-color:var(--good)} .callout.info{border-color:var(--info)}
.callout .h{font-weight:700;font-size:13px;display:flex;gap:7px;align-items:center;margin-bottom:3px}
.formula{font-family:var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;font-size:18px;display:inline-flex;align-items:center;gap:10px;color:var(--ink);margin:6px 0}
.formula .eq{color:var(--brand);font-weight:700}
.worked{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:16px;margin:12px 0}
.worked .step{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line-soft)}
.worked .step:last-child{border-bottom:none}
.worked .sn{width:24px;height:24px;border-radius:8px;background:var(--brand);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;flex:0 0 24px}
.def-grid{display:grid;grid-template-columns:1fr;gap:10px}
.def{display:flex;gap:12px;padding:12px;background:var(--panel);border-radius:12px;border:1px solid var(--line-soft)}
.def .term{font-weight:800;min-width:120px;color:var(--brand)}

/* ---------- Quick reference cards ---------- */
.qr-card{background:linear-gradient(160deg,var(--panel),var(--card));border:1px solid var(--line);border-radius:16px;padding:16px}
.qr-card .t{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute);font-weight:700;margin-bottom:6px}
.qr-card .f{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink)}
.qr-card .n{font-size:12.5px;color:var(--ink-mute);margin-top:6px}

/* ---------- Flashcards ---------- */
.fc-scene{perspective:1400px;height:300px;margin:0 auto;max-width:520px}
.fc{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.fc.flip{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;gap:14px}
.fc-front{background:linear-gradient(145deg,var(--card),var(--panel))}
.fc-back{background:linear-gradient(145deg,#20305e,#1a2246);transform:rotateY(180deg)}
.fc-face .ty{position:absolute;top:14px;left:16px;font-size:11px}
.fc-face .q{font-size:22px;font-weight:700;line-height:1.35}
.fc-face .a{font-size:20px;font-weight:700;color:var(--good)}
.fc-face .hint{font-size:13px;color:var(--ink-mute)}

/* ---------- Practice / quiz ---------- */
.q-stage{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)}
.q-prompt{font-size:19px;font-weight:600;line-height:1.5}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--panel);transition:.14s;font-weight:600;font-size:15px;width:100%;text-align:left}
.opt:hover{border-color:var(--brand);background:var(--card-hover)}
.opt .k{width:28px;height:28px;border-radius:8px;background:var(--card);display:grid;place-items:center;font-weight:800;flex:0 0 28px}
.opt.correct{border-color:var(--good);background:rgba(51,214,159,.12)}
.opt.wrong{border-color:var(--bad);background:rgba(255,107,129,.10)}
.opt.correct .k{background:var(--good);color:#062}
.opt.wrong .k{background:var(--bad);color:#500}
.num-in{font-size:22px;font-weight:700;padding:14px 16px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);
  color:var(--ink);width:100%;font-family:var(--mono)}
.num-in:focus{outline:none;border-color:var(--brand)}
.hintbox{border-radius:14px;padding:14px 16px;margin-top:14px;border:1px solid var(--line);background:var(--panel);animation:slidein .3s}
.hintbox.h1{border-left:4px solid var(--info)} .hintbox.h2{border-left:4px solid var(--warn)} .hintbox.worked{border-left:4px solid var(--brand)}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.attempt-dots{display:flex;gap:6px}
.attempt-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.attempt-dots i.used{background:var(--warn)} .attempt-dots i.ok{background:var(--good)}
.feedback{padding:12px 16px;border-radius:12px;font-weight:700;display:flex;align-items:center;gap:10px;animation:slidein .3s}
.feedback.ok{background:rgba(51,214,159,.14);color:var(--good)}
.feedback.no{background:rgba(255,180,84,.14);color:var(--warn)}
.diff-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:4px;gap:2px}
.diff-seg button{padding:7px 13px;border-radius:9px;font-weight:700;font-size:12.5px;color:var(--ink-mute)}
.diff-seg button.active{background:var(--card);color:var(--ink);box-shadow:var(--sh)}
.diff-seg button.d-Foundation.active{color:var(--good)} .diff-seg button.d-Standard.active{color:var(--brand)}
.diff-seg button.d-Advanced.active{color:var(--warn)} .diff-seg button.d-Challenge.active{color:var(--bad)}

/* ---------- Badges ---------- */
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line-soft);text-align:center}
.badge .em{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:var(--panel);filter:grayscale(1) opacity(.4)}
.badge.earned .em{filter:none;background:linear-gradient(135deg,rgba(255,206,84,.25),rgba(255,159,67,.12));box-shadow:0 8px 20px -10px var(--gold)}
.badge .bn{font-weight:700;font-size:12.5px} .badge .bd{font-size:11px;color:var(--ink-faint)}

/* ---------- Toast / modal ---------- */
.toast-wrap{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--good);border-radius:14px;
  padding:13px 16px;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:12px;min-width:260px;animation:toastin .35s;font-weight:600}
.toast .em{font-size:22px}
@keyframes toastin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.modal-bg{position:fixed;inset:0;background:rgba(6,8,18,.72);backdrop-filter:blur(6px);z-index:300;display:grid;place-items:center;padding:20px;animation:slidein .2s}
.modal{background:var(--bg-2);border:1px solid var(--line);border-radius:24px;padding:28px;max-width:440px;width:100%;box-shadow:var(--sh-lg)}
.modal h3{font-size:20px;margin-bottom:6px}
.pin-in{letter-spacing:.5em;text-align:center;font-size:26px;font-family:var(--mono)}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:18px 0}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}
.pin-dots i.on{background:var(--brand);border-color:var(--brand)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keypad button{padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line-soft);font-size:20px;font-weight:700}
.keypad button:hover{background:var(--card-hover)}

/* ---------- misc ---------- */
.reflex-num{font-size:64px;font-weight:800;text-align:center;letter-spacing:-.03em}
.timer-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.timer-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--warn),var(--bad));transition:width .1s linear}
.svg-wrap{background:var(--bg);border:1px solid var(--line-soft);border-radius:16px;padding:16px;display:grid;place-items:center}
.slider{width:100%;accent-color:var(--brand);height:6px}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-soft)}
table.data th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}
.empty{text-align:center;padding:40px 20px;color:var(--ink-mute)}
.fade{animation:slidein .35s}
@media(max-width:820px){
  .sidebar{position:fixed;left:0;transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:none}
  .content{padding:18px}
  .menu-btn{display:grid!important}
}
.menu-btn{display:none;width:38px;height:38px;border-radius:11px;background:var(--card);border:1px solid var(--line);place-items:center}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:18;display:none}
.scrim.on{display:block}
/* ---- Story Engine ---- */
.reading{font-size:16.5px;line-height:1.75;color:var(--ink)}
.reading p{margin:0 0 15px}
.reading b{color:var(--ink)}
.gl{border-bottom:1.5px dotted var(--brand);color:var(--brand);cursor:pointer;font-weight:600}
.gl:hover{background:rgba(108,140,255,.12);border-radius:3px}
.gl.on{background:rgba(108,140,255,.16);border-radius:3px}
.gldef{margin:10px 0;border-left:4px solid var(--brand);background:var(--panel);border-radius:0 12px 12px 0;padding:10px 14px;font-size:14px;color:var(--ink-mute);animation:slidein .25s}
.gldef b{color:var(--brand)}
.story-meta{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.story-chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--ink-mute)}
.readbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line-soft);margin-bottom:14px;flex-wrap:wrap}
.readbar .bar{flex:1;min-width:120px}
.hlmark{background:rgba(255,206,84,.34);border-radius:3px;padding:0 2px}
.notebox{width:100%;margin-top:10px;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;color:var(--ink);padding:12px;font-family:inherit;font-size:14px}
.sortcol{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:12px;min-height:70px}
.sortcol.over{border-color:var(--brand);background:var(--card-hover)}
.chipitem{display:block;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;color:var(--ink);cursor:pointer;font-size:14px}
.chipitem.sel{border-color:var(--brand);background:var(--card-hover)}
.chipitem.correct{border-color:var(--good);background:rgba(51,214,159,.12)}
.chipitem.wrong{border-color:var(--bad);background:rgba(255,107,129,.10)}
.matchsel{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;color:var(--ink);padding:9px 10px;font-family:inherit;font-size:13.5px}
.matchsel.correct{border-color:var(--good)} .matchsel.wrong{border-color:var(--bad)}
.skillrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.skillrow .nm{flex:1;font-weight:600;font-size:14px}
.checkitem{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px}
.checkitem .bx{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;flex:0 0 22px}
.checkitem.done .bx{background:var(--good);border-color:var(--good);color:#062}