:root{
  --bg:#0a0f1e; --bg2:#0e1526; --panel:#141c30; --panel2:#1a2340; --raise:#0c1428;
  --ink:#e9eef8; --muted:#93a0bd; --faint:#66748f;
  --line:#26314f; --line2:#334065;
  --accent:#5b8cff; --accent2:#7dd3fc; --indigo:#818cf8;
  --good:#34d399; --bad:#f87171; --warn:#fbbf24; --hard:#fb923c;
  --math:#a78bfa; --rw:#2dd4bf;
  --shadow:0 10px 40px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 50% -200px,#16204080,transparent),var(--bg);
  color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent)}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,15,30,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:1000px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--indigo));
  display:grid;place-items:center;font-size:13px;color:#04102e;font-weight:800}
.tabs{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap}
.tab{background:none;border:none;color:var(--muted);padding:8px 14px;border-radius:9px;font-size:14px;
  cursor:pointer;font-weight:500;transition:.15s}
.tab:hover{color:var(--ink);background:var(--panel)}
.tab.on{color:var(--ink);background:var(--panel2)}
.tab.on{box-shadow:inset 0 0 0 1px var(--line2)}
.nav .goal{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.nav .goal b{color:var(--accent2)}
@media(max-width:640px){.nav .goal{display:none}}

.wrap{max-width:1000px;margin:0 auto;padding:28px 20px 90px}
.view{display:none;animation:fade .25s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- generic ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px}
.card.grad{background:linear-gradient(180deg,var(--panel2),var(--panel))}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 8px}
.lede{color:#cdd6ea}
.muted{color:var(--muted)}
.small{font-size:13px}
h1.page{font-size:28px;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 22px}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:10px;
  font-size:13.5px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04102e;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;letter-spacing:.03em}

