/* Clean white by day, true black by night. Auto follows the phone; the toggle in the top bar overrides it. */
:root{
  --paper:#FFFFFF; --paper-rgb:255 255 255;
  --surface:#FFFFFF; --surface-2:#F3F5F8;
  --ink:#0F172A; --ink-soft:#334155; --muted:#5B6575;
  --line:#DDE3EC; --tab-line:#C5CDD9; --edge-rgb:100 116 139;
  --accent:#6B1FA0; --accent-rgb:107 31 160; --accent-ink:#54167F; --accent-soft:rgb(107 31 160 / .08);
  --accent-2:#C2570C; --accent2-rgb:194 87 12;
  --accent-3:#F59E0B; --accent3-rgb:245 158 11; --warn:#9A5B05;
  --hl:#FDE68A; --hl-rgb:253 230 138;
  --good:#15803D; --good-rgb:21 128 61; --good-soft:rgb(21 128 61 / .10);
  --bad:#B91C1C; --bad-rgb:185 28 28; --bad-soft:rgb(185 28 28 / .08);
  --on-accent:#FFFFFF;
  --glow:none;
  --shadow:0 1px 2px rgb(15 23 42 / .06), 0 8px 20px -12px rgb(15 23 42 / .22);
  --radius:12px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#000000; --paper-rgb:0 0 0;
  --surface:#0D0D11; --surface-2:#18181F;
  --ink:#F5F5F7; --ink-soft:#D4D7DE; --muted:#9BA1AD;
  --line:#2F2F39; --tab-line:#4E4E5C; --edge-rgb:200 205 215;
  --accent:#C79BFF; --accent-rgb:199 155 255; --accent-ink:#DAB8FF; --accent-soft:rgb(199 155 255 / .14);
  --accent-2:#FB923C; --accent2-rgb:251 146 60;
  --accent-3:#FBBF24; --accent3-rgb:251 191 36; --warn:#FBBF24;
  --hl:#FACC15; --hl-rgb:250 204 21;
  --good:#4ADE80; --good-rgb:74 222 128; --good-soft:rgb(74 222 128 / .14);
  --bad:#F87171; --bad-rgb:248 113 113; --bad-soft:rgb(248 113 113 / .14);
  --on-accent:#16001F;
  --shadow:0 1px 0 rgb(255 255 255 / .05), 0 8px 22px -12px rgb(0 0 0 / .9);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#000000; --paper-rgb:0 0 0;
    --surface:#0D0D11; --surface-2:#18181F;
    --ink:#F5F5F7; --ink-soft:#D4D7DE; --muted:#9BA1AD;
    --line:#2F2F39; --tab-line:#4E4E5C; --edge-rgb:200 205 215;
    --accent:#C79BFF; --accent-rgb:199 155 255; --accent-ink:#DAB8FF; --accent-soft:rgb(199 155 255 / .14);
    --accent-2:#FB923C; --accent2-rgb:251 146 60;
    --accent-3:#FBBF24; --accent3-rgb:251 191 36; --warn:#FBBF24;
    --hl:#FACC15; --hl-rgb:250 204 21;
    --good:#4ADE80; --good-rgb:74 222 128; --good-soft:rgb(74 222 128 / .14);
    --bad:#F87171; --bad-rgb:248 113 113; --bad-soft:rgb(248 113 113 / .14);
    --on-accent:#16001F;
    --shadow:0 1px 0 rgb(255 255 255 / .05), 0 8px 22px -12px rgb(0 0 0 / .9);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;}
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  background:var(--paper);
  font-family:"Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  line-height:1.5;
}
h1,h2,h3,h4{ font-family:"Lora", Georgia, serif; font-weight:600; text-wrap:balance; margin:0 0 .3em; letter-spacing:-.01em; }
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
a{ color:inherit; }
button{ font-family:inherit; }

.wrap{ max-width:960px; margin:0 auto; padding:0 20px 80px; }

.topbar{ border-bottom:1px solid var(--line); background:var(--paper); }
.topbar-inner{ max-width:960px; margin:0 auto; padding:26px 20px 20px; display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-start; justify-content:space-between; }
.brand{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:center; }
.brand-logo{ grid-row:1 / span 2; width:54px; height:54px; border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.brand h1,.brand p{ grid-column:2; }
.brand h1{ font-size:1.7rem; display:flex; align-items:baseline; gap:.4em; }
.brand h1 em{ font-style:italic; color:var(--accent); }
.brand p{ margin:0; color:var(--muted); font-size:.95rem; max-width:44ch; }

.top-right{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.stats{ display:flex; gap:22px; flex-wrap:wrap; }
.stat{ text-align:right; }
.stat .n{ font-family:"IBM Plex Mono"; font-weight:600; font-size:1.3rem; display:block; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat .l{ color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }

.authbar{ display:flex; align-items:center; gap:10px; }
.signin-btn{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); padding:8px 14px; border-radius:9px; font-weight:600; font-size:.86rem; cursor:pointer;
}
.signin-btn:hover{ border-color:var(--accent); }
.user-chip{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.user-chip img{ width:26px; height:26px; border-radius:50%; }
.signout-btn{ border:none; background:none; color:var(--muted); font-size:.78rem; text-decoration:underline; cursor:pointer; padding:0; }

.tabs{ max-width:960px; margin:0 auto; padding:14px 20px 0; display:flex; gap:6px; flex-wrap:wrap; }
.tab{ border:1px solid var(--tab-line); background:var(--surface); color:var(--ink); padding:9px 16px; border-radius:999px; cursor:pointer; font-size:.92rem; font-weight:600; transition:background .15s, color .15s, border-color .15s; }
.tab:hover{ border-color:var(--accent); }
.tab[aria-selected="true"]{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow); }
.panel{ padding-top:28px; display:none; }
.panel.active{ display:block; animation:rise .35s ease both; }
@media (prefers-reduced-motion: reduce){ .panel.active{ animation:none; } }
@keyframes rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px;}
.section-head h2{ font-size:1.35rem; }
.muted{ color:var(--muted); }
.small{ font-size:.86rem; }

.btn{ border:1px solid var(--ink); background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:10px; font-weight:600; cursor:pointer; font-size:.92rem; transition:transform .1s ease, opacity .15s; }
.btn:hover{ opacity:.88; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.accent{ background:var(--accent); border-color:transparent; color:var(--on-accent); font-weight:700; box-shadow:var(--glow); }
.btn.small{ padding:6px 12px; font-size:.8rem; border-radius:8px; }

select, input[type=text], textarea{ width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:9px; padding:9px 11px; font:inherit; font-size:.92rem; }
textarea{ resize:vertical; min-height:64px; }
label{ display:block; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.field{ margin-bottom:14px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .grid2{ grid-template-columns:1fr; } }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.filters select{ width:auto; min-width:180px; }
.filters input[type=text]{ width:auto; flex:1; min-width:160px; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); margin-bottom:14px; }
#notifList{ display:flex; flex-direction:column; gap:10px; }
.notif-item{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.notif-item:last-child{ border-bottom:none; padding-bottom:0; }
.notif-text{ flex:1; }
.notif-time{ white-space:nowrap; }
.tagrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tag{ font-family:"IBM Plex Mono"; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); border:1px solid transparent; }
.tag.paper{ background:transparent; border-color:var(--line); color:var(--muted); }
.q{ font-weight:600; margin-bottom:10px; }
.answer-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.pill{ border-radius:8px; padding:7px 11px; font-size:.88rem; flex:1; min-width:200px; }
.pill.wrong{ background:var(--bad-soft); color:var(--bad); }
.pill.wrong .lbl{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; margin-bottom:2px;}
.pill.wrong .val{ text-decoration:line-through; text-decoration-thickness:2px; }
.pill.right{ background:var(--good-soft); color:var(--good); }
.pill.right .lbl{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; margin-bottom:2px;}
.expl{ color:var(--ink-soft); font-size:.92rem; margin:8px 0 12px; }
.card-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px dashed var(--line); padding-top:10px; }
.meta{ color:var(--muted); font-size:.8rem; }
.card-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.upvote{ border:1px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:999px; padding:5px 11px; font-size:.82rem; cursor:pointer; display:flex; gap:5px; align-items:center;}
.upvote:hover{ border-color:var(--accent); color:var(--accent-ink); }
.ai-box{ margin-top:10px; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:.88rem; }
.ai-box .lbl{ font-family:"IBM Plex Mono"; font-size:.7rem; text-transform:uppercase; color:var(--accent-ink); letter-spacing:.05em; margin-bottom:6px; display:block;}

.empty{ color:var(--muted); font-style:italic; padding:20px 0; }
.banner{ background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:12px 16px; font-size:.86rem; color:var(--muted); margin-bottom:16px; }
.gate-note{ font-size:.78rem; color:var(--muted); font-style:italic; }

.notes-layout{ display:grid; grid-template-columns:220px 1fr; gap:22px; }
@media (max-width:700px){ .notes-layout{ grid-template-columns:1fr; } }
.topic-list{ display:flex; flex-direction:column; gap:4px; }
.topic-btn{ text-align:left; border:1px solid transparent; background:transparent; color:var(--ink-soft); padding:9px 12px; border-radius:9px; cursor:pointer; font-size:.9rem; }
.topic-btn:hover{ background:var(--surface); }
.topic-btn.active{ background:var(--surface); border-color:var(--line); color:var(--ink); font-weight:600; box-shadow:var(--shadow); }
.notes-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); min-height:220px; }
.notes-panel h3{ font-size:1.15rem; margin-bottom:2px; }
.notes-panel h4{ font-size:1rem; margin-top:16px; color:var(--accent-ink); }
.notes-panel ul{ padding-left:1.2em; margin:6px 0; }
.notes-panel li{ margin-bottom:4px; }
.notes-meta{ color:var(--muted); font-size:.78rem; margin-bottom:14px; }
.thinking{ color:var(--muted); font-style:italic; }

.quiz-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.score-chip{ font-family:"IBM Plex Mono"; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.85rem; font-variant-numeric:tabular-nums;}
.quiz-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); }
.quiz-progress{ color:var(--muted); font-size:.8rem; margin-bottom:6px; }
.quiz-q{ font-size:1.08rem; font-weight:600; margin-bottom:16px; }
.opt{ display:block; width:100%; text-align:left; padding:11px 14px; margin-bottom:9px; border:1px solid var(--line); background:var(--paper); border-radius:10px; cursor:pointer; font-size:.94rem; color:var(--ink); }
.opt:hover:not(:disabled){ border-color:var(--accent); }
.opt.correct{ background:var(--good-soft); border-color:var(--good); color:var(--good); font-weight:600; }
.opt.incorrect{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); font-weight:600; }
.opt:disabled{ cursor:default; }
.quiz-expl{ background:var(--paper); border-radius:10px; padding:12px 14px; font-size:.9rem; color:var(--ink-soft); margin-top:10px; }
.quiz-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; flex-wrap:wrap; gap:10px;}
.badge-ai{ font-family:"IBM Plex Mono"; font-size:.66rem; text-transform:uppercase; background:var(--accent-soft); color:var(--accent-ink); padding:2px 7px; border-radius:6px; margin-left:8px; }

.about-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.about-card p{ color:var(--ink-soft); }
.price-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.price{ flex:1; min-width:200px; border:1px solid var(--line); border-radius:12px; padding:16px; }
.price.now{ border-color:var(--good); }
.price h4{ font-size:.95rem; display:flex; align-items:baseline; gap:8px; }
.price .strike{ text-decoration:line-through; color:var(--muted); font-weight:400; font-size:.85rem; }
.price .tag{ margin-bottom:8px; }

footer{ text-align:center; color:var(--muted); font-size:.8rem; padding:30px 0 10px; }

