/* NCLEX Drill — design language v2 (2026-10-09)
   Futuristic clinical: deep-space navy, clinical teal primary (exam),
   calm violet secondary (study mode). Big touch targets, one primary
   action per screen, CSS-only, no layout shift. */
:root {
  --bg: #060a14;
  --bg2: #0b1226;
  --card: #0d1630;
  --card-border: #1c2a55;
  --ink: #f2f6ff;
  --muted: #8f98bd;
  --teal: #2dd4bf;
  --teal-deep: #0d9488;
  --teal-glow: rgba(45, 212, 191, .35);
  --teal-soft: rgba(45, 212, 191, .10);
  --violet: #a78bfa;
  --violet-deep: #7c5cf0;
  --violet-glow: rgba(167, 139, 250, .30);
  --violet-soft: rgba(167, 139, 250, .10);
  --good: #34d399;
  --bad: #fb7185;
  --warn: #fbbf24;
  --radius: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(45,212,191,.10) 0%, transparent 60%),
    radial-gradient(700px 500px at 85% 110%, rgba(139,92,246,.08) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
body.study-bg {
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(167,139,250,.12) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- header ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 8px; }
.brand { font-weight: 800; font-size: 21px; letter-spacing: .2px; }
.brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; margin-right: 9px;
  background: linear-gradient(135deg, var(--teal), #22d3ee);
  color: #04211d; font-size: 19px; font-weight: 900;
  box-shadow: 0 0 18px var(--teal-glow);
}
.byline { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

main { flex: 1; padding: 6px 20px 96px; max-width: 580px; width: 100%; margin: 0 auto; }
.screen { display: none; }
.screen.active { display: block; animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; } }
.hidden { display: none !important; }

/* ---------- tip card ---------- */
.tip-card {
  background: linear-gradient(135deg, rgba(45,212,191,.14), rgba(139,92,246,.10));
  border: 1px solid rgba(45,212,191,.28);
  border-radius: var(--radius); padding: 14px 16px; margin: 10px 0 4px;
}
.tip-label { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.tip-text { font-size: 14.5px; line-height: 1.5; color: #d9e2ff; }

/* ---------- lock-screen tips (push) ---------- */
.tips-push-card {
  background: linear-gradient(135deg, rgba(45,212,191,.12), rgba(34,211,238,.06));
  border: 1px solid rgba(45,212,191,.25);
  border-radius: var(--radius); padding: 14px 16px; margin: 10px 0 4px;
}
.tips-push-head { font-size: 15px; font-weight: 800; color: var(--teal); margin-bottom: 4px; }
.tips-push-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.tips-push-card .btn { width: 100%; }
#tips-push-enable { margin-bottom: 2px; }
.tips-push-status { font-size: 14px; font-weight: 700; color: var(--teal); margin-bottom: 10px; }
.tips-push-enabled .seg-label { display: block; margin: 0 0 8px; }
.tips-push-enabled .seg { margin-bottom: 12px; }
#qcount-seg { flex-wrap: wrap; row-gap: 10px; }
#qcount-seg .seg-btn { flex: 1 1 0; min-width: 52px; min-height: 44px; padding: 9px 8px; }
.seg-wrap { flex-wrap: wrap; }
.tips-push-denied, .tips-push-unsupported {
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
  background: rgba(255,180,120,.08); border: 1px dashed rgba(255,180,120,.4);
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
}

/* ---------- hero / stats ---------- */
.hero h1 { font-size: 31px; line-height: 1.18; margin: 16px 0 6px; font-weight: 800; letter-spacing: -.3px; }
.hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--teal), #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Quiz resume banner (2026-10-10 QA) */
.resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, rgba(45,212,191,.12), rgba(34,211,238,.08)); border: 1px solid var(--teal); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.resume-banner.hidden { display: none; }
@media (max-width: 480px) {
  .resume-banner { flex-direction: column; align-items: stretch; }
  .resume-actions { display: flex; justify-content: flex-end; gap: 10px; }
}
.resume-text { display: flex; flex-direction: column; gap: 2px; }
.resume-text strong { font-size: 15px; }
.resume-text span { color: var(--muted); font-size: 13px; }
.resume-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.resume-actions .btn { padding: 10px 18px; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 14px 6px; text-align: center; }
.stat .num { font-size: 23px; font-weight: 800; color: var(--teal); }
.stat .lbl { color: var(--muted); font-size: 12px; margin-top: 4px; }
/* ATI-style progress dashboard */
.prog-dash { display: flex; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.pd-ring { position: relative; width: 120px; height: 120px; flex: none; }
.pd-svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.pd-svg circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.pd-bg { stroke: var(--bg2); }
.pd-fg { stroke: var(--teal); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .6s ease; filter: drop-shadow(0 0 6px var(--teal-glow)); }
.pd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pd-pct { font-size: 24px; font-weight: 800; }
.pd-cap { color: var(--muted); font-size: 12px; }
.pd-status { flex: 1; min-width: 0; }
.pd-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.pd-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 5px 0; border-bottom: 1px solid var(--card-border); }
.pd-row span { color: var(--muted); }
.pd-row strong { font-size: 16px; }
.pd-bar { height: 8px; background: var(--bg2); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.pd-fill { height: 100%; background: linear-gradient(90deg, var(--teal), #22d3ee); border-radius: 99px; width: 0%; transition: width .6s ease; }

/* ---------- sections ---------- */
.section-title { font-size: 15px; font-weight: 800; margin: 20px 0 10px; letter-spacing: .3px; }
.section-title.study { color: var(--violet); }

/* ---------- setup panel ---------- */
.setup { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.setup-title { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
#topic-chips { display: grid; gap: 8px; }
#topic-chips .chip { border-radius: 14px; text-align: left; padding: 12px 14px; font-size: 14.5px; line-height: 1.35; }
.chip { border: 1px solid var(--card-border); background: var(--bg2); color: var(--ink); border-radius: 99px; padding: 9px 15px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.chip.active { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
#learn-chips .chip.active { background: var(--violet-soft); border-color: var(--violet); color: var(--violet); }
.toggles { display: grid; gap: 10px; }
.toggles > * { min-width: 0; }
.toggle .toggle-label { min-width: 0; overflow-wrap: break-word; text-align: left; }
.toggle { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--bg2); border: 1px solid var(--card-border); color: var(--ink); border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 600; cursor: pointer; }
.toggle .toggle-knob { flex: 0 0 46px; height: 26px; border-radius: 99px; background: #232c5c; position: relative; transition: background .2s; }
.toggle .toggle-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #8f98bd; transition: left .2s, background .2s; }
.toggle[aria-pressed="true"] .toggle-knob { background: var(--teal-deep); }
.toggle[aria-pressed="true"] .toggle-knob::after { left: 23px; background: #fff; }
.seg { display: flex; align-items: center; gap: 8px; }
.seg-label { color: var(--muted); font-size: 14px; font-weight: 600; margin-right: auto; }
.seg-btn { border: 1px solid var(--card-border); background: var(--bg2); color: var(--muted); border-radius: 99px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 44px; }
.seg-btn.active { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.seg-btn small { display: block; font-size: 10.5px; font-weight: 600; opacity: .75; }
.seg-input { width: 62px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 99px; color: var(--ink); padding: 9px 10px; font-size: 14px; font-weight: 700; text-align: center; }
.seg-input:focus { outline: none; border-color: var(--teal); }
.seg-input::placeholder { color: var(--muted); }
/* Quiz naming (2026-10-10 ATI parity) */
.quiz-name-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.quiz-name-input { flex: 1; min-width: 180px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; color: var(--ink); padding: 11px 14px; font-size: 14px; }
.quiz-name-input:focus { outline: none; border-color: var(--teal); }
.quiz-name-input::placeholder { color: var(--muted); }
.quiet-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; }
.quiet-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.quiet-field input[type="time"] { background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; color: var(--ink); padding: 8px 10px; font-size: 14px; font-weight: 700; color-scheme: dark; }
.quiet-field input[type="time"]:focus { outline: none; border-color: var(--teal); }
/* Lock-screen tips: install how-to (collapsed, out of the way). */
.tips-how-link { margin-top: 6px; font-size: 13px; color: var(--muted); }
.tips-how-body { margin-top: 8px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; font-size: 13px; color: var(--muted); text-align: left; }
.tips-how-body p { margin: 6px 0; }
.tips-how-body strong { color: var(--ink); }
/* Account drawer: guest mode (signed out) — track switcher stays visible. */
.drawer-signin { width: 100%; margin: 4px 0 12px; }
.account-drawer.guest .readiness-card,
.account-drawer.guest .drawer-stats,
.account-drawer.guest .drawer-sync,
.account-drawer.guest #drawer-username-box,
.account-drawer.guest #drawer-review,
.account-drawer.guest #drawer-flagged,
.account-drawer.guest #drawer-reset,
.account-drawer.guest #drawer-signout { display: none; }
/* Session stats (results screen + Study tab history). */
.res-detail { margin-top: 16px; text-align: left; }
/* ATI-style Test-mode end-of-quiz review */
.res-review { margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.res-review:empty { display: none; }
.review-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.review-head strong { font-size: 17px; }
.review-head span { color: var(--muted); font-size: 13px; }
.review-item { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.review-item.ok { border-left: 3px solid var(--teal); }
.review-item.miss { border-left: 3px solid #f87171; }
.review-q { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: none; color: var(--ink); cursor: pointer; text-align: left; font-size: 14px; }
.review-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.review-item.ok .review-mark { background: rgba(45,212,191,.15); color: var(--teal); }
.review-item.miss .review-mark { background: rgba(248,113,113,.15); color: #f87171; }
.review-text { flex: 1; min-width: 0; }
.review-chev { color: var(--muted); font-size: 20px; flex: none; }
.review-a { padding: 0 14px 14px 48px; }
.review-correct { font-size: 14px; margin-bottom: 8px; }
.sess-time { color: var(--muted); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.res-detail .dash-row { margin-bottom: 10px; }
.session-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sess-wrap { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.sess-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: none; color: var(--ink); cursor: pointer; text-align: left; }
.sess-main { display: flex; flex-direction: column; gap: 2px; }
.sess-main strong { font-size: 15px; }
.sess-main small { font-size: 12px; }
.sess-score { font-weight: 800; font-size: 15px; white-space: nowrap; }
.sess-detail { padding: 4px 14px 14px; border-top: 1px solid var(--card-border); }
.sess-detail .dash-row { margin-top: 10px; }

/* ---------- quiz builder (unseen-only / missed-only) ---------- */
.builder-empty { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--teal-soft); border: 1px dashed rgba(45,212,191,.45); border-radius: 12px; padding: 12px 14px; }

/* ---------- buttons ---------- */
.actions { display: grid; gap: 10px; }
.btn { appearance: none; border-radius: var(--radius); padding: 17px; font-size: 17px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--card-border); cursor: pointer; transition: transform .08s ease; }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(135deg, var(--teal), #14b8a6); border: 0; color: #04211d; box-shadow: 0 8px 26px var(--teal-glow); }
.btn.cat { background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(34,211,238,.08)); border: 1px solid rgba(45,212,191,.55); box-shadow: 0 8px 26px var(--teal-glow); text-align: left; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.btn .btn-sub { display: block; font-size: 13px; font-weight: 500; opacity: .75; margin-top: 3px; }
.btn.study { border-color: rgba(167,139,250,.35); background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(167,139,250,.04)); text-align: left; }
.link { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; padding: 10px 0; }
.link.danger { color: var(--bad); } /* 2026-10-11: destructive plan-reset affordance */
.note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; }

/* ---------- quiz ---------- */
.quiz-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
#quiz-progress { color: var(--muted); font-size: 14px; }
.head-right { display: flex; align-items: center; gap: 8px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; color: var(--teal); background: var(--teal-soft); border: 1px solid rgba(45,212,191,.35); border-radius: 99px; padding: 5px 13px; }
.timer.low { color: var(--bad); background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.4); }
.elapsed { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); }
.icon-btn, .flag-btn { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; font-size: 19px; width: 42px; height: 42px; cursor: pointer; color: var(--ink); }
#q-case-info { width: auto; padding: 0 14px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
#q-case-info.hidden { display: none; }
.case-toggle-label { font-size: 13px; }
.flag-btn { color: var(--warn); }
.flag-btn.on { background: rgba(251,191,36,.15); border-color: var(--warn); }
.bar { height: 6px; background: #141d3d; border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
#quiz-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), #22d3ee); transition: width .3s ease; box-shadow: 0 0 10px var(--teal-glow); }
.q-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px; }
.q-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.category { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); padding: 6px 12px; border-radius: 99px; }
.study-cat { color: var(--violet); background: var(--violet-soft); }
.diff { font-size: 12px; color: var(--muted); letter-spacing: 2px; }
.q-text { font-size: 18.5px; line-height: 1.55; font-weight: 600; margin-bottom: 18px; overflow-wrap: break-word; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: flex-start; text-align: left; overflow-wrap: break-word; min-width: 0; background: var(--bg2); border: 1px solid var(--card-border); color: var(--ink); border-radius: 14px; padding: 15px; font-size: 16px; cursor: pointer; line-height: 1.45; }
.choice .letter { flex: 0 0 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: #1a2450; color: var(--muted); }
.choice.correct { border-color: var(--good); background: rgba(52,211,153,.10); }
.choice.correct .letter { background: var(--good); color: #04140d; }
.choice.wrong { border-color: var(--bad); background: rgba(251,113,133,.10); }
.choice.wrong .letter { background: var(--bad); color: #1c0606; }
.choice.missed { border-color: var(--warn); background: rgba(251,191,36,.08); }
.choice.missed .letter { background: var(--warn); color: #1c1204; }
.choice:disabled { cursor: default; }
.choice input[type="checkbox"] { display: none; }
.choice .box { flex: 0 0 26px; height: 26px; border-radius: 8px; border: 2px solid #2a3568; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: transparent; margin-top: 1px; }
.choice.picked { border-color: var(--teal); background: var(--teal-soft); }
.choice.picked .box { background: var(--teal); border-color: var(--teal); color: #04211d; }
.choice.picked .box::after { content: "✓"; font-weight: 900; }
.choice .rank { flex: 0 0 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: #1a2450; color: var(--muted); }
.choice.ranked { border-color: var(--violet); background: var(--violet-soft); }
.choice.ranked .rank { background: var(--violet-deep); color: #fff; }
.sata-hint { font-size: 13px; color: var(--teal); font-weight: 700; letter-spacing: .3px; background: var(--teal-soft); border: 1px dashed rgba(45,212,191,.4); border-radius: 10px; padding: 8px 12px; margin-bottom: 2px; }
.fib-wrap { display: flex; gap: 10px; }
.fib-input { flex: 1; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 14px; color: var(--ink); font-size: 20px; font-weight: 700; padding: 14px 16px; font-variant-numeric: tabular-nums; }
.fib-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow); }
.feedback { margin-top: 18px; }
.verdict { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.verdict.partial { color: var(--warn); }
.rationale { background: var(--bg2); border-left: 3px solid var(--teal); padding: 13px 15px; border-radius: 0 14px 14px 0; font-size: 15px; line-height: 1.6; color: #dbe3ff; }
.study-vibe .rationale { border-left-color: var(--violet); }
.correct-answer-line { margin-top: 10px; font-size: 15px; color: var(--good); font-weight: 700; }
.evidence-line { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.evidence-line strong { color: var(--teal); }
.study-vibe .evidence-line strong { color: var(--violet); }
#q-next, #q-check { width: 100%; margin-top: 18px; }

/* exhibits (NCSBN-style tabs) */
.exhibits { margin-bottom: 14px; border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.exhibit-tabs { display: flex; background: var(--bg2); }
.exhibit-tab { flex: 1; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; padding: 12px 8px; cursor: pointer; border-bottom: 2px solid transparent; }
.exhibit-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.exhibit-body { padding: 14px 16px; font-size: 14.5px; line-height: 1.6; color: #dbe3ff; white-space: pre-wrap; font-variant-numeric: tabular-nums; }

/* calculator */
.calc { position: fixed; right: 16px; bottom: 16px; width: 240px; background: var(--card); border: 1px solid var(--card-border); border-radius: 18px; padding: 12px; z-index: 85; box-shadow: 0 16px 50px rgba(0,0,0,.55); }
.calc-display { background: var(--bg2); border-radius: 10px; padding: 12px; font-size: 22px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-keys button { background: var(--bg2); border: 1px solid var(--card-border); color: var(--ink); border-radius: 10px; font-size: 17px; font-weight: 700; padding: 11px 0; cursor: pointer; }
.calc-keys button.op { color: var(--teal); }
.calc-keys button.eq { background: linear-gradient(135deg, var(--teal), #14b8a6); color: #04211d; border: 0; }

/* ---------- results ---------- */
.results { text-align: center; padding: 30px 0 10px; }
.res-score { font-size: 58px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(120deg, var(--teal), #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.res-pct { font-size: 22px; color: var(--teal); font-weight: 800; margin: 4px 0 10px; }
.res-msg { color: var(--muted); font-size: 16px; margin-bottom: 22px; }
.results .btn { width: 100%; margin-bottom: 10px; }
.res-pct.verdict-pass { color: var(--good); }
.res-pct.verdict-fail { color: var(--bad); }
#cat-detail { text-align: left; margin: 6px 0 18px; }
.cat-meta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.cat-chip { font-size: 13px; font-weight: 700; color: var(--teal); background: var(--teal-soft); border: 1px solid rgba(45,212,191,.35); border-radius: 99px; padding: 6px 13px; }
.cat-title { font-weight: 800; margin: 14px 0 8px; font-size: 15px; text-align: center; }
.cat-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border: 1px solid var(--card-border); border-radius: 12px; margin-bottom: 7px; background: var(--card); font-size: 14px; }
.cat-row .cat-name { color: var(--muted); }
.cat-row .cat-pct { font-weight: 800; }

/* ---------- study vibe ---------- */
.study-vibe .study-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; }
.study-head-title { font-weight: 800; font-size: 16px; color: var(--violet); }
.learn-card { background: var(--card); border: 1px solid rgba(167,139,250,.25); border-radius: var(--radius); padding: 22px; }
.learn-answer { background: var(--violet-soft); border: 1px solid rgba(167,139,250,.35); border-radius: 14px; padding: 13px 15px; font-size: 15.5px; font-weight: 700; color: var(--violet); margin-bottom: 14px; line-height: 1.5; }
.learn-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* flashcards */
.fc-deck { justify-content: center; margin-bottom: 14px; }
.fc-deck .seg-btn.active { background: var(--violet-soft); border-color: var(--violet); color: var(--violet); }
.flashcard { perspective: 1200px; cursor: pointer; min-height: 300px; }
.fc-inner { position: relative; width: 100%; min-height: 300px; transition: transform .45s ease; transform-style: preserve-3d; }
.flashcard.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; overflow-y: auto; }
.fc-front { border-color: rgba(167,139,250,.35); }
.fc-back { transform: rotateY(180deg); border-color: rgba(52,211,153,.35); }
.fc-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--violet); margin-bottom: 12px; }
.fc-back .fc-tag { color: var(--good); }
.fc-a { font-size: 16.5px; line-height: 1.6; font-weight: 600; }
.fc-a .fc-rat { display: block; margin-top: 12px; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.55; }
.fc-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0; }
/* 2026-10-11 QA sweep P1: Know / Still-learning controls for flashcards. */
.fc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#fc-next { width: 100%; }

/* weak areas */
.weak-intro { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.weak-topic { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.weak-topic-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; color: var(--ink); padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer; }
.weak-count { background: rgba(251,113,133,.15); color: var(--bad); font-size: 13px; font-weight: 800; border-radius: 99px; padding: 4px 12px; }
.weak-items { display: none; padding: 0 16px 16px; }
.weak-topic.open .weak-items { display: block; }
.weak-item { border-top: 1px solid var(--card-border); padding: 12px 0; }
.weak-item .wq { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; line-height: 1.5; }
.weak-item .wr { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.weak-empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 15px; line-height: 1.6; }

/* ---------- outcome data: pass wall ---------- */
.passed-banner { margin: 4px 0 6px; text-align: center; }
.btn.pass {
  width: 100%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 0; color: #231303;
  box-shadow: 0 8px 26px rgba(251, 191, 36, .35);
}
.pass-wall-link { display: inline-block; margin-top: 10px; color: var(--warn); font-size: 14px; font-weight: 700; text-decoration: none; }
.wall-hero { text-align: center; margin: 14px 0 6px; }
.wall-hero h1 { font-size: 30px; margin: 0 0 6px; font-weight: 800; letter-spacing: -.3px; }
.wall-hero h1 { background: linear-gradient(120deg, #fbbf24, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wall-empty {
  text-align: center; background: var(--card); border: 1px dashed rgba(251,191,36,.4);
  border-radius: var(--radius); padding: 44px 24px; margin: 18px 0;
}
.wall-empty-icon { font-size: 44px; margin-bottom: 10px; }
.wall-empty p { font-size: 16px; margin: 6px 0; }
.wall-empty .btn { width: 100%; margin-top: 14px; }
.wall-cards { display: grid; gap: 12px; margin: 18px 0; }
.wall-card {
  background: var(--card); border: 1px solid rgba(251,191,36,.3);
  border-radius: var(--radius); padding: 20px;
}
.wall-quote { font-size: 16.5px; line-height: 1.6; font-style: italic; color: #f4ead2; margin-bottom: 12px; }
.wall-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.wall-name { font-weight: 800; color: var(--warn); }
.wall-date { color: var(--muted); font-size: 13px; }
.wall-badge { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--good); background: rgba(52,211,153,.12); border-radius: 99px; padding: 5px 12px; }
.wall-cta { text-align: center; margin: 10px 0 20px; }

/* ---------- ads / footer ---------- */
.ad-slot { position: relative; margin: 12px auto; max-width: 580px; min-height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed #22305e; border-radius: 14px; background: rgba(13,22,48,.5); }
/* Hide empty ad slots until AdSense fills them (approval pending — no empty boxes). (2026-10-11) */
.ad-slot:not(:has(ins[data-ad-status="filled"])) { display: none; }
.ad-slot .ad-label { position: absolute; top: 4px; right: 8px; font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.ad-slot ins.adsbygoogle { width: 100%; }
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 20px calc(88px + env(safe-area-inset-bottom)); max-width: 580px; margin: 0 auto; }
/* Fixed mini-player (beats-player/beats-fab, ~58px bottom zone) must never cover page-bottom content: footer carries the clearance. */

/* ---------- streak-at-risk banner ---------- */
.streak-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(251,113,133,.10));
  border: 1px solid rgba(251,191,36,.5);
  border-radius: var(--radius); padding: 14px 16px; margin: 14px 0;
  font-size: 14.5px; line-height: 1.45;
}
.streak-banner .btn.small { padding: 10px 14px; font-size: 14px; margin-left: auto; white-space: nowrap; }

/* ---------- cross-sell: study resources ---------- */
.cross-sell { display: grid; gap: 10px; margin-bottom: 8px; }
.xs-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 14px 16px;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .08s ease;
}
.xs-card:active { transform: scale(.985); }
.xs-card:hover { border-color: var(--teal-deep); }
.xs-emoji { font-size: 24px; }
.xs-text { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.xs-text small { color: var(--muted); font-size: 12.5px; }
.xs-arrow { margin-left: auto; color: var(--teal); font-weight: 800; font-size: 18px; }
.xs-card.soon .xs-arrow { display: none; }
.xs-card.soon::after {
  content: "SOON"; margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 99px; padding: 5px 11px;
}

/* ---------- Drill Method (rationale format) ---------- */
.nmm { margin-top: 12px; }
.nmm-title { font-size: 14px; font-weight: 800; letter-spacing: .4px; margin-bottom: 10px; }
.nmm-sec { margin-bottom: 10px; }
.nmm-label {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--teal); margin-bottom: 5px;
}
.nmm-sec p { margin: 0; font-size: 15px; line-height: 1.6; }
.nmm-ev { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* === FEATURE: MNEMONICS ===
   Teal-tinted memory-aid callout card (rationale renderer, .mnemonic-callout).
   Sits inside .nmm between the principle section and the evidence line, and
   before #q-note-slot. Violet variant follows study-mode theming. */
.mnemonic-callout {
  margin: 12px 0; padding: 12px 14px; border-radius: 14px;
  background: var(--teal-soft);
  border: 1px solid rgba(45, 212, 191, .35);
  border-left: 3px solid var(--teal);
}
.mnemonic-callout-label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--teal); margin-bottom: 6px;
}
.mnemonic-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: #dbe3ff; }
.study-vibe .mnemonic-callout {
  background: var(--violet-soft);
  border-color: rgba(167, 139, 250, .35);
  border-left-color: var(--violet);
}
.study-vibe .mnemonic-callout-label { color: var(--violet); }
.issue-link {
  display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.issue-link:hover { color: var(--warn); }
.issue-link .qid { opacity: .7; }

/* ---------- RN/PN track selector ---------- */
.track-switcher { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.track-switcher .seg-label { margin-right: auto; }
.track-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 10px; }
.track-card { border: 1px solid var(--card-border); background: var(--bg2); border-radius: 18px; padding: 26px 14px; cursor: pointer; color: var(--ink); transition: transform .12s ease, border-color .12s ease; }
.track-card:active { transform: scale(.97); }
.track-card:hover { border-color: var(--teal); }
.track-emoji { font-size: 40px; margin-bottom: 10px; }
.track-name { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.track-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.onboard-brand { text-align: center; margin: 26px 0 6px; }
.onboard-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 8px; }

/* ---------- coverage proof table (content-standard.html) ---------- */
.cov-wrap { overflow-x: auto; margin: 14px 0 6px; }
.cov-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cov-table th, .cov-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--card-border); }
.cov-table th { color: var(--muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.cov-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cov-table tr.total td { font-weight: 800; border-bottom: 2px solid var(--teal); }
.cov-growing { display: inline-block; font-size: 12px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid var(--warn); border-radius: 99px; padding: 3px 10px; }
.cov-note { color: var(--muted); font-size: 13px; margin-top: 10px; line-height: 1.5; }
.cov-stamp { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* ---------- accounts UI ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; }
.account-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--card-border); background: var(--bg2); color: var(--ink); border-radius: 99px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.account-btn:active { transform: scale(.97); }
.account-btn.signed-in { border-color: var(--teal); }
.acct-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.acct-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 130; padding: 20px; overflow-y: auto; }
.modal.hidden { display: none; }
.modal-card { position: relative; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 20px; padding: 34px 26px 26px; max-width: 380px; width: 100%; text-align: center; max-height: calc(100dvh - 40px); overflow-y: auto; margin: auto; }
.modal-close { position: sticky; top: 8px; z-index: 5; background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; min-width: 44px; min-height: 44px; width: fit-content; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-bottom: -44px; }
/* 2026-10-11 QA sweep P1: was position:absolute, so the ✕ scrolled offscreen with
   tall modal content and could not be reached. Sticky keeps it pinned top-right
   while the card scrolls; negative margin preserves the existing layout. */
.modal-emoji { font-size: 44px; margin-bottom: 10px; }
.modal-card h2 { margin: 0 0 8px; font-size: 22px; }
.modal-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.modal-btn { width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.g-logo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285F4; font-weight: 800; font-size: 14px; }
.modal-note { font-size: 13.5px; color: var(--muted); background: var(--bg); border: 1px dashed var(--card-border); border-radius: 12px; padding: 12px; margin: 6px 0 0; line-height: 1.5; }
.modal-note.hidden { display: none; }

/* ---------- legal footers ---------- */
.legal { font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 640px; margin: 0 auto 10px; }
.modal-terms { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.modal-terms a { color: var(--teal); }
#email-form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.text-input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 13px 14px; font-size: 16px; color: var(--ink); }
.text-input:focus { outline: none; border-color: var(--teal); }
.text-input::placeholder { color: var(--muted); }
.email-actions { display: flex; gap: 10px; }
.email-btn { flex: 1; margin: 0; }

/* ---------- account drawer (slide-in) ---------- */
.acct-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 118; }
.acct-scrim.hidden { display: none; }
.account-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); box-sizing: border-box; background: var(--bg2); border-left: 1px solid var(--card-border); z-index: 120; padding: 20px 18px; overflow-y: auto; transform: translateX(105%); transition: transform .28s cubic-bezier(.32,.72,.35,1); display: flex; flex-direction: column; gap: 14px; }
.account-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 3; background: var(--bg2); margin: -20px -18px 0; padding: 20px 18px 10px; }
/* 2026-10-11 QA sweep: sticky drawer header so the ✕ close button stays
   reachable when the account drawer content scrolls (was scrolling offscreen). */
.drawer-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex: none; }
.drawer-profile-text { min-width: 0; }
.drawer-name { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-email { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.drawer-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 8px; }
.readiness-card { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px; }
.readiness-ring { position: relative; width: 76px; height: 76px; flex: none; }
.ring-svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--card-border); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset .6s ease, stroke .3s; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
#readiness-band { font-size: 12.5px; letter-spacing: .4px; line-height: 1.15; white-space: nowrap; }
#readiness-score { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.readiness-detail { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.readiness-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.readiness-label { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.drawer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.drawer-stat { background: var(--bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 4px; text-align: center; }
.drawer-stat-num { display: block; font-size: 15px; font-weight: 800; }
.drawer-stat-label { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.drawer-sync { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; flex: none; }
.drawer-menu { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; }
.drawer-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; background: none; border: none; border-bottom: 1px solid var(--card-border); color: var(--ink); padding: 14px 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left; text-decoration: none; }
.drawer-item:last-child { border-bottom: none; }
.drawer-item:active { background: var(--card); }
.drawer-item.static { cursor: default; }
.drawer-item.static:active { background: none; }
.drawer-ico { font-size: 17px; width: 24px; text-align: center; flex: none; }
.drawer-item-text { flex: 1; }
.chev { color: var(--muted); font-size: 18px; }
.drawer-item.danger .drawer-item-text, .drawer-item.danger .drawer-ico { color: #f87171; }
.drawer-item .seg.mini { margin-left: auto; }
.seg.mini .seg-btn { padding: 7px 14px; font-size: 13px; min-height: 44px; }
.drawer-foot { text-align: center; font-size: 12.5px; color: var(--muted); }
.drawer-foot a { color: var(--teal); }
.drawer-signout { width: 100%; padding: 14px; font-size: 15px; margin-top: auto; }

/* === FEATURE: NGN TYPES === */
/* Bow-tie: three option columns; stacked on mobile, 3-across on desktop */
.bt-grid { display: grid; gap: 14px; }
.bt-col { display: grid; gap: 10px; align-content: start; }
.bt-col-label { font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--teal); text-align: center; padding: 8px; background: var(--teal-soft); border: 1px solid rgba(45,212,191,.35); border-radius: 10px; }
.bt-opt { width: 100%; }
@media (min-width: 760px) { .bt-grid { grid-template-columns: repeat(3, 1fr); } }
/* Trend: compact vitals-style data table */
.trend-wrap { overflow-x: auto; margin-bottom: 4px; border: 1px solid var(--card-border); border-radius: 14px; }
.trend-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.trend-table th, .trend-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--card-border); }
.trend-table thead tr:last-child th, .trend-table tbody tr:last-child th, .trend-table tbody tr:last-child td { border-bottom: 0; }
.trend-table thead th { color: var(--teal); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.trend-table th[scope="row"] { color: #dbe3ff; font-weight: 700; white-space: nowrap; }
.trend-table td { color: var(--ink); }
/* Highlight: tap-to-select words inside the passage */
.hl-text { background: var(--bg2); border: 1px solid var(--card-border); border-radius: 14px; padding: 18px; font-size: 16.5px; line-height: 2.1; color: #dbe3ff; }
.hl-word { cursor: pointer; border-radius: 6px; padding: 2px 1px; border-bottom: 2px solid transparent; transition: background .12s ease; }
.hl-word.picked { background: var(--teal-soft); border-bottom-color: var(--teal); color: #fff; }
.hl-word.correct { background: rgba(52,211,153,.28); border-bottom-color: var(--good); color: #fff; }
.hl-word.wrong { background: rgba(251,113,113,.25); border-bottom-color: var(--bad); color: #fff; }
.hl-word:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
/* Matrix: one option set per labeled row */
.mx-row { display: grid; gap: 10px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; }
.mx-row + .mx-row { margin-top: 10px; }
.mx-label { font-weight: 800; font-size: 15px; color: var(--teal); }
.mx-opt { width: 100%; }

/* ---------- question notes ---------- */
.q-note-slot { margin-top: 12px; }
.note-toggle { width: 100%; background: var(--bg2); border: 1px dashed rgba(45,212,191,.45); color: var(--teal); border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; }
.note-toggle:active { transform: scale(.98); }
.note-editor { margin-top: 10px; display: grid; gap: 8px; }
.note-textarea { min-height: 110px; resize: vertical; font-family: inherit; line-height: 1.5; }
.note-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.note-actions .btn { padding: 13px; font-size: 15px; }
/* notes deck */
.modal-card.notes-card { text-align: left; max-height: 80dvh; display: flex; flex-direction: column; }
.notes-card .modal-emoji, .notes-card h2, .notes-card .modal-sub { text-align: center; }
.notes-card h2 { margin: 0 0 6px; }
.notes-card .modal-sub { margin-bottom: 14px; }
.notes-list { overflow-y: auto; display: grid; gap: 10px; padding-right: 2px; }
.note-card { background: var(--bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; cursor: pointer; }
.note-card:active { border-color: var(--teal); }
.note-stem { font-size: 13.5px; font-weight: 700; color: var(--teal); margin-bottom: 6px; line-height: 1.45; }
.note-text { font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.note-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.note-date { font-size: 12px; color: var(--muted); }
.note-del { background: none; border: 1px solid var(--card-border); color: var(--bad); border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 44px; }
.note-del:active { transform: scale(.96); }
.notes-empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 14.5px; line-height: 1.6; }
/* ---------- notes tab (2026-10-10) ---------- */
.notes-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.notes-search { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; color: var(--ink); padding: 12px 14px; font-size: 15px; }
.notes-search:focus { outline: none; border-color: var(--teal); }
.notes-new-btn { flex: none; white-space: nowrap; }
.notes-composer { background: var(--card); border: 1px solid var(--teal); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.notes-composer.hidden { display: none; }
.notes-title-input { background: var(--bg2); border: 1px solid var(--card-border); border-radius: 10px; color: var(--ink); padding: 11px 13px; font-size: 15px; font-weight: 700; width: 100%; box-sizing: border-box; }
.notes-title-input:focus { outline: none; border-color: var(--teal); }
.notes-body-input { background: var(--bg2); border: 1px solid var(--card-border); border-radius: 10px; color: var(--ink); padding: 12px 13px; font-size: 15px; line-height: 1.55; width: 100%; box-sizing: border-box; resize: vertical; min-height: 200px; max-height: 600px; font-family: inherit; overflow-y: auto; }
.notes-body-input:focus { outline: none; border-color: var(--teal); }
.notes-composer-actions { display: flex; align-items: center; gap: 14px; }
.note-card.free { border-left: 3px solid var(--violet); cursor: default; }
.note-edit { background: none; border: 1px solid var(--card-border); color: var(--teal); border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 44px; }
.note-edit:active { transform: scale(.96); }
.note-foot { flex-wrap: wrap; }
/* ---------- handwriting canvas (2026-10-10: Apple Pencil support) ---------- */
.notes-mode-seg { margin-bottom: 2px; }
.notes-draw-wrap.hidden { display: none; }
.notes-draw-wrap { display: flex; flex-direction: column; gap: 8px; }
.draw-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; padding: 8px 10px; }
.draw-tool { width: 44px; height: 44px; border-radius: 10px; border: 1px solid transparent; background: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.draw-tool.active { border-color: var(--teal); background: var(--teal-soft); }
.draw-sep { width: 1px; height: 28px; background: var(--card-border); margin: 0 4px; }
.draw-color { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; background: var(--c); background-clip: padding-box; cursor: pointer; position: relative; }
.draw-color::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--c); }
.draw-color.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--c); }
.notes-canvas { width: 100%; height: 400px; background: #fff; border-radius: 12px; border: 1px solid var(--card-border); touch-action: none; cursor: crosshair; display: block; }
.draw-hint { font-size: 12px; color: var(--muted); text-align: center; }
.note-drawing { width: 100%; border-radius: 10px; margin-top: 8px; background: #fff; display: block; }
@media (max-width: 480px) {
  .notes-canvas { height: 240px; }
}
@media (max-width: 480px) {
  .notes-toolbar { flex-direction: column; }
  .notes-new-btn { width: 100%; }
  .note-foot { gap: 8px; }
}

/* ---------- performance dashboard (home) ---------- */
.dash-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; margin: 4px 0 18px; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.dash-title { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.dash-track { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.dash-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 16px 6px 8px; line-height: 1.5; }
.dash-sub { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 14px 0 10px; }
.dash-cats { display: grid; gap: 10px; }
.dash-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.dash-cat { font-size: 13.5px; font-weight: 700; }
.dash-count { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-bar { height: 9px; border-radius: 99px; background: var(--bg2); overflow: hidden; border: 1px solid var(--card-border); }
.dash-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
.dash-trend { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.trend-wrap { height: 64px; width: 100%; max-width: 46px; display: flex; align-items: flex-end; justify-content: center; }
.trend-bar { width: 100%; border-radius: 6px; min-height: 5px; }
.trend-day { font-size: 11px; font-weight: 700; color: var(--muted); }
.dash-weakest { display: grid; gap: 8px; }
.dash-weak { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 14px; padding: 11px 12px; }
.dash-weak-info { display: flex; flex-direction: column; gap: 2px; }
.dash-weak-acc { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.drill-btn { flex: none; appearance: none; border-radius: 14px; padding: 11px 18px; font-size: 14px; font-weight: 700; color: #04211d; background: linear-gradient(135deg, var(--teal), #14b8a6); border: 0; cursor: pointer; box-shadow: 0 6px 18px var(--teal-glow); }
.drill-btn:active { transform: scale(.97); }

/* === FEATURE: CASES ===
   Unfolding case studies: library cards, intro screen (scenario + exhibit
   tabs), in-quiz scenario toggle, and the case results review list.
   Dark futuristic, teal accent, big touch targets. */
.case-title { color: var(--teal); }
.cases-intro { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.case-list { display: grid; gap: 14px; }
.case-card { appearance: none; display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; cursor: pointer; color: var(--ink); transition: transform .08s ease, border-color .15s ease; }
.case-card:active { transform: scale(.98); }
.case-card:hover { border-color: var(--teal); }
.case-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 5px 10px; border-radius: 999px; margin-bottom: 10px; }
.case-badge.rn { background: var(--teal-soft); color: var(--teal); border: 1px solid rgba(45,212,191,.4); }
.case-badge.pn { background: var(--violet-soft); color: var(--violet); border: 1px solid rgba(167,139,250,.4); }
.case-card-title { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.case-card-meta { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.case-card-go { font-weight: 800; font-size: 15px; color: var(--teal); }
.case-empty { background: var(--card); border: 1px dashed var(--card-border); border-radius: var(--radius); padding: 28px 20px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
.case-intro-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px; }
.case-intro-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.case-intro-top .case-badge { margin-bottom: 0; }
.case-count { color: var(--muted); font-size: 13px; font-weight: 700; }
.case-intro-title { font-size: 23px; font-weight: 800; margin: 0 0 14px; }
.case-scenario-box, .case-scenario { background: var(--bg2); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.case-scenario-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
.case-scenario-text { font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
.case-intro-note { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 14px 0 18px; }
.case-intro-card .btn.primary { width: 100%; }
#case-intro-exhibits { margin-bottom: 6px; }
/* case results: per-item review */
.case-review { margin-top: 22px; }
.case-review-title { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.case-review-item { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.case-review-item.hit { border-left: 4px solid var(--good); }
.case-review-item.missed { border-left: 4px solid var(--bad); }
.case-review-top { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; color: var(--ink); padding: 15px 16px; font-size: 15px; cursor: pointer; text-align: left; }
.case-review-mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; background: var(--bg2); }
.case-review-item.hit .case-review-mark { color: var(--good); }
.case-review-item.missed .case-review-mark { color: var(--bad); }
.case-review-q { flex: 1; line-height: 1.45; }
.case-review-chev { color: var(--muted); font-size: 20px; }
.case-review-body { padding: 0 16px 16px; }

/* ---------- share sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 125; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(2,6,18,.7); }
.sheet-card { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.sheet-title { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.sheet-sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.sheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sheet-opt { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.sheet-ico { font-size: 20px; }
.sheet-copy { width: 100%; margin-bottom: 8px; }
.sheet-close { width: 100%; }
/* ---------- study plans ---------- */
.plans-body { padding-bottom: 48px; }
.plans-intro { color: var(--muted); margin: 4px 0 14px; }
.plan-cards { display: grid; gap: 10px; }
.plan-card { text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; color: var(--ink); cursor: pointer; }
.plan-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); border-radius: 8px; padding: 3px 8px; margin-bottom: 6px; }
.plan-months { font-size: 17px; font-weight: 800; }
.plan-desc { color: var(--muted); font-size: 13px; margin-top: 4px; }
.plans-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.plans-progress { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.plans-progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); border-radius: 99px; transition: width .3s; }
.plans-days { display: grid; gap: 8px; }
.plan-day { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 12px; }
.plan-day.today { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-glow); }
.plan-day.done { opacity: .55; }
.plan-day.done .plan-focus { text-decoration: line-through; }
.plan-check { position: relative; flex-shrink: 0; margin-top: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.plan-check input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.plan-check .box { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--bg2); color: transparent; font-weight: 800; }
.plan-check input:checked + .box { background: var(--teal); border-color: var(--teal); color: #04202b; }
.plan-day-main { flex: 1; min-width: 0; }
.plan-day-top { font-size: 12px; margin-bottom: 2px; }
.today-pill { background: var(--teal-soft); color: var(--teal); border-radius: 99px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.plan-focus { font-weight: 700; }
.plan-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.plan-note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.btn.small { padding: 8px 12px; font-size: 13px; flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* ---------- admin dashboard ---------- */
.admin-body { padding-bottom: 48px; }
.admin-loading, .admin-404 { text-align: center; padding: 60px 20px; color: var(--muted); }
.admin-404 h2 { color: var(--ink); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.admin-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.admin-card h3 { margin: 0 0 10px; font-size: 15px; }
.admin-num { font-size: 28px; font-weight: 800; }
.admin-lbl { color: var(--muted); font-size: 12px; }
.admin-num.good { color: var(--good); }
.admin-rule { background: var(--bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre; }
.abars { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.abar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.abar-fill { width: 100%; max-width: 14px; background: linear-gradient(180deg, var(--teal), var(--teal-deep)); border-radius: 3px 3px 0 0; min-height: 2px; }
.abar-lbl { font-size: 8px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--card-border); }
.admin-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.good { color: var(--good); }
.bad { color: var(--bad); }
/* ---------- study beats mini-player ---------- */
.beats-player { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 8px; background: rgba(13,22,48,.92); border: 1px solid var(--card-border); border-radius: 99px; padding: 6px 10px 6px 6px; backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0,0,0,.45); max-width: calc(100vw - 92px); overflow: hidden; }
.beats-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--teal); color: #04202b; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
/* Expand tap target to 44px without changing the compact visual size. */
.beats-btn::after { content: ""; position: absolute; inset: -6px; }
.beats-btn.small { width: 28px; height: 28px; font-size: 13px; background: var(--bg2); color: var(--ink); border: 1px solid var(--card-border); }
.beats-meta { line-height: 1.25; min-width: 0; }
.beats-title { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.beats-track { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beats-vol { width: 70px; accent-color: var(--teal); }
.beats-hide { font-size: 16px; line-height: 1; }
.beats-fab { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--card-border); background: rgba(13,22,48,.92); color: var(--ink); font-size: 20px; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.beats-fab.hidden, .beats-player.hidden { display: none; }
/* 2026-10-11 QA sweep P1: the fixed beats player (~58px bottom zone) was covering
   quiz answer controls on tall questions. While visible, the quiz screen carries
   bottom clearance so every option and the Next button stay tappable. */
body.beats-visible #screen-quiz { padding-bottom: 84px; }
/* ---------- drawer: NCLEX outcome self-report ---------- */
.drawer-feature-title { font-weight: 800; margin-bottom: 6px; }
.small { font-size: 12px; }
#outcome-seg { margin: 8px 0; }
#outcome-date { margin-bottom: 8px; }
.drawer-outcome-done { font-size: 14px; }

/* ============ SOCIAL (Rivals) ============ */
#drawer-username-box { padding: 12px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: var(--radius); margin-bottom: 10px; }
.uname-row { display: flex; align-items: center; gap: 2px; }
.uname-at { font-weight: 800; color: var(--teal); font-size: 17px; }
.uname-input { flex: 1; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; color: var(--ink); padding: 12px; font-size: 16px; min-width: 0; }
.uname-actions { margin-top: 8px; display: flex; gap: 8px; }
.uname-msg { font-size: 13px; margin-top: 8px; min-height: 18px; }
.uname-msg.err { color: #f87171; }
.uname-msg.ok { color: var(--teal); }

.rivals-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rival-tab { flex: 1; border: 1px solid var(--card-border); background: var(--bg2); color: var(--muted); border-radius: 12px; padding: 12px 4px; font-size: 14px; font-weight: 700; cursor: pointer; }
.rival-tab.active { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.rivals-toggles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rivals-toggles .seg { justify-content: center; flex-wrap: wrap; }

.my-rank-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(45,212,191,.14), rgba(167,139,250,.08)); border: 1px solid rgba(45,212,191,.4); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.rank-big { font-size: 28px; font-weight: 800; color: var(--teal); }
.rank-stats { flex: 1; font-size: 15px; }
.rank-stats strong { font-size: 18px; }

.board-list { display: flex; flex-direction: column; gap: 6px; }
.board-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; color: var(--ink); font-size: 15px; cursor: pointer; }
.board-row.me { border-color: var(--teal); background: var(--teal-soft); }
.board-medal { width: 30px; text-align: center; font-size: 18px; }
.rank-n { color: var(--muted); font-weight: 700; font-size: 14px; }
.board-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.chev { color: var(--muted); font-size: 18px; }

.rivals-add { display: flex; gap: 8px; margin-bottom: 8px; }
.rivals-add .uname-input { flex: 1; }
.friend-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.friend-name { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.friend-actions { display: flex; gap: 6px; flex-shrink: 0; }

.rivals-empty { text-align: center; padding: 40px 20px; }
.rivals-empty h3 { margin: 12px 0 8px; }

.profile-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; margin-top: 10px; }
.profile-name { font-size: 22px; font-weight: 800; }
.profile-sub { font-size: 13px; margin: 4px 0 12px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-grid > div { background: var(--bg2); border-radius: 10px; padding: 12px; text-align: center; }
.profile-grid strong { display: block; font-size: 19px; color: var(--teal); }
.profile-grid span { font-size: 12px; color: var(--muted); }
.profile-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.profile-actions .btn.primary { flex: 1; }

.trophy-shelf { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.trophy { font-size: 30px; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; padding: 8px 10px; }

.thread-list { display: flex; flex-direction: column; gap: 6px; }
.thread-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; color: var(--ink); cursor: pointer; }
.thread-name { font-weight: 700; font-size: 15px; }
.thread-preview { grid-column: 1; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-time { grid-row: 1; grid-column: 2; font-size: 12px; align-self: start; }

.chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chat-title { flex: 1; font-weight: 800; font-size: 17px; }
.chat-head-actions { display: flex; gap: 6px; }
.chat-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 12px; }
.chat-bubble { max-width: 78%; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 15px; align-self: flex-start; }
.chat-bubble.mine { align-self: flex-end; background: var(--teal-soft); border-color: var(--teal); border-radius: 14px 14px 4px 14px; }
.chat-bubble .chat-ts { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.chat-input-row { display: flex; gap: 8px; margin-top: 4px; }
.chat-input { flex: 1; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; color: var(--ink); padding: 14px; font-size: 16px; min-width: 0; }

.social-setup-card { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.5); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.social-setup-card details { margin-top: 8px; }
.social-setup-card summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 8px 0; }
.rules-box { width: 100%; min-height: 180px; background: #0b1220; color: #a5f3fc; border: 1px solid var(--card-border); border-radius: 8px; font-family: monospace; font-size: 11px; padding: 10px; margin: 8px 0; white-space: pre; }

/* ---------- left tab navigation (sidebar / mobile drawer) ---------- */
.sidenav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 110;
  background: var(--bg2); border-right: 1px solid var(--card-border);
  display: flex; flex-direction: column; padding: 22px 14px; gap: 6px;
  transform: translateX(-105%); transition: transform .28s cubic-bezier(.32,.72,.35,1);
}
body.nav-open .sidenav { transform: translateX(0); }
.nav-brand { display: flex; align-items: center; font-weight: 800; font-size: 19px; margin: 2px 6px 16px; }
.nav-brand .logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; margin-right: 9px;
  background: linear-gradient(135deg, var(--teal), #22d3ee);
  color: #04211d; font-size: 19px; font-weight: 900;
  box-shadow: 0 0 18px var(--teal-glow);
}
.nav-tab {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 14px; min-height: 54px; border-radius: 14px;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--ink); font-size: 16px; font-weight: 700; text-align: left;
  font-family: inherit;
}
.nav-tab .nav-ico { font-size: 21px; flex: none; }
.nav-tab.active {
  background: var(--teal-soft); border-color: var(--card-border); color: var(--teal);
  box-shadow: 0 0 16px var(--teal-glow);
}
.nav-foot { margin-top: auto; padding: 10px 6px 0; color: var(--muted); font-size: 12.5px; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 105; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--card); border: 1px solid var(--card-border);
  color: var(--ink); font-size: 20px; cursor: pointer; margin-right: 10px;
}
/* tab screen headers */
.tab-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 14px; }
.tab-head-title { font-size: 26px; font-weight: 800; letter-spacing: .2px; }
.tab-head-sub { color: var(--muted); font-size: 13.5px; }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 900px) {
  .sidenav { transform: none; }
  body { padding-left: 232px; }
  .nav-backdrop { display: none; }
  /* (2026-10-10 QA: removed body.pre-track padding-left:0 — the sidebar is now
     always visible on desktop, so content must always clear it) */
  /* Nav is NEVER hidden on any device (2026-10-10: hiding it during onboarding
     caused the menu button to vanish on phones). The onboarding screen still
     shows first; the track picker remains the prominent call to action. */
}
@media (max-width: 899px) {
  /* (nav-toggle always visible on mobile/tablet portrait) */
}

/* --- dropdown / cloze (2026-10-10) --- */
.dd-stem { font-size: 16px; line-height: 2.1; }
.dd-select { font: inherit; font-size: 15px; font-weight: 600; padding: 8px 10px; border-radius: 10px; border: 2px solid var(--card-border); background: var(--bg2); color: var(--ink); margin: 2px; max-width: 100%; cursor: pointer; }
.dd-select.picked { border-color: var(--teal); background: var(--teal-soft); }
.dd-select.correct { border-color: var(--good); background: rgba(52,211,153,.10); }
.dd-select.wrong { border-color: var(--bad); background: rgba(251,113,133,.10); }
.dd-select:disabled { cursor: default; opacity: 1; }

/* --- hotspot (2026-10-10) --- */
.hotspot-wrap { display: flex; justify-content: center; padding: 6px 0; }
.hs-svg { width: 100%; max-width: 300px; height: auto; touch-action: manipulation; }
.hs-body { fill: var(--bg2); stroke: #3b507f; stroke-width: 2; }
.hs-guide { stroke: #3b507f; stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.hs-landmark { fill: #3b507f; }
.hs-region { cursor: pointer; }
.hs-region .hs-hit { fill: rgba(45,212,191,.14); stroke: var(--teal); stroke-width: 2; }
.hs-region text { fill: var(--ink); font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.hs-region.picked .hs-hit { fill: rgba(45,212,191,.45); }
.hs-region.correct .hs-hit { fill: rgba(52,211,153,.45); stroke: var(--good); }
.hs-region.wrong .hs-hit { fill: rgba(251,113,133,.45); stroke: var(--bad); }
.hs-region.locked { cursor: default; }
/* GUIDES CSS — reuses card/chip conventions, study-vibe accent */
.guide-search-row { margin: 4px 0 10px; }
.guide-search {
  width: 100%; box-sizing: border-box; padding: 13px 16px;
  border: 1px solid var(--card-border); border-radius: var(--radius);
  background: var(--card); color: var(--ink); font-size: 15px;
}
.guide-search:focus { outline: none; border-color: var(--violet); }
.guide-count { color: var(--muted); font-size: 13px; margin: 6px 2px 10px; }
.guide-list { display: flex; flex-direction: column; gap: 10px; }
.guide-card {
  appearance: none; display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 16px; cursor: pointer; color: var(--ink);
  transition: transform .08s ease, border-color .15s ease;
}
.guide-card:active { transform: scale(.99); }
.guide-card:hover { border-color: var(--violet); }
.guide-card-top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.guide-sec { font-size: 12px; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: .04em; }
.guide-card-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.guide-card-sum { font-size: 14px; color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
.guide-card-meta { color: var(--muted); font-size: 12.5px; }
.guide-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.gd-title { font-weight: 800; font-size: 14px; margin: 12px 0 6px; color: var(--ink); }
.gd-title:first-child { margin-top: 0; }
.gd-list { margin: 0 0 8px; padding-left: 20px; }
.gd-list li { margin-bottom: 5px; font-size: 14px; line-height: 1.5; }
.gd-p { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.gd-row { display: flex; gap: 10px; font-size: 14px; margin-bottom: 6px; line-height: 1.5; }
.gd-k { font-weight: 700; min-width: 110px; color: var(--muted); flex-shrink: 0; }
.gd-v { flex: 1; }
.gd-antidote { margin: 10px 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; font-size: 14px; }
.gd-trap { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--amber, #f5a623); font-size: 14px; line-height: 1.5; }
.gd-note { margin: 8px 0; font-size: 13px; color: var(--muted); font-style: italic; line-height: 1.5; }
.gd-mne { font-size: 22px; font-weight: 800; letter-spacing: .1em; color: var(--violet); margin: 4px 0 8px; }
.guide-empty { text-align: center; color: var(--muted); padding: 32px 16px; font-size: 14px; }
/* ---------- learn tab ---------- */
.learn-paths { display: flex; flex-direction: column; gap: 10px; }
.learn-pathcard { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; color: var(--ink); cursor: pointer; }
.learn-pathicon { font-size: 30px; flex-shrink: 0; }
.learn-pathinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.learn-pathtitle { font-weight: 800; font-size: 16px; }
.learn-bar { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.learn-barfill { height: 100%; background: linear-gradient(90deg, var(--teal), #22d3ee); border-radius: 99px; transition: width .3s; }
.learn-pathhead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.learn-back { background: none; border: none; color: var(--teal); font-size: 15px; font-weight: 700; cursor: pointer; padding: 8px 0; margin-bottom: 4px; }
.learn-mod { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.learn-modhead { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; color: var(--ink); font-size: 15px; font-weight: 700; padding: 14px 16px; cursor: pointer; text-align: left; }
.learn-modlessons { border-top: 1px solid var(--card-border); }
.learn-lessonrow { display: flex; gap: 10px; align-items: center; width: 100%; background: none; border: none; border-bottom: 1px solid var(--card-border); color: var(--ink); font-size: 14px; padding: 12px 16px; cursor: pointer; text-align: left; }
.learn-lessonrow:last-child { border-bottom: none; }
.learn-check { flex-shrink: 0; }
.learn-lesson { display: flex; flex-direction: column; gap: 14px; }
.learn-crumb { color: var(--muted); font-size: 13px; }
.learn-title { font-size: 22px; font-weight: 800; margin: 0; line-height: 1.3; }
.learn-sect { font-weight: 800; font-size: 14px; color: var(--teal); margin-bottom: 8px; }
.learn-obj, .learn-key, .learn-src { background: var(--bg2); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px; }
.learn-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.learn-p { font-size: 15px; line-height: 1.65; margin: 0 0 10px; }
.learn-h { font-weight: 800; font-size: 16px; margin: 14px 0 8px; color: var(--ink); }
.learn-bodytext { font-size: 15px; line-height: 1.65; }
.learn-mne { background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.35); border-radius: 12px; padding: 14px; font-size: 14px; line-height: 1.5; }
.learn-src a { color: var(--teal); }
.learn-actions { display: flex; flex-direction: column; gap: 10px; }
.learn-nav { display: flex; justify-content: space-between; gap: 10px; }
.learn-nav .btn { flex: 1; }
.learn-hit { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; color: var(--ink); cursor: pointer; }
.learn-hit-path { color: var(--muted); font-size: 12px; }
.learn-hit-title { font-weight: 700; font-size: 14px; }
.learn-list2 { display: flex; flex-direction: column; gap: 8px; }
/* ---------- AI assistant ---------- */
.asst-fab { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--teal); background: rgba(13,22,48,.95); cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 16px var(--teal-glow); padding: 0; overflow: hidden; }
.asst-fab-img { width: 100%; height: 100%; object-fit: cover; }
@keyframes asst-pulse { 0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 16px var(--teal-glow); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 28px var(--teal-glow); } }
.asst-fab { animation: asst-pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .asst-fab { animation: none; } }
/* Desktop/tablet-landscape: the persistent 232px sidebar (z-index 110) would
   cover the FAB + panel — shift them right of it and above it.
   (2026-10-10: Drill panel opened hidden behind the sidebar — Ivan-caught P0) */
@media (min-width: 900px) {
  .asst-fab { left: calc(232px + 12px); z-index: 120; }
  .asst-panel { left: calc(232px + 12px); z-index: 120; }
}
.asst-head-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: -7px; margin-right: 4px; }
.asst-panel { position: fixed; left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 95; width: min(360px, calc(100vw - 24px)); max-height: min(520px, 70vh); display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 60px rgba(0,0,0,.6); }
.asst-panel.hidden { display: none; }
.asst-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--card-border); background: var(--card); }
.asst-title { font-weight: 800; font-size: 15px; }
.asst-grip { color: var(--muted); font-size: 12px; letter-spacing: 1px; margin-left: 4px; opacity: .7; }
.asst-x { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.asst-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
/* Short landscape phones: shrink the chat so the input row never clips. */
@media (max-height: 480px) {
  .asst-panel { max-height: calc(100vh - 100px); bottom: calc(70px + env(safe-area-inset-bottom)); }
  .asst-msgs { min-height: 60px; }
  /* Calculator: scale down so it doesn't swallow a 390px-tall viewport. */
  .calc { width: 200px; padding: 8px; right: 10px; bottom: 10px; }
  .calc-display { font-size: 18px; padding: 8px; margin-bottom: 6px; }
  .calc-keys button { font-size: 15px; padding: 8px 0; }
  /* Notes canvas: cap height so the composer fits without endless scroll. */
  .notes-canvas { height: 200px; }
}
.asst-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.asst-msg.bot { background: var(--card); border: 1px solid var(--card-border); align-self: flex-start; border-bottom-left-radius: 4px; }
.asst-msg.user { background: var(--teal-soft); border: 1px solid var(--teal); align-self: flex-end; border-bottom-right-radius: 4px; }
.asst-msg a { color: var(--teal); }
.asst-chips { display: flex; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }
.asst-chip { background: var(--card); border: 1px solid var(--card-border); color: var(--ink); border-radius: 99px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.asst-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--card-border); }
.asst-input { flex: 1; background: var(--card); border: 1px solid var(--card-border); border-radius: 99px; color: var(--ink); padding: 10px 14px; font-size: 14px; min-width: 0; }
.asst-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--teal); color: #04202b; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.asst-foot { padding: 6px 12px 10px; color: var(--muted); font-size: 11px; text-align: center; }
.asst-card { background: var(--bg2); border: 1px solid var(--teal); border-radius: 14px; padding: 18px 14px; text-align: center; cursor: pointer; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.asst-card-count { color: var(--muted); font-size: 12px; }
.asst-card-front { font-size: 15px; }
.asst-card-back { font-size: 14px; line-height: 1.55; }
.asst-cardnav { display: flex; gap: 6px; margin-top: 10px; justify-content: center; flex-wrap: wrap; }
.study-vibe .guide-sec { color: var(--violet); }
.study-vibe .gd-mne { color: var(--violet); }
@media (max-width: 380px) { .calc { width: calc(100vw - 32px); } }

#app-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a2450; color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 15px; opacity: 0; transition: opacity .3s, transform .3s; z-index: 9999; pointer-events: none; max-width: 90vw; text-align: center; }
#app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Inline text-button for empty states (quiz builder filter reset). */
.linklike { background: none; border: none; padding: 0; color: var(--teal); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; min-height: 44px; }