/* ---------- dashboard ---------- */
.hero h1{font-size:30px;margin:0 0 6px}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
@media(max-width:640px){.scores{grid-template-columns:1fr}}
.score{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.score .lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.score .big{font-size:27px;font-weight:700}
.score .pct{color:var(--muted);font-size:13px;margin-top:3px}
.score .pct b{color:var(--accent2)}
.score .gap{color:var(--hard);font-weight:700}
.snap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.snap{grid-template-columns:1fr}}
.snap .s{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center}
.snap .s .n{font-size:24px;font-weight:700}
.snap .s .k{font-size:12px;color:var(--muted);margin-top:2px}
.snap .s .n.good{color:var(--good)} .snap .s .n.warn{color:var(--warn)}
.rank{counter-reset:r;list-style:none;padding:0;margin:10px 0 0}
.rank li{counter-increment:r;position:relative;padding:9px 0 9px 42px;border-top:1px solid var(--line);color:#cdd6ea}
.rank li:first-child{border-top:none}
.rank li:before{content:counter(r);position:absolute;left:0;top:9px;width:27px;height:27px;background:var(--accent);
  color:#04102e;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:14px}
.rank b{color:#fff} .cheap{color:var(--good);font-weight:600}
details.more summary{cursor:pointer;color:var(--accent);font-size:14px;user-select:none;margin-top:6px}
details.more ul{color:#cdd6ea}

/* ---------- plan ---------- */
.principles{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:0 0 20px}
@media(max-width:640px){.principles{grid-template-columns:1fr}}
.principles div{background:var(--raise);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13.5px;color:#cdd6ea}
.principles b{color:var(--accent2)}
.week{border:1px solid var(--line);border-radius:13px;margin-bottom:13px;overflow:hidden}
.wk-head{background:#0e1a33;padding:12px 17px;display:flex;gap:11px;align-items:baseline;border-bottom:1px solid var(--line)}
.wk-num{background:var(--accent);color:#04102e;font-weight:700;font-size:13px;padding:3px 11px;border-radius:7px;flex:none}
.wk-title{font-weight:600}
.days{list-style:none;margin:0;padding:5px 17px 11px}
.days li{padding:9px 0;border-top:1px solid var(--line)}
.days li:first-child{border-top:none}
.days label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.days input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--good);cursor:pointer}
.days .txt{color:#cdd6ea;font-size:14.5px}.days .txt b{color:#fff}
.days .test .txt,.days .test .txt b{color:var(--accent2)}
.days label.done .txt{text-decoration:line-through;opacity:.5}
.wkbar{height:5px;background:var(--raise);border-radius:3px;overflow:hidden;margin-top:0}
.wkbar>i{display:block;height:100%;background:var(--good);width:0;transition:width .3s}

/* ---------- practice ---------- */
.toolbar{position:sticky;top:57px;z-index:20;background:rgba(10,15,30,.9);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grp{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.grp label{font-size:12px;color:var(--muted);margin-right:2px}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:6px 11px;border-radius:999px;
  font-size:13px;cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink);border-color:var(--accent)}
.chip.on{background:var(--accent);color:#04102e;border-color:var(--accent);font-weight:600}
select.chip{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.chip option{background:var(--panel2);color:var(--ink)}
.spacer{flex:1}
.count{font-size:13px;color:var(--muted)}

.q{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.q .top{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.tag{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;letter-spacing:.03em}
.tag.sec-math{background:rgba(167,139,250,.16);color:var(--math)}
.tag.sec-rw{background:rgba(45,212,191,.16);color:var(--rw)}
.tag.dom{background:rgba(147,160,189,.14);color:var(--muted)}
.tag.tp{background:rgba(91,140,255,.13);color:var(--accent2)}
.tag.diff-Hard{background:rgba(251,146,60,.16);color:var(--hard)}
.tag.diff-Medium{background:rgba(96,165,250,.16);color:#60a5fa}
.qid{margin-left:auto;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.prompt{font-size:16.5px;margin:2px 0 12px}.prompt sup{font-size:.72em}
.choices{display:grid;gap:8px;margin:0 0 12px}
.choice{text-align:left;background:var(--raise);border:1px solid var(--line);color:var(--ink);padding:10px 13px;
  border-radius:10px;cursor:pointer;font-size:15px;transition:.12s;display:flex;gap:10px}
.choice:hover{border-color:var(--accent)}
.choice .ltr{font-weight:700;color:var(--muted);flex:none}
.choice.picked{border-color:var(--accent);background:#12224a}
.choice.correct{border-color:var(--good);background:rgba(52,211,153,.12)}.choice.correct .ltr{color:var(--good)}
.choice.wrong{border-color:var(--bad);background:rgba(248,113,113,.1)}.choice.wrong .ltr{color:var(--bad)}
.gridin{display:flex;gap:8px;margin:0 0 12px;align-items:center;flex-wrap:wrap}
.gridin input{background:var(--raise);border:1px solid var(--line);color:var(--ink);padding:9px 12px;border-radius:9px;
  font-size:15px;width:150px;font-variant-numeric:tabular-nums}
.gridin input:focus{outline:none;border-color:var(--accent)}
.gridin .fb{font-size:13.5px;font-weight:600}
.gridin .fb.ok{color:var(--good)}.gridin .fb.no{color:var(--bad)}
.reveal{background:var(--panel2);border:1px solid var(--line);color:var(--accent2);padding:8px 14px;border-radius:9px;
  font-size:13.5px;cursor:pointer}
.reveal:hover{border-color:var(--accent)}
.ansbox{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:none}
.ansbox.show{display:block}
.ansbox .a{color:var(--good);font-weight:600;margin-bottom:6px}
.ansbox .a .val{background:rgba(52,211,153,.14);padding:2px 8px;border-radius:6px;font-variant-numeric:tabular-nums}
.ansbox .ex{color:#cdd6ea;font-size:15px}.ansbox .ex sup{font-size:.72em}
.ansbox .trap{margin-top:8px;color:var(--muted);font-size:14px;border-left:2px solid var(--hard);padding-left:10px}
.ansbox .trap b{color:var(--hard)}
.section-head{margin:28px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:48px}

/* ---------- progress ---------- */
.big-metric{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 18px}
@media(max-width:640px){.big-metric{grid-template-columns:1fr 1fr}}
.big-metric .m{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.big-metric .m .n{font-size:25px;font-weight:700}
.big-metric .m .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.big-metric .m .n.good{color:var(--good)}.big-metric .m .n.warn{color:var(--warn)}.big-metric .m .n.accent{color:var(--accent2)}
.chartwrap{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:16px}
.chartwrap svg{width:100%;height:auto;display:block}
.logform{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-top:14px}
.logform .f{display:flex;flex-direction:column;gap:4px}
.logform label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.logform input{background:var(--raise);border:1px solid var(--line);color:var(--ink);padding:8px 10px;border-radius:9px;font-size:14px;width:96px}
.logform input:focus{outline:none;border-color:var(--accent)}
.logtable{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.logtable th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line)}
.logtable td{padding:8px;border-bottom:1px solid var(--line);color:#cdd6ea;font-variant-numeric:tabular-nums}
.logtable td .del{color:var(--faint);cursor:pointer;font-size:12px}
.logtable td .del:hover{color:var(--bad)}
.dombars{display:grid;gap:9px;margin-top:6px}
.dombar{display:grid;grid-template-columns:150px 1fr 62px;gap:10px;align-items:center;font-size:13.5px}
@media(max-width:520px){.dombar{grid-template-columns:110px 1fr 52px}}
.dombar .track{height:12px;background:var(--raise);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.dombar .track>i{display:block;height:100%;border-radius:6px}
.dombar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.dombar .nm{color:#cdd6ea}
.readout{background:var(--raise);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:14px 16px;margin-top:4px;color:#cdd6ea}
.readout b{color:#fff}
.synccode{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:23px;font-weight:700;
  letter-spacing:2px;color:var(--accent2);background:var(--raise);border:1px solid var(--line2);border-radius:10px;
  padding:9px 18px;margin-top:6px;user-select:all}
#syncDash{margin:0 0 18px}
.syncprompt{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(180deg,#14243f,var(--panel));border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:13px 17px;font-size:14px;color:#cdd6ea}
.syncprompt b{color:#fff}
.sp-btns{display:flex;gap:8px;flex:none}
.syncchip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 15px}
.syncchip b{color:var(--accent2);font-family:ui-monospace,Menlo,monospace;letter-spacing:1px}
.syncchip a{color:var(--accent);margin-left:6px}
.dotok{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);flex:none}
footer{color:var(--faint);font-size:13px;text-align:center;margin-top:44px}
.appendix h3{margin:18px 0 6px;font-size:16px;color:var(--accent2)}
.appendix p,.appendix li{color:#cdd6ea}
code{background:var(--raise);padding:1px 6px;border-radius:5px;font-size:13px;color:var(--accent2)}