/* ---------- Speak ---------- */
.speak-modes{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.speak-mode-btn{ border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:8px 16px;
  border-radius:999px; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s, color .15s; }
.speak-mode-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.speak-timer-row{ display:flex; align-items:center; gap:12px; }
#speakTimer{ font-size:1.3rem; padding:8px 18px; }
#speakPrepNotes{ background:var(--paper); border-radius:10px; padding:14px 16px; font-size:.88rem; color:var(--ink-soft); max-height:260px; overflow-y:auto; }
.speak-history-item{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.speak-history-item:last-child{ border-bottom:none; }
.speak-history-item .l{ color:var(--muted); font-size:.78rem; }
.speak-duration-row{ display:flex; gap:8px; flex-wrap:wrap; }
.speak-duration-btn.active{ background:var(--ink); color:var(--paper); }
.speak-volume-meter{ margin-top:14px; height:14px; border-radius:999px; background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.speak-volume-fill{ height:100%; width:0%; background:var(--accent); transition:width .08s linear; }

/* ---------- Manual notes ---------- */
.manual-note-item{ padding:12px 0; border-bottom:1px dashed var(--line); }
.manual-note-item:last-child{ border-bottom:none; }
.manual-note-item p{ font-size:.92rem; color:var(--ink); white-space:pre-wrap; }
.manual-note-meta{ font-size:.76rem; color:var(--muted); margin-top:6px; }
.link-btn{ background:none; border:none; padding:0; color:var(--accent-ink); font-size:.76rem; font-weight:600; cursor:pointer; text-decoration:underline; }

/* ================= PYQ CHECK ================= */
.pyq-files{ list-style:none; padding:0; margin:8px 0 0; }
.pyq-files li{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.pyq-error{ color:var(--bad); font-size:.86rem; margin:10px 0 0; min-height:1em; }
.pyq-num{ width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:9px; padding:9px 11px; font:inherit; font-size:.92rem; }
.pyq-preview{ margin-top:10px; font-size:.88rem; }
.pyq-preview summary{ cursor:pointer; color:var(--accent-ink); font-weight:600; }
.pyq-prev-item{ padding:6px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft); }
.pyq-topline{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.pyq-qtext{ white-space:pre-line; }
.opt.selected{ border-color:var(--ink); background:var(--accent-soft); font-weight:600; }
.pyq-tags{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:14px 0 4px; }
.pyq-tag{ border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:7px 14px; border-radius:999px; font-size:.84rem; font-weight:600; cursor:pointer; }
.pyq-tag:disabled{ opacity:.45; cursor:not-allowed; }
.pyq-tag.known.selected{ background:var(--good-soft); color:var(--good); border-color:var(--good); }
.pyq-tag.guess.selected{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
.pyq-tag.unknown.selected{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
.pyq-low{ color:var(--bad); border-color:var(--bad); }
.pyq-palette{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }
.pyq-pal{ width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); font-size:.8rem; cursor:pointer; font-variant-numeric:tabular-nums; }
.pyq-pal.done{ background:var(--good-soft); border-color:var(--good); color:var(--good); }
.pyq-pal.partial{ background:var(--accent-soft); border-color:var(--accent); }
.pyq-pal.current{ outline:2px solid var(--ink); outline-offset:1px; }
.pyq-score{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pyq-score-n{ font-size:2.4rem; font-weight:700; }
.pyq-score-of{ color:var(--muted); font-size:1rem; }
.pyq-table{ width:100%; border-collapse:collapse; margin:12px 0; font-size:.9rem; }
.pyq-table th, .pyq-table td{ text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.pyq-table th{ color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.pyq-table tr.total td{ font-weight:700; border-top:2px solid var(--ink); border-bottom:none; }
.pyq-warn{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.pyq-warn p{ margin:0 0 6px; }
.pyq-flag{ font-family:"IBM Plex Mono"; font-size:.68rem; text-transform:uppercase; padding:2px 8px; border-radius:6px; letter-spacing:.04em; }
.pyq-flag.strong{ background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad); }
.pyq-flag.mild{ background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent); }
.pyq-doubt-item{ padding:10px 12px; margin-bottom:8px; border-radius:10px; border:1px solid var(--line); border-left-width:4px; }
.pyq-doubt-item.strong{ border-left-color:var(--bad); background:var(--bad-soft); }
.pyq-doubt-item.mild{ border-left-color:var(--accent); }
.pyq-check{ display:flex; align-items:center; gap:8px; font-weight:500; margin:10px 0 4px; }
.pyq-check input{ width:auto; }
.pyq-rev{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:12px 0; background:var(--paper); }
.pyq-rev.strong{ border-color:var(--bad); box-shadow:inset 4px 0 0 var(--bad); }
.pyq-rev-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.pyq-tagchip, .pyq-verdict{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:999px; border:1px solid var(--line); }
.pyq-tagchip.known{ color:var(--good); border-color:var(--good); }
.pyq-tagchip.guess{ color:var(--accent-ink); border-color:var(--accent); }
.pyq-tagchip.unknown, .pyq-tagchip.skipped{ color:var(--bad); border-color:var(--bad); }
.pyq-verdict.right{ background:var(--good-soft); color:var(--good); border-color:var(--good); }
.pyq-verdict.wrong{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
.pyq-verdict.skipped{ color:var(--muted); }
.pyq-line{ margin-top:8px; font-size:.9rem; color:var(--ink-soft); }
.pyq-line .lbl{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.pyq-line.good{ color:var(--good); font-weight:600; }
.pyq-line.doubt{ color:var(--bad); }

/* printable review (Download PDF -> browser print dialog) */
#pyqPrintArea{ display:none; }
#pyqPrintArea, #pyqPrintArea *{ color:#111; }
#pyqPrintArea{ background:#fff; font-family:Georgia, "Times New Roman", serif; font-size:11pt; line-height:1.4; }
#pyqPrintArea h1{ font-size:20pt; margin:0 0 2pt; }
#pyqPrintArea h2{ font-size:14pt; margin:18pt 0 4pt; border-bottom:1px solid #999; padding-bottom:2pt; }
#pyqPrintArea .pp-sub{ color:#555; margin:0 0 8pt; }
#pyqPrintArea .pp-table{ border-collapse:collapse; margin:6pt 0 10pt; }
#pyqPrintArea .pp-table th, #pyqPrintArea .pp-table td{ border:1px solid #999; padding:3pt 10pt; text-align:left; }
#pyqPrintArea .pp-warn{ border:1.5px solid #b00; padding:6pt 8pt; background:#fdeeee; }
#pyqPrintArea .pp-item{ border:1px solid #bbb; border-radius:4pt; padding:7pt 9pt; margin:8pt 0; page-break-inside:avoid; break-inside:avoid; }
#pyqPrintArea .pp-item.strong{ border:2px solid #b00; }
#pyqPrintArea .pp-head{ font-size:10pt; margin-bottom:3pt; }
#pyqPrintArea .pp-q{ white-space:pre-line; font-weight:bold; margin-bottom:3pt; }
#pyqPrintArea .pp-opts{ margin:2pt 0 5pt 0; padding-left:22pt; }
#pyqPrintArea .pp-doubt, #pyqPrintArea .pp-doubt-note{ color:#b00 !important; font-weight:bold; }
#pyqPrintArea .pp-foot{ color:#666; font-size:9pt; margin-top:16pt; }
@media print{
  body.printing-pyq > *:not(#pyqPrintArea){ display:none !important; }
  body.printing-pyq #pyqPrintArea{ display:block; }
  body.printing-pyq{ background:#fff !important; height:auto !important; }
  body.printing-pyq html{ height:auto; }
}
@page{ margin:14mm; }

/* PYQ answer sheet, topic report, time, flags */
.pyq-sheetbox{ padding:14px 18px; }
.pyq-sheetbox > summary{ cursor:pointer; list-style:revert; margin-bottom:4px; }
.pyq-sheetbox textarea{ margin-top:8px; }
.pyq-sheet{ display:flex; flex-wrap:wrap; gap:8px; }
.pyq-cellwrap{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; width:50px; }
.pyq-cellno{ font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.pyq-sheet input.pyq-cell{ width:44px; padding:7px 0; text-align:center; text-transform:uppercase; font-weight:700; font-family:"IBM Plex Mono", ui-monospace, monospace; }
.pyq-sheet input.pyq-cell.manual{ border-color:var(--ink); background:var(--accent-soft); }
.pyq-sheet input.pyq-cell::placeholder{ color:var(--muted); opacity:1; font-weight:600; }
.pyq-sheet input.pyq-cell.src-key::placeholder{ color:var(--ink-soft); }
.pyq-sheet input.pyq-cell.src-ai-high::placeholder{ color:var(--good); }
.pyq-sheet input.pyq-cell.src-ai-medium::placeholder{ color:var(--accent); }
.pyq-sheet input.pyq-cell.src-ai-low::placeholder{ color:var(--bad); }
.pyq-topic-row{ display:grid; grid-template-columns:minmax(120px,1.2fr) 1.4fr auto auto; gap:10px; align-items:center; padding:6px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.pyq-bar{ height:10px; border-radius:999px; background:var(--paper); border:1px solid var(--line); overflow:hidden; }
.pyq-bar i{ display:block; height:100%; }
.pyq-bar i.low{ background:var(--bad); } .pyq-bar i.mid{ background:var(--accent); } .pyq-bar i.high{ background:var(--good); }
.pyq-slow{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.btn.pyq-flagged{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft); }
.pyq-pal.flagged{ box-shadow:inset 0 -3px 0 var(--accent); }
@media (max-width:560px){ .pyq-topic-row{ grid-template-columns:1fr auto; } .pyq-bar{ grid-column:1 / -1; order:3; } }

/* ================= dark-neon finishing ================= */
::placeholder{ color:var(--muted); opacity:1; }
::selection{ background:rgb(var(--accent-rgb) / .35); color:#fff; }
select, input[type=text], input[type=number], textarea{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
select option{ background:var(--surface); color:var(--ink); }
select:focus, input:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:none; }
.card, .quiz-card, .notes-panel, .about-card{ background:var(--surface); border-color:rgb(var(--edge-rgb) / .22); }
.tab, .signin-btn{ background:var(--surface); border-color:var(--tab-line); color:var(--ink); }
.signin-btn{ color:var(--ink); }
.tab:hover, .signin-btn:hover{ border-color:var(--accent); color:var(--accent-ink); box-shadow:none; }
.btn{ background:var(--surface-2); color:var(--ink); border:1px solid rgb(var(--accent-rgb) / .45); }
.btn:hover{ opacity:1; box-shadow:none; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn.accent:hover{ filter:brightness(1.1); box-shadow:none; }
.btn.pyq-flagged{ background:rgb(var(--accent3-rgb) / .14); border-color:var(--accent-3); color:var(--warn); }
.opt{ background:var(--surface-2); border-color:var(--line); color:var(--ink); }
.opt:hover:not(:disabled){ border-color:var(--accent); box-shadow:none; }
.opt.selected{ border-color:var(--accent); background:rgb(var(--accent-rgb) / .12); color:var(--ink); box-shadow:none; }
.opt.correct{ box-shadow:none; }
.opt.incorrect{ box-shadow:none; }
.speak-mode-btn{ background:var(--surface); border-color:var(--line); color:var(--ink-soft); }
.speak-mode-btn.active, .speak-duration-btn.active{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow); }
.topic-btn{ color:var(--ink-soft); }
.topic-btn:hover{ background:var(--surface); }
.topic-btn.active{ background:var(--surface-2); border-color:var(--accent); color:var(--ink); box-shadow:none; }
.score-chip{ background:var(--surface-2); border-color:var(--line); color:var(--ink); }
.speak-volume-fill{ background:var(--accent); }
.pyq-pal{ background:var(--surface-2); color:var(--ink-soft); }
.pyq-pal.current{ outline-color:var(--accent); }
.pyq-score-n{ color:var(--accent); }
.pyq-rev{ background:var(--surface-2); }
.pyq-warn{ background:rgb(var(--accent-rgb) / .08); border-color:rgb(var(--accent-rgb) / .45); color:var(--ink); }
.pyq-warn p{ color:var(--ink-soft); }
.pyq-sheet input.pyq-cell.manual{ background:rgb(var(--accent-rgb) / .14); border-color:var(--accent); color:#fff; }
.pyq-sheet input.pyq-cell.src-ai-medium::placeholder{ color:var(--warn); }
.pyq-table tr.total td{ border-top-color:var(--accent); }
.pyq-tag.guess.selected{ color:var(--warn); border-color:var(--warn); background:rgb(var(--hl-rgb) / .12); }
.pyq-flag.mild{ color:var(--warn); border-color:var(--warn); background:rgb(var(--hl-rgb) / .10); }
.badge-ai, .tag{ background:rgb(var(--accent2-rgb) / .18); color:var(--accent-2); }
.price.now{ border-color:var(--good); }
.price .tag{ background:rgb(var(--accent2-rgb) / .18); color:var(--accent-2); }
footer a{ color:var(--accent-ink); }
.foot-contact{ margin-top:10px; }
.foot-contact a{ text-decoration:underline; }
a{ text-decoration-color:rgb(var(--accent-rgb) / .5); }
html{ scrollbar-color:var(--line) var(--paper); }

/* ================= responsive: phones, tablets, laptops ================= */
html{ -webkit-text-size-adjust:100%; }
img, svg, video{ max-width:100%; height:auto; }
.card, .quiz-card, .notes-panel, .about-card, .pyq-rev{ overflow-wrap:anywhere; }
.pyq-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.wrap, .topbar-inner, .tabs, .menubar{ padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); }

@media (max-width:900px){
  .quiz-card, .notes-panel, .about-card{ padding:20px 18px; }
}
@media (max-width:700px){
  .notes-layout{ grid-template-columns:1fr; gap:14px; }
  .topic-list{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .topic-btn{ border:1px solid var(--line); background:var(--surface); padding:8px 12px; font-size:.84rem; }
  .price-row > .price{ min-width:100%; }
}
@media (max-width:640px){
  .wrap, .topbar-inner, .tabs{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .topbar-inner{ padding-top:18px; padding-bottom:12px; gap:12px; }
  .brand h1{ font-size:1.5rem; }
  .brand p{ font-size:.88rem; max-width:none; }
  .top-right{ width:100%; align-items:flex-start; gap:10px; }
  .stats{ width:100%; justify-content:space-between; gap:10px; }
  .stat{ text-align:left; }
  .authbar, .user-chip{ max-width:100%; }
  .tabs{ gap:6px; padding-top:10px; }
  .tab{ padding:8px 13px; font-size:.86rem; }
  .panel{ padding-top:20px; }
  .section-head{ align-items:stretch; }
  .section-head > .btn, .section-head > .card-actions{ width:100%; }
  .section-head > .btn{ text-align:center; }
  .filters select, .filters input[type=text]{ width:100%; flex:1 1 100%; }
  .quiz-head, .quiz-head > div{ width:100%; }
  .card, .quiz-card{ padding:16px 15px; }
  .quiz-q{ font-size:1rem; }
  .quiz-foot, .card-foot{ flex-direction:column; align-items:stretch; }
  .quiz-foot .card-actions, .card-foot .card-actions{ width:100%; }
  .quiz-foot .card-actions > .btn{ flex:1 1 auto; text-align:center; }
  .card-actions > .btn{ min-height:42px; }
  /* 16px inputs stop iOS Safari zooming the page when a field is focused */
  select, input[type=text], input[type=number], textarea{ font-size:16px; }
  .btn, .opt, .pyq-tag{ min-height:42px; }
  .opt{ padding:12px 14px; }
  .pyq-tags .muted{ flex:1 1 100%; }
  .pyq-tag{ flex:1 1 auto; text-align:center; }
  .pyq-pal{ width:38px; height:38px; }
  .pyq-score-n{ font-size:2rem; }
  .pyq-table th, .pyq-table td{ padding:7px 5px; font-size:.82rem; }
  .pyq-rev{ padding:12px 12px; }
  .pyq-cellwrap{ width:46px; }
  .pyq-sheet input.pyq-cell{ width:40px; font-size:16px; }
  .speak-modes, .speak-duration-row{ width:100%; }
  .speak-mode-btn{ flex:1 1 auto; text-align:center; }
  #speakTimer{ font-size:1.15rem; padding:6px 14px; }
  .manual-note-item{ padding:10px 0; }
  .about-card h2{ font-size:1.15rem; }
  footer{ padding:24px 12px 14px; }
}
@media (max-width:380px){
  .stats{ gap:6px; }
  .stat .n{ font-size:1.1rem; }
  .stat .l{ font-size:.62rem; letter-spacing:.03em; }
  .tab{ padding:7px 11px; font-size:.82rem; }
}
/* tablets: keep the comfortable two-column notes layout but a touch narrower */
@media (min-width:701px) and (max-width:960px){
  .notes-layout{ grid-template-columns:190px 1fr; gap:16px; }
}
/* very large screens: slightly wider reading column */
@media (min-width:1400px){
  .wrap, .topbar-inner, .tabs, .menubar{ max-width:1040px; }
}

/* file input button — match dark neon */
input[type="file"]{color:var(--ink-soft,var(--ink));max-width:100%;font-size:14px}
input[type="file"]::file-selector-button{
  background:var(--surface-2);color:var(--ink);border:1px solid var(--accent);
  border-radius:999px;padding:8px 14px;margin-right:10px;cursor:pointer;font:inherit;font-size:14px;
}
input[type="file"]::file-selector-button:hover{box-shadow:none}

/* ---- PYQ: manual correction, uploads, Error Book list ---- */
.pyq-upload{ margin:6px 0 14px; padding:12px 14px; border:1px dashed var(--accent); border-radius:12px; background:rgb(var(--accent-rgb) / .05); }
.pyq-upload input[type="file"]{ display:block; margin-top:8px; }
.pyq-sheet input.pyq-cell.unclear{ border-color:var(--warn); box-shadow:0 0 0 2px rgb(var(--hl-rgb) / .25); }
.pyq-fix{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); }
.pyq-fix .lbl{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
.pyq-fixrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pyq-fixbtn{ min-width:40px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.pyq-fixbtn:hover{ border-color:var(--accent); box-shadow:none; }
.pyq-fixbtn.on{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.pyq-editor{ margin-top:10px; padding:12px 14px; border:1px solid var(--accent); border-radius:12px; background:rgb(var(--accent-rgb) / .05); }
.pyq-editor label{ display:block; font-size:.78rem; font-weight:600; margin:10px 0 4px; color:var(--ink-soft,var(--ink)); }
.pyq-editor textarea, .pyq-editor input[type="text"], .pyq-editor select{ width:100%; }
.pyq-edit-opt{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pyq-edit-opt b{ width:18px; text-align:center; }
.pyq-allq{ padding:14px 18px; }
.pyq-allq > summary{ cursor:pointer; list-style:revert; margin-bottom:6px; }
.pyq-allrow{ padding:12px 0; border-top:1px dashed var(--line); }
.pyq-qshort{ color:var(--ink-soft,var(--ink)); margin-bottom:4px; }
.pyq-logrow{ align-items:flex-start; font-weight:400; margin:8px 0; }
.pyq-logrow input{ margin-top:4px; flex:0 0 auto; }
@media (max-width:640px){
  .pyq-fixbtn{ min-width:44px; min-height:42px; }
  .pyq-edit-opt input{ font-size:16px; }
  .pyq-editor textarea, .pyq-editor select{ font-size:16px; }
}

/* ---- Test Sheet tab ---- */
.sh-controls{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.sh-controls .field{ margin:0; min-width:150px; }
.sh-controls #shN{ width:150px; }
.sh-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sh-chip{ padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); font-size:.85rem; color:var(--ink-soft); }
.sh-chip b{ color:var(--ink); font-family:"IBM Plex Mono", ui-monospace, monospace; }
.sh-chip.good{ border-color:rgb(var(--good-rgb) / .55); color:var(--good); }
.sh-chip.good b{ color:var(--good); }
.sh-chip.bad{ border-color:rgb(var(--bad-rgb) / .55); color:var(--bad); }
.sh-chip.bad b{ color:var(--bad); }
.sh-chip.score{ border-color:var(--accent); box-shadow:none; }
.sh-chip.muted{ opacity:.75; }
.sh-sub{ margin:4px 0 14px; flex-wrap:wrap; }
.sh-tools{ padding:14px 18px; }
.sh-tools > summary{ cursor:pointer; list-style:revert; }
.sh-tools textarea{ margin-top:6px; }
.sh-tablecard{ padding:12px 14px; }
.sh-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sh-table{ width:100%; border-collapse:separate; border-spacing:0 4px; min-width:340px; }
.sh-table th{ position:sticky; top:0; background:var(--surface); z-index:1; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; text-align:center; padding:8px 6px; }
.sh-table td{ padding:6px; text-align:center; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sh-table td:first-child{ border-left:1px solid var(--line); border-radius:10px 0 0 10px; }
.sh-table td:last-child{ border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
.sh-no{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:600; color:var(--ink-soft); width:60px; }
.sh-cell{ width:52px; text-align:center; text-transform:uppercase; font-weight:700; font-family:"IBM Plex Mono", ui-monospace, monospace; padding:8px 0; }
.sh-res{ font-weight:700; font-size:.88rem; min-width:112px; white-space:nowrap; }
.sh-row.right td{ background:rgb(var(--good-rgb) / .16); border-color:rgb(var(--good-rgb) / .5); }
.sh-row.right .sh-res{ color:var(--good); }
.sh-row.wrong td{ background:rgb(var(--bad-rgb) / .18); border-color:rgb(var(--bad-rgb) / .55); }
.sh-row.wrong .sh-res{ color:var(--bad); }
.sh-row.skipped .sh-res{ color:var(--warn); }
.sh-row.dropped .sh-res{ color:var(--muted); }
.sh-q textarea{ width:100%; margin-top:4px; }
@media (max-width:640px){
  .sh-controls .field, .sh-controls #shN{ width:100%; }
  .sh-cell{ width:48px; font-size:16px; min-height:42px; }
  .sh-res{ min-width:0; font-size:.8rem; white-space:normal; }
  .sh-no{ width:44px; }
  .sh-table th{ font-size:.62rem; padding:8px 2px; }
  .sh-q textarea, .sh-tools textarea{ font-size:16px; }
}

/* Test Sheet: fixed column widths so the Result text never wraps */
.sh-table{ table-layout:fixed; }
.sh-table th:nth-child(1), .sh-table td:nth-child(1){ width:15%; }
.sh-table th:nth-child(2), .sh-table td:nth-child(2){ width:27%; }
.sh-table th:nth-child(3), .sh-table td:nth-child(3){ width:27%; }
.sh-table th:nth-child(4), .sh-table td:nth-child(4){ width:31%; }
.sh-cell{ width:100%; max-width:64px; }
.sh-res{ white-space:nowrap; }
@media (max-width:640px){
  .sh-table{ min-width:0; }
  .sh-table th{ font-size:.58rem; letter-spacing:.02em; }
  .sh-cell{ max-width:52px; }
  .sh-res{ font-size:.78rem; }
  .sh-tablecard{ padding:10px 8px; }
}

/* ---- Error Book: flags, comments, admin delete ---- */
.tag.flag{ background:rgb(var(--bad-rgb) / .16); color:var(--bad); border-color:rgb(var(--bad-rgb) / .5); }
.card.has-flag{ border-color:rgb(var(--bad-rgb) / .45); box-shadow:none; }
.btn.small.flagged{ border-color:rgb(var(--bad-rgb) / .6); color:var(--bad); }
.btn.danger{ color:var(--bad); border-color:rgb(var(--bad-rgb) / .5); }
.btn.danger:hover{ box-shadow:none; }
.thread{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.cmt{ padding:8px 0; border-bottom:1px solid var(--line); }
.cmt:last-of-type{ border-bottom:0; }
.cmt.flagged{ border-left:3px solid var(--bad); padding-left:10px; }
.cmt-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.88rem; }
.cmt-text{ margin-top:4px; color:var(--ink-soft); font-size:.92rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.cmt-input{ width:100%; margin-top:8px; }
.filters{ flex-wrap:wrap; align-items:center; }
@media (max-width:640px){ .cmt-input{ font-size:16px; } }

/* ===== Quiz tab: PYQ Papers (attempt online) ===== */
.quiz-modes{ margin:0 0 16px; }
[hidden]{ display:none !important; }
.pp-paper{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.pp-paper-main{ min-width:0; flex:1 1 220px; }
.pp-last{ color:var(--accent-ink); font-weight:600; }
.pp-mini{ border-collapse:collapse; font-size:.88rem; }
.pp-mini th, .pp-mini td{ border:1px solid var(--line); padding:5px 14px; text-align:left; }
.btn.danger{ color:var(--bad); border-color:var(--bad); }
/* one-page report */
#pyqPrintArea .pp1{ line-height:1.3; }
#pyqPrintArea .pp1 h1{ font-size:1.7em; margin:0 0 2pt; }
#pyqPrintArea .pp1 h2{ font-size:1.15em; margin:.7em 0 .2em; }
#pyqPrintArea .pp1 p{ margin:.2em 0; }
#pyqPrintArea .pp1-t{ border-collapse:collapse; width:100%; }
#pyqPrintArea .pp1-t th, #pyqPrintArea .pp1-t td{ border:1px solid #999; padding:1px 4px; text-align:left; vertical-align:top; }
#pyqPrintArea .pp1-t td:first-child, #pyqPrintArea .pp1-t td:nth-child(3){ white-space:nowrap; }
#pyqPrintArea .pp1-chips span{ display:inline-block; border:1px solid #999; border-radius:3pt; padding:0 3pt; margin:1pt; }

/* ===== Premium · Admin panel · My Notes ===== */
.nocopy, .nocopy *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.nocopy a{ -webkit-user-select:auto; user-select:auto; }
.prem-list{ margin:6px 0 0 18px; padding:0; } .prem-list li{ margin:6px 0; }
.prem-ok{ border-color:var(--good) !important; box-shadow:none; }
.prem-plans{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px; }
.prem-plan{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface-2); padding:9px 14px; border-radius:12px; cursor:pointer; }
.prem-plan.active{ border-color:var(--accent); box-shadow:var(--glow); }
.prem-plan input{ accent-color:var(--accent); }
.prem-pay{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.prem-qr{ width:200px; max-width:100%; height:auto; border-radius:12px; background:#fff; padding:8px; }
.adm-ev{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.adm-ev.unread{ border-left:3px solid var(--accent); padding-left:10px; }
.adm-ev-body{ flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.adm-ic{ font-size:1.2rem; }
.adm-pay{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 0; border-bottom:1px dashed var(--line); }
.adm-pay-main{ flex:1 1 240px; min-width:0; overflow-wrap:anywhere; }
.adm-feat{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px dashed var(--line); }
.adm-prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
#admRoot .speak-modes{ flex-wrap:wrap; }
.mn-note{ border-left:4px solid var(--line); }
.mn-note.mn-c-yellow{ border-left-color:var(--hl); } .mn-note.mn-c-green{ border-left-color:var(--good); }
.mn-note.mn-c-pink{ border-left-color:var(--bad); } .mn-note.mn-c-blue{ border-left-color:var(--accent-2); }
.mn-head{ margin-bottom:6px; } .mn-body{ overflow-wrap:anywhere; }
.mn-marks{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.mn-dots{ display:inline-flex; gap:6px; align-items:center; }
.mn-dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; background:var(--surface-2); }
.mn-dot.on{ outline:2px solid var(--ink); outline-offset:2px; }
.mn-dot.mn-c-yellow{ background:var(--hl); } .mn-dot.mn-c-green{ background:var(--good); } .mn-dot.mn-c-pink{ background:var(--bad); } .mn-dot.mn-c-blue{ background:var(--accent-2); }
@media (max-width:560px){ .prem-qr{ width:170px; } }
.adm-prices > .field{ min-width:0; } .adm-prices input{ width:100%; min-width:0; box-sizing:border-box; }
@media (max-width:560px){ .adm-prices{ grid-template-columns:1fr 1fr; } }

/* ===== About tab ===== */
.about-points{ margin:8px 0 0 18px; padding:0; } .about-points li{ margin:7px 0; color:var(--ink-soft); }
#aboutRoot .about-card h2{ margin-top:0; }
#aboutRoot .price-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }

/* ===== My Notes: reader + notebook side by side ===== */
.mn-split{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start; }
.mn-reader, .mn-notes{ min-width:0; }
.mn-reader{ position:sticky; top:8px; }
.rd-card{ padding:14px; }
.rd-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rd-view{ max-height:calc(100vh - 250px); min-height:260px; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:8px; -webkit-user-select:none; user-select:none; }
.rd-page{ position:relative; margin:0 0 10px; line-height:0; }
.rd-page img{ width:100%; height:auto; display:block; border-radius:6px; background:#fff; -webkit-user-drag:none; pointer-events:none; }
.rd-hls{ position:absolute; inset:0; }
.rd-rect{ position:absolute; border-radius:3px; mix-blend-mode:multiply; }
.rd-view.tool-hl .rd-page{ cursor:crosshair; touch-action:none; }
.rd-view.tool-erase .rd-rect{ cursor:pointer; outline:1px dashed var(--bad); }
.rd-para{ padding:4px 6px; border-radius:6px; margin:0 0 8px; line-height:1.55; }
.rd-view:not(.tool-read) .rd-para{ cursor:pointer; }
.rd-para.hl-yellow{ background:rgb(var(--hl-rgb) / .3); } .rd-para.hl-green{ background:rgb(var(--good-rgb) / .25); }
.rd-para.hl-pink{ background:rgb(var(--bad-rgb) / .28); } .rd-para.hl-blue{ background:rgb(var(--accent-rgb) / .25); }
@media (max-width:900px){
  .mn-split{ grid-template-columns:1fr; }
  .mn-reader{ position:sticky; top:0; z-index:6; background:var(--paper); padding-bottom:8px; }
  .rd-view{ max-height:40vh; min-height:180px; }
}
@media (max-width:900px){
  .rd-card{ padding:10px; }
  .rd-card .quiz-head{ margin-bottom:6px !important; }
  .rd-card .quiz-head h3{ display:none; }
  .rd-card .quiz-head > div{ width:100%; display:flex; gap:8px; flex-wrap:nowrap !important; }
  .rd-card select{ flex:1 1 0; min-width:0; }
  .rd-tools{ gap:6px; } .rd-tools .btn{ padding:6px 10px; font-size:.8rem; }
  #rdBar > p{ display:none; }
  .rd-view{ max-height:32vh; min-height:150px; }
}

/* ===== UI polish: landing hero, grouped sticky navigation, accessibility (no logic changes) ===== */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; }
.skip-link:focus{ top:10px; }
#main:focus{ outline:none; }

/* header: calmer, tagline is one line now */
.topbar-inner{ padding:18px 20px 14px; align-items:center; }
.brand p{ font-size:.9rem; max-width:none; }

/* navigation: head menu with drop-downs */
.navbar{ position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid var(--line); }
.menubar{ max-width:960px; margin:0 auto; padding:8px 20px; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.menu-group{ position:relative; }
.menu-trigger{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--tab-line); background:var(--surface); color:var(--ink); padding:9px 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:.94rem; font-weight:700; letter-spacing:.01em; transition:border-color .15s,color .15s,box-shadow .15s,transform .15s; }
.menu-trigger .mi, .solo-tab .mi{ color:var(--accent); flex:0 0 auto; transition:transform .25s; }
.menu-trigger .chev{ opacity:.7; transition:transform .2s; flex:0 0 auto; }
.menu-trigger:hover{ border-color:var(--accent); color:var(--accent-ink); box-shadow:none; }
.menu-trigger:hover .mi, .solo-tab:hover .mi{ transform:scale(1.12) rotate(-6deg); }
.menu-group.open .menu-trigger{ border-color:var(--accent); color:var(--ink); box-shadow:var(--glow); }
.menu-group.open .chev{ transform:rotate(180deg); }
.menu-group.has-active .menu-trigger{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow); }
.menu-group.has-active .menu-trigger .mi, .menu-group.has-active .solo-tab .mi{ color:var(--on-accent); }
.mt-cur{ display:none; font-weight:600; font-size:.8rem; opacity:.85; padding-left:8px; border-left:1px solid currentColor; line-height:1.1; }
@media (min-width:900px){ .menu-group.has-active .mt-cur:not(:empty){ display:inline; } }
.menu-panel{ position:absolute; top:calc(100% + 10px); left:0; min-width:290px; z-index:40; padding:8px; display:none; flex-direction:column; gap:2px; background:var(--surface); border:1px solid rgb(var(--edge-rgb) / .38); border-radius:16px; box-shadow:none; }
.menu-panel::after{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.menu-panel::before{ content:""; position:absolute; top:-6px; left:26px; width:11px; height:11px; background:var(--surface); border-left:1px solid rgb(var(--edge-rgb) / .38); border-top:1px solid rgb(var(--edge-rgb) / .38); transform:rotate(45deg); }
.menu-group.open .menu-panel{ display:flex; animation:menuIn .18s ease-out; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.menu-panel .tab{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; border:1px solid transparent; background:transparent; border-radius:11px; padding:10px 14px 10px 28px; position:relative; white-space:normal; color:var(--ink); font-size:.98rem; font-weight:700; box-shadow:none; transition:background .12s,border-color .12s; }
.menu-panel .tab::after{ content:attr(data-desc); font-size:.78rem; font-weight:500; color:var(--muted); line-height:1.3; }
.menu-panel .tab::before{ content:""; position:absolute; left:12px; top:16px; width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .15s, box-shadow .15s; }
.menu-panel .tab:hover, .menu-panel .tab:focus-visible{ background:var(--accent-soft); border-color:rgb(var(--accent-rgb) / .35); color:var(--accent-ink); box-shadow:none; }
.menu-panel .tab:hover::before{ background:var(--accent); }
.menu-panel .tab[aria-selected="true"]{ background:var(--accent-soft); border-color:rgb(var(--accent-rgb) / .45); color:var(--ink); box-shadow:none; }
.menu-panel .tab[aria-selected="true"]::before{ background:var(--accent); box-shadow:none; }
.menu-panel .tab[aria-selected="true"]::after{ color:var(--ink-soft); }
.menu-group:not(:has(.tab:not([style*="display: none"]))){ display:none; }
.menu-dot{ position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%; background:var(--accent-3); box-shadow:0 0 8px var(--accent-3); }

@media (max-width:640px){
  .menubar{ padding:8px 12px; gap:6px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .menu-group{ position:static; }
  .menu-trigger{ width:100%; min-width:0; justify-content:center; padding:9px 4px; gap:5px; font-size:.84rem; }
  .menu-trigger .mi{ width:16px; height:16px; }
  .menu-trigger .chev{ width:11px; height:11px; }
  .menu-panel{ left:12px; right:12px; top:calc(100% + 6px); min-width:0; }
  .menu-panel::before{ display:none; }
}
@media (max-width:440px){ .menu-trigger .mi{ display:none; } }

/* landing hero (top of the Error Book) */
.hero{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 24px; margin-bottom:22px; box-shadow:var(--shadow); }
.hero h2{ font-size:clamp(1.6rem, 4.6vw, 2.3rem); line-height:1.12; margin:0 0 .35em; }
.hero p{ margin:0 0 16px; color:var(--ink-soft); font-size:1.05rem; max-width:60ch; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-cta .btn{ padding:12px 22px; font-size:1rem; }

/* readability */
body{ line-height:1.6; }
.small{ font-size:.9rem; }
.btn.small{ font-size:.84rem; }
.section-head{ margin-bottom:20px; }
input[type=text], input[type=number], select, textarea{ border-color:var(--line); }

/* accessibility */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.tab:focus-visible, .btn:focus-visible{ outline-offset:3px; }
@media (pointer:coarse){ .tab, .btn, .signin-btn{ min-height:44px; } .btn.small{ min-height:40px; } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

@media (max-width:640px){
  .hero{ padding:20px 18px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .topbar-inner{ padding:14px 16px 10px; }
}

/* ===== Phase 2/3: personal review, progress ===== */
.rv-card{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rv-due{border-color:var(--accent,var(--accent-2))}
.rv-session .rv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tag.st-learn{background:rgb(var(--accent3-rgb) / .14);color:var(--warn);border-color:rgb(var(--accent3-rgb) / .4)}
.tag.st-ok{background:rgb(var(--good-rgb) / .14);color:var(--good);border-color:rgb(var(--good-rgb) / .4)}
.tag.st-type{background:rgb(var(--accent2-rgb) / .14);color:var(--accent-2);border-color:rgb(var(--accent2-rgb) / .4)}
.st-actions{margin-top:8px;align-items:center;flex-wrap:wrap}
.mt-sel{background:transparent;color:inherit;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:.85rem;min-height:36px}
.filters{flex-wrap:wrap}
.filters select{max-width:100%}
.pg-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0}
.pg-tile{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px}
.pg-tile b{font-size:1.6rem;line-height:1.1}
.pg-tile span{font-size:.85rem;opacity:.8}
.pg-tile.hot{border-color:var(--warn)}
.pg-strip{display:flex;gap:6px;flex-wrap:wrap}
.pg-day{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:transparent}
.pg-day.on{background:var(--good);border-color:var(--good)}
.pg-row{display:grid;grid-template-columns:minmax(90px,200px) 1fr auto;gap:10px;align-items:center;margin:8px 0}
.pg-lbl{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.pg-bar i{display:block;height:100%;background:var(--accent-2);border-radius:6px}
.pg-bar i.low{background:var(--bad)}.pg-bar i.mid{background:var(--warn)}.pg-bar i.high{background:var(--good)}
.pg-trend{width:100%;max-width:420px;height:auto;color:var(--accent-2);display:block}
@media (max-width:640px){.pg-row{grid-template-columns:1fr auto}.pg-row .pg-bar{grid-column:1/-1;order:3}.rv-card .btn{width:100%}}

/* ===== Phase 4/5 ===== */
.exam-pill{display:inline-block;margin:0 0 10px;padding:6px 12px;border-radius:999px;border:1px solid rgb(var(--accent3-rgb) / .45);background:rgb(var(--accent3-rgb) / .1);color:var(--warn);font-size:.9rem;font-weight:600}
.rv-sets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.tag.unit{background:rgb(var(--accent2-rgb) / .12);color:var(--accent-2);border-color:rgb(var(--accent2-rgb) / .4)}
.tag.official{background:rgb(var(--good-rgb) / .14);color:var(--good);border-color:rgb(var(--good-rgb) / .4);font-size:.7rem;vertical-align:middle}
.badge-src{background:rgb(var(--accent2-rgb) / .18);color:var(--accent-2)}
.pp-mini.wk td:not(:first-child),.pp-mini.wk th:not(:first-child){text-align:right}

/* ===== Phase 6: Exam Traps ===== */
.trap-count{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;color:var(--warn);font-weight:600}
.trap-count b{font-size:1.9rem;line-height:1}
.trap-card.is-hidden{opacity:.6;border-style:dashed}
.trap-card.pulse{animation:trapPulse 1.6s ease 1}
@keyframes trapPulse{0%{box-shadow:0 0 0 0 rgb(var(--accent3-rgb) / .7)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.trap-card.pulse{animation:none}}
.trap-tally{margin-top:10px}
button.tag.trap-badge{cursor:pointer;background:rgb(var(--accent3-rgb) / .14);color:var(--warn);border:1px solid rgb(var(--accent3-rgb) / .45);font:inherit;font-size:.72rem;min-height:0}

.pp-expl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.pp-expl{border-left:3px solid var(--accent-2);padding-left:10px;margin-top:6px}
@media (max-width:640px){.pp-expl-bar .btn{width:100%}}

/* ---- Study Timer ---- */
.tm-label{ display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 6px; }
.tm-presets{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tm-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tm-fields .field{ margin-bottom:6px; }
.tm-fields input{ width:100%; font-size:1.15rem; font-weight:700; }
.tm-check{ display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ink-soft); cursor:pointer; margin:4px 0; }
.tm-check input{ width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; }
.tm-plan{ margin:12px 0 14px; padding:12px 14px; border:1px solid rgb(var(--edge-rgb) / .3); border-radius:12px; background:rgb(var(--accent2-rgb) / .10); color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
.tm-opts{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; margin-bottom:16px; }
.tm-run{ text-align:center; padding:22px 20px 20px; }
.tm-phase{ font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--accent-ink); margin:0 0 10px; }
.tm-ring{ position:relative; width:min(300px,78vw); aspect-ratio:1; margin:0 auto 14px; }
.tm-ring svg{ width:100%; height:100%; display:block; overflow:visible; }
.tm-track{ fill:none; stroke:var(--line); stroke-width:10; }
.tm-arc{ fill:none; stroke:var(--accent); stroke-width:10; stroke-linecap:round; stroke-dasharray:565.5; stroke-dashoffset:565.5; transition:stroke-dashoffset .45s linear;  }
.tm-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.tm-time{ font-size:clamp(2.3rem,10vw,3.4rem); font-weight:600; letter-spacing:.02em; line-height:1; }
.tm-sub{ color:var(--muted); font-size:.9rem; }
.tm-run[data-phase="break"] .tm-arc{ stroke:var(--good);  }
.tm-run[data-phase="break"] .tm-phase{ color:var(--good); }
.tm-run[data-phase="alert"] .tm-arc{ stroke:var(--accent-3);  animation:tmPulse 1.2s ease-in-out infinite; }
.tm-run[data-phase="alert"] .tm-phase{ color:var(--accent-3); }
@keyframes tmPulse{ 50%{ opacity:.45; } }
.tm-total{ max-width:420px; margin:0 auto 14px; }
.tm-bar{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.tm-bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .5s linear; }
.tm-total p{ margin:6px 0 0; }
.tm-alert, .tm-warn{ max-width:460px; margin:0 auto 14px; padding:16px; border-radius:14px; border:1px solid rgb(var(--accent3-rgb) / .5); background:rgb(var(--accent3-rgb) / .10); }
.tm-warn{ border-color:rgb(var(--accent3-rgb) / .55); background:rgb(var(--accent3-rgb) / .10); }
.tm-alert-msg{ font-size:1.15rem; font-weight:700; margin:0 0 12px; }
.tm-warn p{ margin:0 0 12px; }
.tm-alert-btns, .tm-controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
@media (max-width:520px){ .tm-fields{ gap:8px; } .tm-fields input{ padding-left:8px; padding-right:8px; } .tm-alert-btns .btn{ flex:1 1 100%; } }

/* standalone menu buttons (Timer, Features) */
.solo-tab{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; font-size:.94rem; font-weight:700; letter-spacing:.01em; background:var(--surface); }
.solo-tab[aria-selected="true"]{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow); }
.solo-tab[aria-selected="true"] .mi{ color:var(--on-accent); }
@media (max-width:640px){
  .menubar{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; }
  .solo-tab{ width:100%; min-width:0; justify-content:center; padding:9px 4px; gap:5px; font-size:.84rem; }
  .solo-tab .mi{ width:16px; height:16px; }
}
@media (max-width:440px){ .menu-trigger .mi{ display:inline; } .menu-trigger .mt-label, .solo-tab .mt-label{ font-size:.82rem; } }

/* Features page */
.ft-filter{ display:flex; gap:8px; margin:0 0 14px; }
.ft-filter .btn.active{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.ft-count{ margin:0 0 6px; }
.ft-group{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin:22px 0 10px; }
.ft-card{ padding:16px 18px; }
.ft-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-bottom:8px; }
.ft-head h4{ font-size:1.08rem; margin:0; }
.ft-card p{ margin:0 0 8px; font-size:.95rem; color:var(--ink-soft); line-height:1.55; }
.ft-k{ display:block; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:2px; }
.ft-badge{ font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid var(--line); }
.ft-badge.free{ color:var(--good); border-color:rgb(var(--good-rgb) / .5); background:var(--good-soft); }
.ft-badge.paid{ color:var(--warn); border-color:rgb(var(--accent3-rgb) / .55); background:rgb(var(--accent3-rgb) / .10); }
.ft-badge.paid.open{ color:var(--good); border-color:rgb(var(--good-rgb) / .5); background:var(--good-soft); }
.ft-badge.sign{ color:var(--muted); }
.ft-card .btn{ margin-top:4px; }

/* ===== Welcome / sign-in screen ===== */
.welcome{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px 20px; overflow-y:auto;
  background:var(--paper); }
.welcome[hidden]{ display:none; }
#wlCanvas{ display:none; }
.wl-inner{ position:relative; width:100%; max-width:640px; text-align:center; padding:34px 26px 26px; border:1px solid rgb(var(--edge-rgb) / .35); border-radius:22px;
  background:var(--surface); box-shadow:var(--shadow); }
.wl-brand{ font-family:"Lora",Georgia,serif; font-weight:700; font-size:2.6rem; letter-spacing:-.02em; line-height:1; margin-bottom:14px; }
.wl-brand em{ font-style:italic; color:var(--accent); }
.wl-inner h2{ font-size:1.9rem; margin:0 0 10px; }
.wl-sub{ color:var(--ink-soft); font-size:1.08rem; margin:0 auto 18px; max-width:46ch; }
.wl-quote{ margin:0 auto 20px; min-height:4.2em; display:flex; align-items:center; justify-content:center; font-family:"Lora",Georgia,serif; font-style:italic; font-size:1.25rem; line-height:1.4; color:var(--accent-ink); max-width:38ch; transition:opacity .45s ease; }
.wl-quote.fade{ opacity:0; }
.wl-google{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; max-width:380px; margin:0 auto; min-height:58px; border-radius:14px; background:#fff; color:#1f1f1f; border:1px solid var(--line); font-weight:700; font-size:1.15rem; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .2s; }
.wl-google:hover{ transform:translateY(-1px); box-shadow:none; }
.wl-google:focus-visible, .wl-skip:focus-visible{ outline:3px solid var(--accent-3); outline-offset:3px; }
.wl-skip{ display:block; margin:14px auto 0; background:none; border:0; color:var(--ink-soft); font-size:1rem; text-decoration:underline; cursor:pointer; padding:10px 14px; min-height:44px; }
.wl-skip:hover{ color:var(--accent-ink); }
.wl-fine{ margin:8px 0 0; color:var(--muted); font-size:.85rem; }
.wl-inapp{ display:flex; flex-direction:column; gap:6px; align-items:center; margin:0 auto 16px; padding:12px 14px; max-width:440px; border:1px solid var(--accent-3); border-radius:12px; background:rgb(var(--accent3-rgb) / .12); font-size:.95rem; }
.wl-inapp[hidden]{ display:none; }
@media (max-width:520px){ .wl-brand{ font-size:2.2rem; } .wl-inner{ padding:26px 16px 20px; } .wl-inner h2{ font-size:1.55rem; } .wl-quote{ font-size:1.1rem; } }
@media (prefers-reduced-motion:reduce){ .wl-quote{ transition:none; } }
.pp-ans-chip{ margin-left:auto; font-size:.78rem; font-weight:700; padding:2px 10px; border-radius:999px; border:1px solid rgb(var(--good-rgb) / .5); color:var(--good); background:var(--good-soft); }
.pp-two{ display:inline; }
.pyq-tags .muted{ flex:1 1 100%; margin-bottom:2px; }

/* ===== Back button ===== */
.backbar{ position:sticky; top:var(--nav-h,54px); z-index:20; background:var(--paper); }
.backbar[hidden]{ display:none; }
.backbar-inner{ max-width:960px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; gap:12px; }
.back-btn{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 16px 6px 10px; border-radius:999px; border:1px solid rgb(var(--accent-rgb) / .55); background:var(--surface); color:var(--accent-ink); font-weight:700; font-size:.95rem; cursor:pointer; box-shadow:none; }
.back-btn:hover{ box-shadow:none; }
.back-btn:focus-visible{ outline:3px solid var(--accent-3); outline-offset:2px; }

/* ===== Announcement banner + admin user stats ===== */
.site-banner{ display:flex; align-items:center; justify-content:center; gap:12px; padding:9px 44px 9px 16px; text-align:center; font-weight:600; font-size:.95rem; color:var(--on-accent); background:var(--accent); position:relative; }
.site-banner[hidden]{ display:none; }
.sb-x{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:0; background:rgba(4,5,15,.18); color:var(--on-accent); font-size:1rem; cursor:pointer; }
.adm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:10px 0 6px; }
.adm-stats > div{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--surface); display:flex; flex-direction:column; }
.adm-stats b{ font-size:1.5rem; line-height:1.1; }
.adm-stats span{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.adm-rn input[type=text]{ width:100%; }

/* ===== Error Book outcome spaces ===== */
.oc-bar{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.oc-chip{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:600; cursor:pointer; font-size:.92rem; }
.oc-chip b{ font-family:"IBM Plex Mono",monospace; font-size:.85rem; color:var(--ink); }
.oc-chip.on{ border-color:var(--accent); color:var(--accent-ink); box-shadow:none; background:var(--accent-soft); }
.oc-chip:focus-visible{ outline:3px solid var(--accent-3); outline-offset:2px; }
.oc-sec{ margin:0 0 26px; padding:14px 14px 4px; border:1px solid var(--line); border-left-width:4px; border-radius:var(--radius); background:rgb(var(--paper-rgb) / .45); }
.oc-sec-wrong{ border-left-color:var(--bad); } .oc-sec-unknown{ border-left-color:var(--accent-2); } .oc-sec-guess{ border-left-color:var(--warn); } .oc-sec-skipped{ border-left-color:var(--muted); }
.oc-head{ display:flex; align-items:center; gap:8px; font-size:1.15rem; margin:0 0 2px; }
.oc-ic{ display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; background:var(--surface-2); font-size:.9rem; }
.oc-n{ margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.9rem; color:var(--muted); }
.oc-hint{ margin:0 0 12px; }
.oc-empty{ padding:6px 0 12px; }
.tag.oc{ font-weight:700; }
.tag.oc-wrong{ color:var(--bad); border-color:rgb(var(--bad-rgb) / .5); } .tag.oc-unknown{ color:var(--accent-2); border-color:rgb(var(--accent2-rgb) / .6); } .tag.oc-guess{ color:var(--warn); border-color:rgb(var(--accent3-rgb) / .55); } .tag.oc-skipped{ color:var(--muted); }
.oc-chip.oc-wrong.on{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft); } .oc-chip.oc-guess.on{ border-color:var(--warn); color:var(--warn); background:rgb(var(--accent3-rgb) / .12); } .oc-chip.oc-unknown.on{ border-color:var(--accent-2); color:var(--accent-2); background:rgb(var(--accent2-rgb) / .14); }
.pill.skipped .val{ color:var(--muted); }

/* ===== Offer ===== */
.offer-strip{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; padding:8px 44px 8px 14px; background:rgb(var(--hl-rgb) / .35); border-bottom:1px solid var(--line); position:relative; font-size:.95rem; text-align:center; }
.offer-strip[hidden]{ display:none; }
.os-tag{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; padding:3px 10px; border-radius:999px; background:var(--accent-3); color:#fff; }
.os-text s{ color:var(--muted); } .os-text b{ color:var(--accent-ink); font-size:1.05rem; }
.os-x{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:var(--ink); cursor:pointer; }
.offer-card{ position:relative; border-color:rgb(var(--accent3-rgb) / .55); background:var(--surface); box-shadow:none; }
.offer-badge{ display:inline-block; font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:.75rem; padding:4px 12px; border-radius:999px; background:var(--accent-3); color:#fff; margin-bottom:8px; }
.offer-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:4px 0 6px; }
.offer-price b{ font-size:2.6rem; line-height:1; color:var(--accent-ink);  }
.offer-ref{ color:var(--muted); font-size:1.15rem; } .offer-price .offer-ref{ font-size:1.4rem; }
.offer-off{ font-weight:800; color:var(--on-accent); background:var(--good); border-radius:8px; padding:2px 10px; font-size:.9rem; }
.offer-line{ margin:0 0 6px; }
.prem-plan .offer-ref{ font-size:.95rem; }
.adm-offer{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; padding:12px; margin:10px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface); }

.pol{ border-top:1px solid var(--line); padding:10px 0; } .pol summary{ cursor:pointer; font-weight:700; min-height:32px; display:flex; align-items:center; } .pol[open] summary{ color:var(--accent-ink); }

.filters[hidden]{ display:none; }
.pill.skipped{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.pill.skipped .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
@media (max-width:640px){ .offer-strip .btn{ min-height:34px; padding:4px 14px; } .offer-strip{ padding-top:6px; padding-bottom:6px; } }

.prem-online{ margin:6px 0 14px; } .prem-pay-btn{ width:100%; max-width:420px; min-height:54px; font-size:1.1rem; }
.prem-manual{ margin-top:10px; border-top:1px solid var(--line); padding-top:10px; } .prem-manual summary{ cursor:pointer; color:var(--ink-soft); min-height:32px; display:flex; align-items:center; }

/* install as app */
.install-btn{ white-space:nowrap; }
.install-help{ position:fixed; inset:0; z-index:90; background:rgba(5,5,18,.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.install-help[hidden]{ display:none; }
.ih-card{ max-width:420px; width:100%; background:var(--panel, var(--surface)); border:1px solid rgb(var(--accent2-rgb) / .5); border-radius:14px; padding:20px; box-shadow:none; }
.ih-card h3{ margin:0 0 8px; }
.ih-actions{ margin-top:14px; display:flex; justify-content:flex-end; }
.install-btn[hidden]{ display:none !important; }

/* admin visitors table */
.adm-table{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.adm-tr{ display:grid; grid-template-columns:1.3fr 1fr 1.4fr 1fr; gap:8px; padding:8px 12px; border-top:1px solid var(--line); font-size:.92rem; }
.adm-tr:first-child{ border-top:0; }
.adm-th{ background:var(--surface); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:520px){ .adm-tr{ grid-template-columns:1.1fr .8fr 1.2fr .8fr; gap:4px; padding:8px; font-size:.82rem; } }

/* PYQ library */
.pl-table{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.pl-row{ display:grid; grid-template-columns:minmax(160px,2fr) repeat(4,minmax(90px,1fr)) auto; gap:8px; align-items:center; padding:8px; border:1px solid var(--line,#2a2a55); border-radius:10px; }
.pl-row.pl-bad{ border-color:var(--bad); }
.pl-file{ display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.pl-groups{ display:flex; flex-direction:column; gap:8px; }
.pl-g{ padding:8px 10px; border:1px solid var(--line,#2a2a55); border-radius:10px; }
.pl-g.pl-bad{ border-color:var(--bad); } .pl-g.pl-warn{ border-color:var(--warn); } .pl-g.pl-ok{ border-color:var(--good); }
.pl-item{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line,#2a2a55); }
.pl-item:first-of-type{ border-top:0; }
.pl-tag{ font-size:.72rem; padding:2px 8px; border-radius:999px; border:1px solid var(--line,#2a2a55); margin-left:6px; }
.pl-paid{ border-color:var(--warn); } .pl-free{ border-color:var(--good); }
@media (max-width:720px){ .pl-row{ grid-template-columns:1fr 1fr; } .pl-file{ grid-column:1 / -1; } }

/* answer sheets (admin preview + learner OMR-style sheet) */
.as-row{ grid-template-columns:minmax(160px,2fr) repeat(4,minmax(90px,1fr)) auto; }
.as-prev{ grid-column:1 / -1; margin-top:4px; }
.as-chips{ display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.as-chip{ display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border:1px solid var(--line,#2a2a55); border-radius:8px; font-size:.78rem; }
.as-chip i{ font-style:normal; opacity:.6; font-size:.7rem; }
.as-blank{ border-color:var(--bad); } .as-x{ border-color:var(--warn); }
.omr-bar{ position:sticky; top:0; z-index:5; display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 0; background:var(--card,var(--surface)); }
.omr-list{ display:flex; flex-direction:column; }
.omr-q{ display:flex; align-items:center; gap:10px; padding:6px 4px; border-top:1px solid var(--line,#2a2a55); flex-wrap:wrap; }
.omr-n{ min-width:2.2em; text-align:right; font-weight:700; }
.omr-opts{ display:flex; gap:8px; }
.omr-b{ width:38px; height:38px; border-radius:50%; border:2px solid var(--line,var(--line)); background:transparent; color:inherit; font-weight:700; cursor:pointer; }
.omr-b.on{ background:var(--accent,var(--accent-2)); border-color:var(--accent,var(--accent-2)); color:#fff; }
.omr-b.omr-key{ border-color:var(--good); box-shadow:0 0 0 2px var(--good)55; }
.omr-b:disabled{ cursor:default; }
.omr-correct{ background:rgba(61,220,151,.08); } .omr-wrong{ background:rgba(255,107,138,.10); } .omr-dropped{ background:rgb(var(--accent3-rgb) / .08); }
@media (max-width:720px){ .as-row{ grid-template-columns:1fr 1fr; } }
.as-chip.as-multi{ border-color:var(--accent,var(--accent-2)); font-weight:600; }

/* ---- Study Timer: modes, stopwatch, big Focus screen, Do Not Disturb guide ---- */
.tm-modes{ display:flex; gap:6px; padding:4px; margin:0 0 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.tm-mode{ flex:1 1 0; border:0; background:transparent; color:var(--ink-soft); font:inherit; font-weight:700; font-size:.92rem; padding:10px 8px; border-radius:9px; cursor:pointer; }
.tm-mode.on{ background:var(--accent); color:var(--on-accent); }
.tm-watchnote{ margin:0 0 14px; padding:12px 14px; border:1px solid rgb(var(--edge-rgb) / .3); border-radius:12px; background:rgb(var(--accent2-rgb) / .10); color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
.tm-topbar{ display:flex; justify-content:flex-end; margin:-6px 0 6px; }
.tm-hint{ display:none; margin:14px 0 0; color:var(--muted); font-size:.85rem; }
.tm-nudge, .tm-away{ max-width:560px; margin:0 auto 14px; padding:14px 16px; border-radius:14px; border:1px solid rgb(var(--accent3-rgb) / .55); background:rgb(var(--accent3-rgb) / .10); color:var(--ink); }
.tm-nudge p{ margin:0 0 10px; }
.tm-away{ border-color:rgb(var(--accent-rgb) / .4); background:var(--accent-soft); font-size:.92rem; }

.sw-face{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:6px 0 22px; }
.sw-time{ font-size:clamp(3.2rem,17vw,6rem); font-weight:600; line-height:1; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.sw-tenth{ font-size:.42em; color:var(--accent-ink); margin-left:2px; }
.sw-main{ min-width:130px; }
.sw-laps{ list-style:none; margin:16px auto 0; padding:0; max-width:420px; text-align:left; max-height:220px; overflow:auto; }
.sw-laps li{ display:grid; grid-template-columns:1fr auto auto; gap:14px; padding:8px 4px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; font-size:.95rem; }
.sw-laps li span:nth-child(2){ color:var(--accent-ink); }
.sw-laps li span:nth-child(3){ color:var(--muted); }
.sw-laps:empty{ display:none; }

/* Focus screen: the whole stage goes full screen on a dark canvas; the Do Not Disturb guide sits below the clock */
.tm-stage.focus{ position:fixed; inset:0; z-index:1000; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:#03040c; padding:12px 16px calc(28px + env(safe-area-inset-bottom)); padding-top:calc(54px + env(safe-area-inset-top)); }
.tm-stage.focus .tm-run{ min-height:82vh; min-height:82dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; border:0; box-shadow:none; background:transparent; }
.tm-stage.focus .tm-topbar{ position:fixed; top:calc(8px + env(safe-area-inset-top)); right:10px; z-index:2; margin:0; }
.tm-stage.focus .tm-topbar .btn{ background:rgb(var(--paper-rgb) / .85); }
.tm-stage.focus .tm-ring{ width:min(88vw,62vh,560px); margin-bottom:18px; }
.tm-stage.focus .tm-time{ font-size:clamp(3.6rem,19vw,8.5rem); }
.tm-stage.focus .tm-sub{ font-size:1.1rem; }
.tm-stage.focus .tm-phase{ font-size:1rem; margin-bottom:14px; }
.tm-stage.focus .sw-time{ font-size:clamp(4rem,22vw,10rem); }
.tm-stage.focus .tm-total{ width:min(88vw,520px); }
.tm-stage.focus .tm-controls .btn{ min-width:120px; padding:14px 22px; font-size:1.02rem; }
.tm-stage.focus .tm-hint{ display:block; }
.tm-stage.focus .tm-dnd{ max-width:640px; margin:18px auto 0; }
@media (orientation:landscape) and (max-height:520px){
  .tm-stage.focus .tm-ring{ width:min(52vh,300px); }
  .tm-stage.focus .tm-time{ font-size:clamp(2.6rem,12vh,5rem); }
  .tm-stage.focus .sw-time{ font-size:clamp(3rem,26vh,6rem); }
}

.tm-dnd{ margin-top:14px; }
.tm-dnd > summary{ cursor:pointer; font-weight:800; font-size:1.05rem; }
.tm-dnd h3{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin:18px 0 8px; }
.tm-dnd-honest{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:rgb(var(--accent3-rgb) / .10); border:1px solid rgb(var(--accent3-rgb) / .45); font-size:.92rem; line-height:1.5; }
.tm-os{ border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:0 0 10px; background:var(--paper); }
.tm-os > summary{ cursor:pointer; font-weight:700; }
.tm-yours{ color:var(--good); font-weight:600; font-size:.85rem; }
.tm-os ol, .tm-dnd ul{ margin:10px 0; padding-left:20px; line-height:1.55; font-size:.93rem; color:var(--ink-soft); }
.tm-os li, .tm-dnd li{ margin-bottom:8px; }
.tm-dnd-btns{ justify-content:flex-start; margin:8px 0; }
.tm-dnd-btns a.btn{ text-decoration:none; display:inline-flex; align-items:center; }

/* ---- Dark neon glow for the stopwatch and the Focus screen ---- */
.tm-watch-only{ margin:0 0 14px; }
.tm-run .tm-time, .tm-sw .sw-time{ color:var(--ink);  }
.tm-sw .sw-tenth{ color:var(--accent-ink);  }
.tm-phase{  }
.tm-track{ stroke:rgb(var(--edge-rgb) / .22); }
.tm-run[data-phase="break"] .tm-time, .tm-sw[data-phase="break"] .sw-time{ color:var(--good);  }
.tm-run[data-phase="alert"] .tm-time, .tm-sw[data-phase="alert"] .sw-time{ color:var(--warn);  animation:tmGlow 1.3s ease-in-out infinite; }
.tm-sw[data-phase="break"] .tm-phase{ color:var(--good); }
.tm-sw[data-phase="alert"] .tm-phase{ color:var(--accent-3); }
@keyframes tmGlow{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }
.tm-bar span{ box-shadow:none; }
.tm-sw .btn.accent, .tm-run .btn.accent{ box-shadow:none; }
.tm-sw .btn.ghost, .tm-run .btn.ghost{ border-color:rgb(var(--accent-rgb) / .45); box-shadow:none; }
.tm-alert{ box-shadow:none; }
.tm-warn{ box-shadow:none; }
.sw-laps li span:nth-child(2){  }
.tm-stage.focus{ background:var(--paper); }
.tm-stage.focus .tm-run[data-phase="break"], .tm-stage.focus .tm-sw[data-phase="break"]{ background:rgb(var(--good-rgb) / .08); }
.tm-stage.focus .tm-run[data-phase="alert"], .tm-stage.focus .tm-sw[data-phase="alert"]{ background:rgb(var(--accent3-rgb) / .12); }
.tm-stage.focus .tm-dnd, .tm-stage.focus .tm-nudge{ box-shadow:none; }
@media (prefers-reduced-motion:reduce){ .tm-run[data-phase="alert"] .tm-time, .tm-sw[data-phase="alert"] .sw-time{ animation:none; } }

/* ---- Pause / save / resume a paper attempt ---- */
.pp-tools{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 10px; }
.pp-paused{ text-align:center; padding:26px 18px; border-color:rgb(var(--accent-rgb) / .45); box-shadow:none; }
.pp-paused .card-actions{ justify-content:center; }
.pp-resume{ border-color:rgb(var(--accent-rgb) / .45); box-shadow:none; }
.pp-resume-row{ display:flex; gap:10px 14px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line); }
.pp-resume-row:first-of-type{ border-top:0; }
.pp-note{ border-color:rgb(var(--good-rgb) / .45); }

/* ---- Admin: one grouped drop-down instead of a wall of buttons ---- */
.adm-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 14px; padding:12px 14px; border:1px solid rgb(var(--accent-rgb) / .35); border-radius:12px; background:var(--surface); box-shadow:none; }
.adm-nav-l{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.adm-sel{ flex:1 1 240px; width:auto; max-width:420px; font-size:1rem; font-weight:700; padding:10px 12px; border-color:rgb(var(--accent-rgb) / .5); }
.adm-sel optgroup{ font-style:normal; font-weight:800; color:var(--accent-ink); background:var(--surface); }
.adm-sel option{ font-weight:500; color:var(--ink); }
.adm-todo{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.adm-chip{ border:1px solid rgb(var(--accent3-rgb) / .55); background:rgb(var(--accent3-rgb) / .10); color:var(--ink); font:inherit; font-size:.82rem; padding:5px 11px; border-radius:99px; cursor:pointer; }
.adm-chip b{ color:var(--accent-3); }

/* coupon code box (Premium page) */
.prem-coupon { margin: 12px 0 4px; }
.coupon-row { display: flex; gap: 8px; margin-top: 4px; max-width: 360px; }
.coupon-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.coupon-ok { margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--accent-ink, var(--accent-2)); }

/* ---- Home, three-preset timer, notes list (round 2) ---- */
.home-hello{ margin:0 0 6px; font-weight:700; color:var(--accent-ink); }
.tm-big{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 14px; }
.tm-big .btn{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 8px; min-height:68px; }
.tm-big .btn b{ font-size:1.25rem; line-height:1.1; }
.tm-big .btn span{ font-size:.75rem; opacity:.8; }
.tm-big .btn.on{ background:var(--accent); color:var(--on-accent); border-color:transparent; box-shadow:none; }
.tm-startbtn{ width:100%; min-height:52px; font-size:1.1rem; margin-top:6px; }
.tm-tip{ margin-top:10px; }
.rd-list{ display:grid; gap:8px; margin-top:6px; }
.rd-item{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line, rgba(255,255,255,.14)); background:transparent; color:inherit; cursor:pointer; font:inherit; min-height:48px; }
.rd-item:hover, .rd-item:focus-visible{ border-color:var(--accent); }
.rd-title{ margin-left:8px; overflow-wrap:anywhere; }

/* resources, contribute, bookie */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--line, rgba(255,255,255,.16)); background:transparent; color:inherit; border-radius:999px; padding:8px 14px; min-height:40px; font:inherit; cursor:pointer; }
.chip.on{ background:var(--accent); color:var(--on-accent); border-color:transparent; }
.res-item{ display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line, rgba(255,255,255,.1)); }
.res-item:last-child{ border-bottom:0; }
.res-main{ min-width:0; overflow-wrap:anywhere; }
.res-badge{ display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:999px; background:rgb(var(--accent-rgb) / .14); color:var(--accent-ink); vertical-align:middle; }
.ct-over{ margin:10px 0; padding:12px; border-radius:12px; border:1px solid var(--accent); }
.ct-over p{ margin:0 0 10px; }
.bk-card{ border-color:var(--accent); }
.bk-list{ margin:0; padding-left:20px; display:grid; gap:4px; }
.bk-bal{ display:inline-block; margin-right:10px; }
.bk-big{ font-size:3rem; line-height:1; margin:4px 0 10px; color:var(--accent-ink);  }
.bk-pos{ color:var(--good, var(--good)); } .bk-neg{ color:var(--bad, var(--bad)); }
@media (max-width:520px){ .res-item{ flex-direction:column; align-items:stretch; } .res-item .btn{ width:100%; text-align:center; } }

/* Home > Today */
.today-card .today-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line,#e5e0d6);}
.today-card .today-row:first-of-type{border-top:0;}

/* eight menu buttons: tighter on mid-size screens, icons dropped on phones so labels fit */
@media (min-width:641px) and (max-width:1180px){ .menu-trigger, .solo-tab{ padding:8px 11px; font-size:.9rem; gap:6px; } }
@media (max-width:640px){ .menu-trigger .mi, .solo-tab .mi{ display:none; } .menu-trigger, .solo-tab{ font-size:.78rem; padding:9px 2px; } .menu-trigger .mt-label, .solo-tab .mt-label{ font-size:.78rem; } }

/* ===== PYQ Map: a winding road of the ten main topics ===== */
.mp-sum{ margin-bottom:12px; }
.mp-sum-row{ font-size:.95rem; margin-bottom:8px; }
.mp-bar{ height:8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
.mp-bar span{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .25s ease; }
.mp-note{ margin-bottom:12px; }
.mp-note h3{ font-size:1.05rem; margin:0 0 4px; }
.mp-note p{ margin:0 0 8px; }
.mp-road{ position:relative; max-width:560px; margin:8px auto 0; }
.mp-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mp-svg path{ fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mp-edge{ stroke:var(--line); stroke-width:40px; }
.mp-bed{ stroke:var(--surface-2); stroke-width:34px; }
.mp-dash{ stroke:var(--muted); stroke-width:2px; stroke-dasharray:3 9; opacity:.7; }
.mp-tedge{ stroke:var(--accent); stroke-width:40px; opacity:.45; }
.mp-tdash{ stroke:var(--ink); stroke-width:2px; stroke-dasharray:3 9; }
.mp-stop{ position:absolute; left:0; right:0; display:flex; align-items:center; gap:12px; background:none; border:0; padding:0 12px; cursor:pointer; color:var(--ink); font:inherit; text-align:left; border-radius:18px; }
.mp-stop.L{ padding-left:calc(24% - 28px); }
.mp-stop.R{ flex-direction:row-reverse; padding-right:calc(24% - 28px); text-align:right; }
.mp-stop:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.mp-node{ flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.2rem; background:var(--surface); border:3px solid var(--line); color:var(--ink); box-shadow:var(--shadow); transition:transform .15s ease; }
.mp-stop:hover .mp-node{ transform:scale(1.07); }
.mp-s-going .mp-node{ border-color:var(--accent); color:var(--accent-ink); }
.mp-s-done .mp-node{ background:var(--good); border-color:var(--good); color:var(--on-accent); }
.mp-s-soon{ opacity:.78; }
.mp-s-soon .mp-node{ border-style:dashed; color:var(--muted); }
.mp-s-soon .mp-lab small{ font-style:italic; }
.mp-lab{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px; }
.mp-lab b{ font-size:.95rem; line-height:1.25; }
.mp-lab small{ color:var(--muted); font-size:.76rem; }
.mp-lab .mp-prog{ color:var(--ink-soft); }
.mp-flag{ position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:10px; }
.mp-flagpole{ width:3px; height:44px; background:var(--muted); border-radius:2px; position:relative; }
.mp-flagpole::after{ content:""; position:absolute; left:3px; top:2px; width:22px; height:16px; background:var(--accent); clip-path:polygon(0 0,100% 25%,0 50%); }
.mp-fin.won .mp-flagpole::after{ background:var(--good); }
.mp-flagtxt{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 12px; }
.mp-flagtxt small{ color:var(--muted); font-size:.76rem; }
.mp-other{ display:block; width:100%; text-align:left; margin-top:12px; cursor:pointer; color:var(--ink); font:inherit; }
.mp-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.mp-chip{ border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:99px; padding:6px 14px; font:inherit; font-size:.85rem; cursor:pointer; }
.mp-chip.on{ border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft); }
.mp-qbar{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.mp-qbar .mp-bar{ flex:1; }
.mp-qt{ white-space:pre-wrap; font-size:1.05rem; line-height:1.5; margin:6px 0 12px; }
.mp-opts{ display:flex; flex-direction:column; gap:8px; }
.mp-opt{ display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:12px; padding:10px 12px; font:inherit; cursor:pointer; }
.mp-opt:hover:not(:disabled){ border-color:var(--accent); }
.mp-opt:disabled{ cursor:default; }
.mp-opt.right{ border-color:var(--good); background:var(--good-soft); }
.mp-opt.wrong{ border-color:var(--bad); background:var(--bad-soft); }
.mp-let{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:700; border:1px solid var(--line); }
.mp-res{ margin:12px 0 8px; font-size:.95rem; }
.mp-res.good b{ color:var(--good); } .mp-res.bad b{ color:var(--bad); }
.mp-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; }
.mp-nav .btn:disabled{ opacity:.45; cursor:default; }
@media (max-width:380px){ .mp-node{ width:48px; height:48px; } .mp-stop.L{ padding-left:calc(24% - 24px); } .mp-stop.R{ padding-right:calc(24% - 24px); } }
.mp-papers{ margin-top:2px; }
.mp-soonq{ font-family:"Lora",Georgia,serif; font-style:italic; font-size:1.15rem; line-height:1.4; margin:0 0 8px; }
.mp-soon{ max-width:560px; }

/* ===== Theme toggle (Auto / Light / Dark) ===== */
.theme-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:999px; background:var(--surface); padding:2px; }
.theme-toggle button{ border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:.78rem; font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer; min-height:28px; }
.theme-toggle button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); }
.theme-toggle button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== Human touches: highlighter, ink blot, note from Aravind, thought bubbles, forgetting curve ===== */
.hand{ font-family:"Caveat","Segoe Script",cursive; font-weight:600; }
.mark{ background:linear-gradient(var(--accent),var(--accent)) 0 96% / 100% .14em no-repeat; padding:0 .05em .08em; color:inherit; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.inkblot{ display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.hero{ position:relative; overflow:hidden; }
.hero .inkblot{ position:absolute; right:12px; top:8px; width:112px; height:auto; opacity:.9; pointer-events:none; }
.hero h2{ padding-right:100px; }
.wl-blot{ display:block; margin:0 auto 8px; width:132px; height:auto; }
.note-card{ position:relative; display:flex; gap:18px; align-items:flex-start; margin:0 0 22px; padding:22px 22px 18px 26px; background:var(--surface); border:1px solid var(--line); border-left:3px solid rgb(var(--bad-rgb) / .45); border-radius:6px 14px 14px 6px;
  background-image:repeating-linear-gradient(transparent 0 27px, rgb(var(--edge-rgb) / .13) 27px 28px); background-position:0 6px; box-shadow:var(--shadow); }
.note-photo{ flex:none; width:132px; height:132px; object-fit:cover; border-radius:6px; border:6px solid #fff; box-shadow:0 2px 8px rgb(0 0 0 / .22); transform:rotate(-2.5deg); background:var(--surface-2); }
.note-body h3{ font-size:1.35rem; margin:0 0 6px; }
.note-body p{ margin:0 0 8px; line-height:28px; }
.note-sign{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:4px !important; }
.note-sign .hand{ font-size:1.9rem; color:var(--accent-ink); line-height:1; }
.note-sign a{ font-size:.9rem; color:var(--accent-ink); }
@media (max-width:560px){ .note-card{ flex-direction:column; align-items:flex-start; padding:20px 18px 16px 20px; } .note-photo{ width:112px; height:112px; } .hero h2{ padding-right:0; } .hero .inkblot{ width:78px; opacity:.55; } }
.trap-card{ position:relative; margin-bottom:30px; border-radius:20px; }
.trap-card::before, .trap-card::after{ content:""; position:absolute; border-radius:50%; background:var(--surface); border:1px solid var(--line); }
.trap-card::after{ width:15px; height:15px; left:30px; bottom:-14px; }
.trap-card::before{ width:8px; height:8px; left:20px; bottom:-25px; }
.curve-card{ margin:0 0 14px; }
.curve-card summary{ cursor:pointer; font-weight:600; }
.curve{ display:block; width:100%; max-width:480px; height:auto; margin:10px auto 0; }
.curve .ax{ stroke:var(--muted); stroke-width:1.5; }
.curve .cv{ fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; }
.curve .jmp{ fill:none; stroke:var(--accent-2); stroke-width:1.6; stroke-dasharray:3 4; }
.curve .tk text{ fill:var(--ink-soft); font-size:10px; font-family:inherit; }
.curve .hand{ fill:var(--ink-soft); font-size:15px; }
.note-strat{ font-size:.95rem; }
.strat-list{ margin:8px 0 0; padding-left:1.3rem; }
.strat-list li{ margin:0 0 8px; line-height:1.5; }
.strat-list li b{ display:inline; }
.strat-list li span{ color:var(--ink-soft); }

/* PYQ Papers: NTA PYQ + unit tiles */
.pp-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:12px 0; }
.pp-tile{ text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 14px 12px; cursor:pointer; display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow); min-height:104px; }
.pp-tile:hover:not(:disabled){ border-color:var(--accent); }
.pp-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pp-tile-t{ font-family:"Lora",Georgia,serif; font-weight:600; font-size:1.08rem; }
.pp-tile-s{ font-size:.8rem; color:var(--muted); line-height:1.3; flex:1; }
.pp-tile-n{ font-size:.82rem; font-weight:600; color:var(--accent-ink); }
.pp-tile-wide{ grid-column:1 / -1; min-height:0; border-left:4px solid var(--accent); }
.pp-sub{ grid-column:1 / -1; margin:10px 2px 0; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.pp-tile-off{ opacity:.55; cursor:default; box-shadow:none; }
.pp-tile-off .pp-tile-n{ color:var(--muted); font-weight:500; }
.pp-crumb{ margin:12px 0 4px; }
.pp-group-h{ font-size:1.1rem; margin:8px 2px 8px; }

/* Exam predictability: quick check, donut score */
.ex-card{ max-width:640px; margin-left:auto; margin-right:auto; }
.ex-q{ font-size:1.05rem; line-height:1.55; margin:8px 0 14px; }
.ex-opts{ display:grid; gap:8px; }
.ex-opt{ display:flex; gap:10px; align-items:flex-start; text-align:left; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 12px; cursor:pointer; }
.ex-opt b{ flex:none; width:1.6em; height:1.6em; border-radius:50%; display:inline-grid; place-items:center; font-size:.85rem; background:var(--surface-2); color:var(--ink-soft); }
.ex-opt:hover{ border-color:var(--accent); }
.ex-opt.picked{ border-color:var(--accent); background:rgb(var(--accent-rgb) / .1); box-shadow:0 0 0 1px var(--accent) inset; }
.ex-opt.picked b{ background:var(--accent); color:var(--on-accent); }
.ex-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ex-result{ text-align:center; }
.ex-donut{ width:min(240px,70%); height:auto; display:block; margin:6px auto 0; }
.ex-track{ fill:none; stroke:var(--line); stroke-width:16; }
.ex-arc{ fill:none; stroke-width:16; stroke-linecap:butt; transition:stroke-dasharray .8s ease; }
.ex-arc.ex-hi{ stroke:var(--good); } .ex-arc.ex-ok{ stroke:var(--accent); } .ex-arc.ex-mid{ stroke:var(--warn); } .ex-arc.ex-lo{ stroke:var(--bad); }
.ex-pct{ font-family:"Lora",Georgia,serif; font-weight:600; font-size:30px; fill:var(--ink); }
.ex-sub{ font-size:9.5px; fill:var(--muted); letter-spacing:.04em; }
.ex-band{ font-family:"Lora",Georgia,serif; font-size:1.2rem; font-weight:600; margin:6px 0 12px; }
.ex-band.ex-hi{ color:var(--good); } .ex-band.ex-ok{ color:var(--accent-ink); } .ex-band.ex-mid{ color:var(--warn); } .ex-band.ex-lo{ color:var(--bad); }
.ex-types{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 14px; }
.ex-chip{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); }
.ex-chip i{ font-style:normal; font-weight:700; } .ex-chip em{ font-style:normal; color:var(--muted); }
.ex-chip.ex-right i{ color:var(--good); } .ex-chip.ex-wrong i{ color:var(--bad); }
.ex-ans{ border-top:1px solid var(--line); padding:12px 0 4px; }
.ex-ans:first-of-type{ border-top:0; }
.ex-ol{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ex-ol li{ padding:6px 9px; border-radius:8px; border:1px solid transparent; font-size:.95rem; }
.ex-ol li b{ margin-right:6px; color:var(--muted); }
.ex-ol li.good{ background:rgb(var(--good-rgb) / .14); border-color:rgb(var(--good-rgb) / .5); }
.ex-ol li.bad{ background:rgb(var(--bad-rgb) / .12); border-color:rgb(var(--bad-rgb) / .45); }
@media (prefers-reduced-motion:reduce){ .ex-arc{ transition:none; } }

.wl-predict{ display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; max-width:380px; margin:12px auto 0; padding:11px 14px; font:inherit; color:var(--ink); background:transparent; border:1.5px solid var(--accent); border-radius:14px; cursor:pointer; }
.wl-predict b{ font-size:1.02rem; color:var(--accent-ink); } .wl-predict span{ font-size:.85rem; color:var(--muted); }
.wl-predict:hover{ background:rgb(var(--accent-rgb) / .1); }
.wl-predict:focus-visible{ outline:3px solid var(--accent-3); outline-offset:3px; }

#tmGrad stop{ stop-color:var(--accent); }
:root[data-theme="dark"] .inkblot{ filter:brightness(1.45) saturate(1.1); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .inkblot{ filter:brightness(1.45) saturate(1.1); } }

.wl-logo{ display:block; margin:0 auto 6px; width:150px; height:150px; border-radius:50%; box-shadow:0 0 0 1px var(--line), var(--shadow); }
.wl-brand{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:520px){ .wl-logo{ width:124px; height:124px; } .brand-logo{ width:46px; height:46px; } }