/* PharosPrep — all application styles */
/* Extracted from index.html */

/* ─── TOKENS ──────────────────────────────────────────────────────── */
    :root {
      --bg:#f0f2f5; --bg2:#ffffff; --bg3:#e4e7ec;
      --surface:#ffffff; --surface2:#f4f6f9;
      --border:rgba(0,0,0,0.09); --border2:rgba(0,0,0,0.16);
      --accent:#2563eb; --accent2:#3b82f6; --accent-glow:rgba(37,99,235,0.08);
      --gold:#b07d2a; --gold-dim:rgba(175,125,42,0.12);
      --green:#059669; --green-dim:rgba(5,150,105,0.10);
      --red:#dc2626; --red-dim:rgba(220,38,38,0.09);
      --yellow:#d97706; --yellow-dim:rgba(217,119,6,0.10);
      --text:#111827; --text2:#374151; --text3:#6b7280;
      --read-bg:#ffffff; --read-bg2:#f4f6f9; --read-text:#111827; --read-text2:#374151; --read-border:rgba(0,0,0,0.10);
      --font-d:'Playfair Display',Georgia,serif; --font-b:'Inter',system-ui,sans-serif; --font-m:'IBM Plex Mono',monospace;
      --brand:#c9a84c; --brand-dim:rgba(201,168,76,0.14);
      --r:12px; --rl:20px; --nav:240px; --tr:0.2s cubic-bezier(.4,0,.2,1);
    }
    /* ─── DARK MODE TOKENS ──────────────────────────────────────────── */
    [data-theme="dark"] {
      --bg:#0a0f1e; --bg2:#0d1526; --bg3:#111d35;
      --surface:#0d1526; --surface2:#142040;
      --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.14);
      --accent:#3b82f6; --accent2:#60a5fa; --accent-glow:rgba(59,130,246,0.15);
      --gold:#c9a84c; --gold-dim:rgba(201,168,76,0.15);
      --green:#10b981; --green-dim:rgba(16,185,129,0.13);
      --red:#ef4444; --red-dim:rgba(239,68,68,0.13);
      --yellow:#f59e0b; --yellow-dim:rgba(245,158,11,0.13);
      --text:#e8edf8; --text2:#a8b8d0; --text3:#6b7f9e;
      --read-bg:#0a0f1e; --read-bg2:#0d1a30; --read-text:#e8edf8; --read-text2:#a8b8d0; --read-border:rgba(255,255,255,0.08);
      --brand:#c9a84c; --brand-dim:rgba(201,168,76,0.18);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html,body{height:100%;overflow:hidden;}
    body{font-family:var(--font-b);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
    button{cursor:pointer;font-family:var(--font-b);border:none;background:none;}
    ul{list-style:none;}

    /* ─── LAYOUT ──────────────────────────────────────────────────────── */
    #app{display:flex;height:100vh;overflow:hidden;}

    /* ─── SIDEBAR ─────────────────────────────────────────────────────── */
    #sidebar{width:var(--nav);min-width:var(--nav);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:10;}
    .sb-logo{padding:28px 24px 20px;border-bottom:1px solid var(--border);}
    .sb-logo .mark{font-family:var(--font-d);font-size:22px;font-weight:800;letter-spacing:-.5px;}
    .sb-logo .mark span{color:var(--brand);}
    .sb-logo .sub{font-size:11px;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-top:2px;font-family:var(--font-m);}
    .sb-badge{margin:16px 16px 8px;background:var(--accent-glow);border:1px solid rgba(59,130,246,.3);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px;}
    .sb-badge .icon{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;font-family:var(--font-d);color:#fff;flex-shrink:0;}
    .sb-badge .name{font-size:13px;font-weight:600;color:var(--text);font-family:var(--font-d);}
    .sb-badge .desc{font-size:11px;color:var(--text2);}
    .sb-nav{flex:1;padding:8px 12px;overflow-y:auto;}
    .nav-lbl{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:16px 8px 6px;font-family:var(--font-m);}
    .nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text2);transition:all var(--tr);cursor:pointer;margin-bottom:2px;border:1px solid transparent;}
    .nav-item:hover{background:var(--surface);color:var(--text);}
    .nav-item.active{background:var(--brand-dim);color:var(--brand);border-color:rgba(201,168,76,.25);}
    .nav-item .ni{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .nav-item .nb{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;font-family:var(--font-m);}
    /* ── Study Schedule ────────────────────────────────────────────── */
    .sched-cal-hdr{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);}
    .sched-cal-hdr div{padding:6px 0;text-align:center;font-size:10px;font-weight:700;color:var(--text3);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.06em;}
    .sched-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
    .sched-day{min-height:58px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px 6px;font-size:11px;cursor:pointer;transition:background .12s;}
    .sched-day:hover{background:var(--surface2);}
    .sched-day:nth-child(7n){border-right:none;}
    .sched-day.empty{cursor:default;background:transparent;}
    .sched-day.empty:hover{background:transparent;}
    .sched-day.today{background:var(--accent-glow);border-color:rgba(59,130,246,.3);}
    .sched-day.past{opacity:.45;}
    .sched-day-num{font-family:var(--font-m);font-weight:700;color:var(--text3);margin-bottom:2px;font-size:11px;}
    .sched-day.today .sched-day-num{color:var(--accent2);}
    .sched-pill{display:inline-block;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;line-height:1.5;color:#fff;margin-bottom:2px;width:100%;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sched-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);}
    .sched-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
    .sched-today-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--rl);padding:20px 24px;margin-bottom:16px;border-left:3px solid var(--accent);}
    /* ── Admin UI ───────────────────────────────────────────────────── */
    .adm-toggle-pill{display:none;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;padding:5px 12px 5px 8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--accent2);font-family:var(--font-m);transition:background .15s;}
    .adm-toggle-pill:hover{background:var(--surface2);}
    .adm-toggle-pill .adm-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);flex-shrink:0;}
    .adm-toggle-pill.user-mode{color:var(--text3);border-color:var(--border);}
    .adm-toggle-pill.user-mode .adm-dot{background:var(--text3);}
    #screen-admin .adm-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
    .adm-tbl{width:100%;border-collapse:collapse;font-size:13px;}
    .adm-tbl th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-m);border-bottom:1px solid var(--border);white-space:nowrap;}
    .adm-tbl td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle;}
    .adm-tbl tbody tr{cursor:pointer;transition:background .12s;}
    .adm-tbl tbody tr:hover{background:var(--surface2);}
    .adm-tbl tbody tr:last-child td{border-bottom:none;}
    .adm-prog-bar{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;width:80px;display:inline-block;vertical-align:middle;margin-right:6px;}
    .adm-prog-fill{height:100%;border-radius:3px;background:var(--accent);}
    .adm-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;font-family:var(--font-m);}
    .adm-badge.pass{background:var(--green-dim);color:var(--green);}
    .adm-badge.fail{background:var(--red-dim);color:var(--red);}
    .adm-badge.pending{background:var(--bg3);color:var(--text3);}
    .adm-drill-section{margin-bottom:20px;}
    .adm-drill-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-m);margin-bottom:8px;}
    .adm-drill-val{font-size:15px;font-weight:600;color:var(--text);}
    .adm-drill-sub{font-size:12px;color:var(--text3);margin-top:2px;}
    .sb-foot{padding:16px;border-top:1px solid var(--border);}
    .hm-cell{border-radius:8px;padding:10px 12px;cursor:pointer;transition:opacity var(--tr);display:flex;flex-direction:column;gap:4px;}
    .hm-cell:hover{opacity:.8;}
    .hm-name{font-size:11px;line-height:1.3;font-weight:500;}
    .hm-pct{font-family:var(--font-m);font-size:13px;font-weight:700;}
    .readiness-mini{background:var(--surface);border-radius:10px;padding:12px;}
    .readiness-mini .rl{font-size:11px;color:var(--text3);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
    .mini-bar{height:4px;background:var(--bg);border-radius:2px;overflow:hidden;margin-bottom:6px;}
    .mini-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;transition:width .6s ease;}
    .mini-stats{display:flex;justify-content:space-between;font-size:11px;color:var(--text2);font-family:var(--font-m);}

    /* ─── MAIN ────────────────────────────────────────────────────────── */
    #main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
    #topbar{height:60px;min-height:60px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:16px;}

    /* ── Mobile sidebar + bottom tab bar ─────────────────────────── */
    #sb-hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--text);flex-shrink:0;}
    #sb-hamburger svg{display:block;}
    #sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;}

    /* Bottom tab bar */
    #bottom-tabs{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--bg2);border-top:1px solid var(--border);z-index:30;align-items:stretch;}
    .btab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text3);transition:color var(--tr);border:none;background:none;padding:0;font-family:var(--font-m);}
    .btab:hover,.btab.active{color:var(--brand);}
    .btab .bt-icon{font-size:18px;line-height:1;}
    .btab .bt-lbl{font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;}

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE — TABLET + MOBILE  (≤ 768px)
       ═══════════════════════════════════════════════════════════════ */
    @media(max-width:768px){
      /* ── Layout shell ── */
      #sidebar{position:fixed;top:0;left:0;height:100%;z-index:50;transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.4);}
      #sidebar.sb-open{transform:translateX(0);}
      #sb-overlay.sb-open{display:block;}
      #sb-hamburger{display:flex;align-items:center;justify-content:center;}
      #bottom-tabs{display:flex;}
      #topbar{padding:0 16px;gap:10px;}
      #content{height:calc(100vh - 120px);padding:16px;padding-bottom:80px;}

      /* ── Topbar: slim down for mobile ── */
      .tb-stat,.tb-div{display:none;}
      /* Hide the page title + subtitle entirely on mobile.
         Bottom tabs already show which section you're in.
         The hamburger label "Home" next to the icon created confusion. */
      .tb-title, .tb-sub { display:none; }
      /* Shrink Quick Study button */
      #quick-btn{padding:6px 10px;font-size:12px;}
      .adm-toggle-pill{display:none;}

      /* ── Question meta: keep only the Q# during sessions ── */
      /* Topic pill, question type (MC/TF), and tier (T1/T2/T3) add noise
         while answering. Only the identifier number stays — for referencing
         in comments/reports. All metadata surfaces on the results screen. */
      .q-topic, .q-type, .drill-tier-info { display:none; }

      /* ── Dashboard grids ── */
      .g3{grid-template-columns:1fr 1fr;}
      .g2w{grid-template-columns:1fr;}
      .cov-grid{grid-template-columns:repeat(2,1fr);}
      #dash-topic-heatmap{grid-template-columns:repeat(2,1fr);}
      #screen-admin .adm-stat-row{grid-template-columns:1fr 1fr;}

      /* ── Practice: mode cards stack to 2 cols ── */
      .mode-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
      .mode-name{font-size:12px;}
      .mode-card{padding:18px 12px;}
      .mode-icon{font-size:22px;margin-bottom:6px;}

      /* ── Drill: count buttons wrap, custom input full width ── */
      .drill-count-row{flex-wrap:wrap;gap:8px;}
      .drill-count-btns{flex-wrap:wrap;}
      #drill-count-custom{width:100%;margin-top:4px;}

      /* ── Training: topic cards 2 cols ── */
      #tr-topic-select .g3{grid-template-columns:1fr 1fr;}

      /* ── Textbook: two-view model — no grid to adjust ── */

      /* ── Question / answer options: full width, bigger touch targets ── */
      .opt-btn{padding:14px 14px;font-size:14px;min-height:48px;}
      .q-card{padding:16px;}

      /* ── Modals: full-screen on mobile ── */
      #sp-overlay{align-items:flex-end;}
      #sp-modal{width:100%;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;}
      #drill-overlay,#exam-overlay{padding:0;}

      /* ── Daily + diagnostic overlays: bottom-sheet on mobile ── */
      #daily-session-overlay,#diagnostic-overlay{align-items:flex-end;}
      #daily-session-overlay .modal-box,#diagnostic-overlay .modal-box{width:100%;max-width:100%;border-radius:16px 16px 0 0;max-height:92vh;}

      /* ── SRS banner: stack button below text on mobile ── */
      #dash-srs-banner .btn{width:100%;justify-content:center;}

      /* ── Flash cards: full width ── */
      .fc-card-wrap{width:100%;padding:0;}
      .fc-front,.fc-back{min-height:200px;padding:24px 20px;}

      /* ── Exam readiness: wrap numbers on small screens ── */
      .readiness-mini .mini-stats{flex-wrap:wrap;gap:8px;}

      /* ── Settings: full-width sections ── */
      .settings-grid,.g2{grid-template-columns:1fr;}

      /* ── Study schedule calendar: keep 7 cols but smaller ── */
      .sched-cal-hdr,.sched-cal-grid{font-size:11px;}

      /* ── Progress topic rows: abbreviate layout ── */
      .topic-row .tn{font-size:12px;}
    }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE — SMALL PHONES  (≤ 480px)
       ═══════════════════════════════════════════════════════════════ */
    @media(max-width:480px){
      /* ── Single-column everything ── */
      .g3,.g2,.g2w,.cov-grid{grid-template-columns:1fr;}
      .mode-grid{grid-template-columns:repeat(2,1fr);}
      #dash-topic-heatmap{grid-template-columns:repeat(2,1fr);}

      /* ── Admin pill hidden at ≥768px (see 768px block) ── */

      /* ── Content padding tighter ── */
      #content{padding:12px;padding-bottom:80px;}

      /* ── Slide modal: truly full screen ── */
      #sp-modal{max-height:100vh;border-radius:0;}

      /* ── Drill count buttons: wrap to 3 per row ── */
      .drill-count-btn{min-width:52px;}

      /* ── Bigger section headings are readable without being huge ── */
      h2,h3{font-size:clamp(16px,4vw,22px);}

      /* ── Coverage legend: wrap on tiny screens ── */
      .cov-legend{flex-wrap:wrap;gap:8px 12px;}
    }
    .tb-title{font-family:var(--font-d);font-size:18px;font-weight:700;}
    .tb-sub{font-size:13px;color:var(--text3);margin-left:4px;}
    .tb-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
    .tb-stat{display:flex;flex-direction:column;align-items:flex-end;}
    .tb-stat .sv{font-family:var(--font-m);font-size:16px;font-weight:500;}
    .tb-stat .sl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;}
    .tb-div{width:1px;height:28px;background:var(--border2);}
    #content{flex:1;min-height:0;height:calc(100vh - 60px);overflow-y:scroll;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:28px;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;}
    #content::-webkit-scrollbar{width:6px;}
    #content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

    /* ─── BUTTONS ─────────────────────────────────────────────────────── */
    .btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;transition:all var(--tr);letter-spacing:.01em;}
    .btn-primary{background:var(--brand);color:#0a1628;}
    .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 16px var(--brand-dim);}
    .btn-ghost{background:var(--surface);color:var(--text2);border:1px solid var(--border);}
    .btn-ghost:hover{background:var(--surface2);color:var(--text);}
    .btn-sm{padding:5px 12px;font-size:12px;}

    /* ─── SCREENS ─────────────────────────────────────────────────────── */
    .screen{display:none;animation:fadeIn .22s ease;}
    .screen.active{display:block;}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
    @keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.15)}70%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}

    /* ─── CARDS ───────────────────────────────────────────────────────── */
    .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px;}
    .card-title{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;}
    .card-title-lg{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--text);}
    .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px 24px;position:relative;overflow:hidden;}
    .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
    .stat-card.blue::before{background:linear-gradient(90deg,var(--accent),var(--accent2));}
    .stat-card.green::before{background:linear-gradient(90deg,var(--green),#34d399);}
    .stat-card.gold::before{background:linear-gradient(90deg,var(--brand),#e5c060);}
    .stat-card.red::before{background:linear-gradient(90deg,var(--red),#f87171);}
    .stat-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-family:var(--font-m);margin-bottom:10px;}
    .stat-num{font-family:var(--font-d);font-size:36px;font-weight:800;line-height:1;margin-bottom:6px;}
    .stat-num.blue{color:var(--accent2);}
    .stat-num.green{color:var(--green);}
    .stat-num.gold{color:var(--gold);}
    .stat-num.red{color:var(--red);}
    .stat-chg{font-size:12px;color:var(--text3);}
    .stat-chg.up{color:var(--green);}
    .stat-chg.down{color:var(--red);}

    /* ─── GRID HELPERS ────────────────────────────────────────────────── */
    .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px;}
    .g2w{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px;}
    .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}

    /* ─── RECOMMENDER ─────────────────────────────────────────────────── */
    .rec-card{background:var(--surface);border:1px solid var(--border2);border-top:3px solid var(--brand);border-radius:var(--rl);padding:24px;position:relative;overflow:hidden;}

    .rec-title{font-family:var(--font-d);font-size:18px;font-weight:800;margin-bottom:4px;}
    .rec-sub{font-size:13px;color:var(--text2);margin-bottom:20px;}
    .rec-actions{display:flex;gap:10px;flex-wrap:wrap;}
    .rec-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--tr);border:1px solid;}
    .rec-btn.pri{background:var(--brand);border-color:var(--brand);color:#0a1628;}
    .rec-btn.pri:hover{filter:brightness(1.08);transform:translateY(-1px);}
    .rec-btn.sec{background:transparent;border-color:var(--border2);color:var(--text2);}
    .rec-btn.sec:hover{background:var(--surface2);color:var(--text);}

    /* ─── TOPIC ROW ───────────────────────────────────────────────────── */
    .topic-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
    .topic-row:last-child{border-bottom:none;}
    .topic-row .tn{flex:1;font-size:13px;font-weight:500;}
    .topic-row .ts{font-family:var(--font-m);font-size:13px;font-weight:500;min-width:36px;text-align:right;}
    .topic-row .tb{width:80px;height:4px;background:var(--bg);border-radius:2px;overflow:hidden;}
    .topic-row .tf{height:100%;border-radius:2px;}

    /* ─── SCORE HISTORY ───────────────────────────────────────────────── */
    .sh-chart{display:flex;align-items:flex-end;gap:4px;height:60px;margin-top:8px;}
    .sh-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;}
    .sh-bar{width:100%;border-radius:3px 3px 0 0;min-height:4px;}
    .sh-lbl{font-size:9px;color:var(--text3);font-family:var(--font-m);}

    /* ─── COVERAGE GRID ───────────────────────────────────────────────── */
    .cov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
    .cov-item{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px;cursor:pointer;transition:all var(--tr);}
    .cov-item:hover{border-color:var(--accent);}
    .cov-name{font-size:11px;color:var(--text2);margin-bottom:6px;line-height:1.3;}
    .cov-bar{height:3px;background:var(--bg);border-radius:2px;overflow:hidden;margin-bottom:4px;}
    .cov-fill{height:100%;border-radius:2px;}
    .cov-pct{font-size:10px;color:var(--text3);font-family:var(--font-m);}

    /* ─── STREAK ──────────────────────────────────────────────────────── */
    .streak-dots{display:flex;gap:6px;margin-top:8px;}
    .sd{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-family:var(--font-m);color:var(--text3);}
    .sd.done{background:var(--green-dim);color:var(--green);}
    .sd.today{background:var(--accent-glow);color:var(--accent2);border:1px solid rgba(59,130,246,.4);}
    .sd.empty{background:var(--bg3);}

    /* ─── QUESTION COMPONENT ──────────────────────────────────────────── */
    .q-card{background:var(--read-bg);border:1px solid var(--read-border);border-radius:var(--rl);padding:28px 32px;margin-bottom:16px;}
    .q-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
    .q-num{font-family:var(--font-m);font-size:11px;color:var(--read-text2);background:rgba(10,18,70,0.09);padding:3px 10px;border-radius:20px;}
    .q-topic{font-family:var(--font-m);font-size:11px;color:var(--read-text2);background:rgba(10,18,70,0.09);padding:3px 10px;border-radius:20px;}
    .q-type{font-family:var(--font-m);font-size:11px;padding:3px 10px;border-radius:20px;}
    .q-type.mc{background:rgba(59,130,246,0.14);color:#1a3d8a;}
    .q-type.tf{background:rgba(245,158,11,0.15);color:#7a4800;}
    .q-type.scenario{background:rgba(139,92,246,0.15);color:#4c1d95;}
    .q-type.t1{background:rgba(16,185,129,0.15);color:#065f3a;}
    .q-type.t2{background:rgba(59,130,246,0.14);color:#1a3d8a;}
    .q-type.t3{background:rgba(245,158,11,0.15);color:#7a4800;}
    .rn-statements{margin:0 0 16px;padding:12px 16px;background:rgba(10,18,70,0.07);border-radius:8px;border-left:2px solid rgba(10,18,70,0.14);display:flex;flex-direction:column;gap:8px;}
    .rn-stmt{display:flex;gap:10px;font-size:14px;color:var(--read-text2);line-height:1.5;}
    .rn-num{font-family:var(--font-m);color:#1a3d8a;min-width:18px;}
    .pp-flag-btn{margin-left:auto;background:none;border:1px solid var(--read-border);border-radius:6px;color:var(--read-text2);cursor:pointer;font-size:12px;padding:3px 8px;line-height:1;transition:background .15s,color .15s,border-color .15s;flex-shrink:0;}
    .pp-flag-btn:hover{background:var(--red-dim);border-color:rgba(239,68,68,.4);color:var(--red);}
.q-info-btn{background:none;border:none;padding:0 3px;font-size:13px;color:var(--text3);cursor:pointer;line-height:1;opacity:0.55;transition:opacity 0.15s;flex-shrink:0;}
.q-info-btn:hover{opacity:1;}
.q-info-popover{display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:11px;color:var(--text2);white-space:nowrap;z-index:200;box-shadow:0 4px 12px rgba(0,0,0,0.12);flex-direction:column;gap:4px;}
.q-info-popover.open{display:flex;}
.q-info-popover span{color:var(--text2);}
.q-meta{position:relative;}
.review-q-header{position:relative;}
    /* Referral card */
    .ref-link-row{display:flex;gap:8px;align-items:center;margin-bottom:16px;}
    .ref-link-box{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-family:var(--font-m);font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .ref-copy-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s;}
    .ref-copy-btn:hover{background:var(--accent2);}
    .ref-copy-btn.copied{background:#10b981;}
    .ref-form-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-bottom:16px;}
    .ref-form-row input{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--text);width:100%;}
    .ref-form-row input:focus{outline:none;border-color:var(--accent);}
    .ref-send-btn{background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--accent2);cursor:pointer;white-space:nowrap;transition:background .15s;}
    .ref-send-btn:hover{background:var(--bg3);}
    .ref-status{font-size:12px;min-height:18px;margin-bottom:12px;font-family:var(--font-m);}
    .ref-history-toggle{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;user-select:none;padding:6px 0;border-top:1px solid var(--border);margin-top:4px;}
    .ref-history-toggle:hover{color:var(--accent2);}
    .ref-history-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
    .ref-history-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;}
    .ref-history-name{font-weight:600;color:var(--text);}
    .ref-history-email{color:var(--text3);font-family:var(--font-m);font-size:12px;}
    .ref-history-date{color:var(--text3);font-size:11px;font-family:var(--font-m);white-space:nowrap;}
    /* Logout button in nav */
    .nav-signout{display:flex;align-items:center;gap:10px;padding:8px 16px;margin:4px 8px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text3);transition:background .15s,color .15s;user-select:none;}
    .nav-signout:hover{background:rgba(239,68,68,.08);color:#f87171;}
    .nav-signout .ni{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    /* Logout nudge modal */
    .logout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
    .logout-overlay.open{opacity:1;pointer-events:all;}
    .logout-modal{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:32px 28px 24px;max-width:420px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:translateY(12px);transition:transform .2s;}
    .logout-overlay.open .logout-modal{transform:translateY(0);}
    .logout-modal-icon{font-size:32px;margin-bottom:12px;text-align:center;}
    .logout-modal-title{font-family:var(--font-d);font-size:18px;font-weight:800;color:var(--text);margin-bottom:8px;text-align:center;}
    .logout-modal-body{font-size:14px;color:var(--text2);line-height:1.65;text-align:center;margin-bottom:24px;}
    .logout-modal-actions{display:flex;flex-direction:column;gap:10px;}
    .logout-btn-feedback{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:13px 20px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;width:100%;}
    .logout-btn-feedback:hover{background:var(--accent2);}
    .logout-btn-out{background:none;border:1px solid var(--border2);border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer;transition:background .15s,color .15s;width:100%;}
    .logout-btn-out:hover{background:rgba(239,68,68,.08);color:#f87171;border-color:rgba(239,68,68,.3);}
    /* Inactivity warning */
    .inactivity-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:14px 20px;font-size:13px;color:var(--text2);box-shadow:0 8px 30px rgba(0,0,0,.3);z-index:8900;display:flex;align-items:center;gap:12px;transition:transform .3s;white-space:nowrap;}
    .inactivity-toast.visible{transform:translateX(-50%) translateY(0);}
    .inactivity-toast strong{color:var(--text);}
    .inactivity-stay{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;margin-left:4px;}
    .pp-passage-flag-row{display:flex;justify-content:flex-end;margin-bottom:12px;}
    .q-text{font-size:16px;font-weight:500;color:var(--read-text);line-height:1.65;margin-bottom:20px;font-family:var(--font-b);}
    .opts{display:flex;flex-direction:column;gap:8px;}
    .opt-btn{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:10px;border:1px solid var(--read-border);background:var(--read-bg2);color:var(--read-text);font-size:14px;text-align:left;transition:all var(--tr);cursor:pointer;width:100%;}
    .opt-btn:hover:not(:disabled){border-color:rgba(10,18,70,0.22);background:#c8d2e8;color:var(--read-text);}
    .opt-letter{min-width:24px;height:24px;border-radius:6px;background:rgba(10,18,70,0.09);border:1px solid rgba(10,18,70,0.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--font-m);color:var(--read-text2);flex-shrink:0;margin-top:1px;transition:all var(--tr);}
    .opt-btn.selected{border-color:var(--accent);background:rgba(59,130,246,0.12);color:var(--read-text);}
    .opt-btn.selected .opt-letter{background:var(--accent);border-color:var(--accent);color:#fff;}
    .opt-btn.correct{border-color:rgba(16,185,129,0.5);background:#d0ece0;color:#065f3a;}
    .opt-btn.correct .opt-letter{background:var(--green);border-color:var(--green);color:#fff;}
    .opt-btn.incorrect{border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#7a1515;}
    .opt-btn.incorrect .opt-letter{background:var(--red);border-color:var(--red);color:#fff;}
    .opt-btn:disabled{cursor:default;}
    .opt-exp{margin-top:8px;padding:10px 12px;background:rgba(10,18,70,0.06);border-radius:8px;font-size:12px;color:var(--read-text2);line-height:1.6;display:none;}
    .opt-exp.show{display:block;}
    .opt-exp.ce{border-left:2px solid var(--green);color:#065f3a;}    /* correct answer */
    .opt-exp.we{border-left:2px solid var(--red);color:#7a1515;}         /* wrong — user selected this */
    .opt-exp.ie{border-left:2px solid rgba(10,18,70,0.12);color:var(--read-text2);}    /* wrong — user did not select */
    /* Toggle to expand/collapse non-selected wrong answer explanations */
    .exp-toggle{background:none;border:none;color:var(--read-text2);font-size:11px;font-family:var(--font-m);font-weight:600;cursor:pointer;padding:4px 0 2px;margin-top:4px;display:block;letter-spacing:.02em;transition:color var(--tr);}
    .exp-toggle:hover{color:var(--read-text);}
    /* ── FILL IN THE BLANK ───────────────────────────────────────── */
    .fitb-area{display:flex;gap:8px;align-items:center;margin:16px 0 4px;}
    .fitb-input{flex:1;padding:11px 14px;border:1px solid var(--border2);border-radius:10px;background:var(--read-bg2);color:var(--read-text);font-size:15px;font-family:var(--font);outline:none;transition:border-color var(--tr);}
    .fitb-input:focus{border-color:var(--accent);}
    .fitb-input:disabled{opacity:.6;cursor:default;}
    .fitb-submit-btn{flex-shrink:0;}
    .fitb-result{margin:6px 0 2px;padding:10px 14px;border-radius:8px;font-size:13px;font-family:var(--font-m);font-weight:600;}
    .fitb-correct{color:#065f3a;}
    .fitb-incorrect{color:#7a1515;}
    .fitb-review{padding:12px 0;}
    .fitb-review .review-exp{margin-top:8px;}

    /* ─── MODE CARDS ──────────────────────────────────────────────────── */
    .mode-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:28px;}
    .mode-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--rl);padding:20px 12px;text-align:center;cursor:pointer;transition:all var(--tr);}
    .mode-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 32px var(--accent-glow);}
    .mode-card.selected{border-color:var(--accent);background:var(--accent-glow);}
    .mode-icon{font-size:28px;margin-bottom:8px;}
    .mode-name{font-family:var(--font-d);font-size:14px;font-weight:700;margin-bottom:4px;}
    .mode-desc{font-size:12px;color:var(--text3);line-height:1.5;}

    /* ─── TOPIC CHIPS ─────────────────────────────────────────────────── */
    .chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
    .chip{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:12px;color:var(--text2);cursor:pointer;transition:all var(--tr);font-family:var(--font-m);}
    .chip:hover{border-color:var(--accent2);color:var(--text);}
    .chip.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent2);}

    /* ─── DRILL SCOPE PANEL (chapter-organized topic selector) ───────── */
    .drill-scope-panel{margin-bottom:20px;}
    /* One chapter block: header + topic chips beneath it */
    .dsc-chapter{margin-bottom:8px;}
    /* Clickable chapter header row */
    .dsc-chap-hdr{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rm);cursor:pointer;transition:all var(--tr);user-select:none;}
    .dsc-chap-hdr:hover{border-color:var(--accent2);}
    /* All topics in chapter selected */
    .dsc-chap-hdr.all-sel{border-color:var(--accent);background:var(--accent-glow);}
    /* Some (but not all) topics selected */
    .dsc-chap-hdr.part-sel{border-color:var(--accent2);}
    /* Unit badge pill — e.g. "Unit 1" */
    .dsc-unit-badge{font-size:10px;font-weight:700;letter-spacing:.08em;font-family:var(--font-m);color:var(--text3);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:2px 7px;white-space:nowrap;flex-shrink:0;}
    .dsc-chap-hdr.all-sel  .dsc-unit-badge{color:var(--accent2);border-color:var(--accent);background:transparent;}
    .dsc-chap-hdr.part-sel .dsc-unit-badge{color:var(--accent2);border-color:var(--accent2);}
    /* Chapter full name */
    .dsc-chap-name{font-size:13px;font-weight:600;color:var(--text2);flex:1;}
    .dsc-chap-hdr.all-sel  .dsc-chap-name{color:var(--accent2);}
    .dsc-chap-hdr.part-sel .dsc-chap-name{color:var(--text);}
    /* Selection count label on the right */
    .dsc-chap-count{font-size:11px;color:var(--text3);font-family:var(--font-m);white-space:nowrap;}
    .dsc-chap-hdr.all-sel .dsc-chap-count{color:var(--accent2);}
    /* Topic chip row beneath each chapter header */
    .dsc-topics{display:flex;flex-wrap:wrap;gap:6px;padding:6px 4px 2px;}

    /* ─── EXAM HEADER ─────────────────────────────────────────────────── */
    .exam-hdr{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px 24px;display:flex;align-items:center;gap:20px;margin-bottom:20px;}
    .exam-timer{font-family:var(--font-m);font-size:28px;font-weight:500;}
    .exam-timer.warn{color:var(--yellow);}
    .exam-timer.danger{color:var(--red);}
    .exam-prog-wrap{flex:1;}
    .exam-prog-lbl{font-size:11px;color:var(--text3);font-family:var(--font-m);margin-bottom:4px;}
    .exam-prog-track{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;}
    .exam-prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .3s ease;}
    .exam-qnum{font-family:var(--font-d);font-size:20px;font-weight:700;}
    .exam-qnum span{color:var(--text3);font-weight:400;font-size:14px;}

    /* ─── RESULTS ─────────────────────────────────────────────────────── */
    .res-hero{text-align:center;padding:48px 0 36px;}
    .res-ring{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--accent) 0% var(--rp,72%),var(--surface2) var(--rp,72%) 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;}
    .res-ring::before{content:'';position:absolute;inset:8px;background:var(--bg2);border-radius:50%;}
    .res-score{font-family:var(--font-d);font-size:36px;font-weight:800;position:relative;z-index:1;}
    .res-title{font-family:var(--font-d);font-size:28px;font-weight:800;margin-bottom:8px;}
    .res-sub{font-size:14px;color:var(--text2);}

    /* ─── TEXTBOOK MODE ───────────────────────────────────────────────── */
    /* Two-view model: #tb-select (accordion) → #tb-session (reader). No split panel. */
    .tb-mode-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:10px;padding:4px;margin-bottom:16px;width:fit-content;}
    .tb-tab{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;transition:all var(--tr);font-family:var(--font-d);}
    .tb-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3);}

    /* Selection view */
    #tb-select{max-width:800px;}
    #tb-search-wrap{margin-bottom:12px;}
    #tb-search-wrap input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;color:var(--text);font-family:var(--font-b);font-size:13px;outline:none;box-sizing:border-box;}
    #tb-search-wrap input::placeholder{color:var(--text3);}
    #tb-search-wrap input:focus{border-color:var(--accent);}

    /* Reader session view */
    #tb-session{max-width:800px;}
    .tb-session-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}

    /* ── Topic rows (full-width accordion) ─────────────────────────── */
    /* Read mode topic rows — mirrors ls-topic-main / ls-run-btn pattern */
    .tb-topic-item{display:flex;align-items:center;gap:8px;padding:12px 16px;transition:background var(--tr);user-select:none;}
    .tb-topic-item:hover{background:var(--bg3);}
    .tb-topic-item.has-active{background:var(--accent-glow);}
    .tb-topic-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;}
    .tb-topic-info{min-width:0;}
    .tb-topic-info .tt-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px;}
    .tb-topic-info .tt-meta{font-size:12px;color:var(--text3);font-family:var(--font-m);}
    .tb-topic-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
    .tb-chevron{font-size:18px;color:var(--text3);transition:transform .2s ease;flex-shrink:0;line-height:1;}
    .tb-chevron.open{transform:rotate(90deg);color:var(--accent);}
    .tb-topic-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);margin-bottom:8px;overflow:hidden;}
    .tb-topic-group .tb-topic-item{border-bottom:none;}
    .tb-passages-list{background:var(--bg2);border-top:1px solid var(--border);}
    .tb-chapter-header{padding:8px 16px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);border-bottom:1px solid var(--border);margin-bottom:0;font-family:var(--font-m);}
    .tr-chapter-header{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:8px 0 6px;margin-top:12px;border-bottom:1px solid var(--border);font-family:var(--font-m);grid-column:1/-1;}
    .tb-passage-list{padding:4px 0;}
    .tb-passage-item{display:flex;align-items:center;padding:8px 16px 8px 48px;cursor:pointer;transition:background var(--tr);font-size:13px;color:var(--text2);border-bottom:1px solid var(--border);}
    .tb-passage-item:last-child{border-bottom:none;}
    .tb-passage-item:hover{background:var(--surface2);color:var(--text);}
    .tb-passage-item.active{color:var(--accent2);background:var(--accent-glow);font-weight:500;}
    .tb-linear-num{color:var(--text3);margin-right:6px;flex-shrink:0;font-variant-numeric:tabular-nums;}

    /* ── Reader body card ───────────────────────────────────────────── */
    .tb-reader-body{background:var(--read-bg);border:1px solid var(--read-border);border-radius:var(--rl);padding:36px 44px;margin-bottom:0;}
    .tb-passage-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(59,130,246,0.14);border:1px solid rgba(59,130,246,.35);color:#1a3d8a;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;font-family:var(--font-m);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
    .tb-passage-title{font-family:var(--font-d);font-size:22px;font-weight:700;margin-bottom:16px;color:#c9a84c;}
    .tb-passage-text{color:var(--read-text2);font-size:15px;line-height:1.9;}
    .tb-passage-text strong{color:var(--read-text);font-weight:600;}
    .tb-highlight{background:rgba(245,158,11,0.2);color:#7a4800;padding:1px 4px;border-radius:3px;font-weight:500;cursor:help;position:relative;}
    .tb-highlight:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--surface);color:var(--text);font-size:11px;font-weight:400;line-height:1.5;padding:7px 10px;border-radius:7px;border:1px solid var(--border2);white-space:nowrap;max-width:280px;white-space:normal;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.12);font-family:var(--font-b);pointer-events:none;}
    .tb-highlight:hover::before{content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border2);z-index:51;pointer-events:none;}

    /* ── Linear book: resume banner ───────────────────────────────────── */
    .tb-book-resume-banner{
      display:flex;align-items:center;justify-content:space-between;
      background:var(--surface);border:1px solid var(--border);
      border-left:3px solid var(--accent);border-radius:var(--rl);
      padding:12px 16px;margin-bottom:16px;gap:12px;
    }

    /* ── Linear book view ──────────────────────────────────────────────── */
    .tb-book{padding:0;}
    .tb-book-chapter{
      font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--accent2);font-family:var(--font-m);
      padding:32px 0 10px;border-bottom:2px solid var(--accent2);margin-bottom:24px;
    }
    .tb-book-chapter:first-child{padding-top:0;}
    .tb-book-topic{
      font-family:var(--font-d);font-size:19px;font-weight:800;color:var(--text);
      margin:32px 0 20px;padding-bottom:10px;border-bottom:1px solid var(--border);
    }
    .tb-book-passage{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--border);}
    .tb-book-passage:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
    /* Briefly highlight the resumed passage */
    .tb-book-resumed{animation:tbBookResumeFlash 2s ease-out forwards;}
    @keyframes tbBookResumeFlash{0%{background:var(--accent-glow);}100%{background:transparent;}}
    .tb-book-passage-title{
      font-family:var(--font-d);font-size:15px;font-weight:700;color:#c9a84c;
      margin-bottom:14px;
    }

    /* ── Nav bar ────────────────────────────────────────────────────── */
    .tb-passage-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--border);margin-top:8px;}
    .tb-passage-ctr{font-family:var(--font-m);font-size:12px;color:var(--text3);}
    .tb-linear-progress{height:3px;background:var(--bg);position:relative;overflow:hidden;margin-bottom:4px;}
    .tb-linear-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease;}

    /* ── Empty / error states ───────────────────────────────────────── */
    .tb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;color:var(--text3);text-align:center;padding:40px;}
    .tb-empty .ei{font-size:48px;margin-bottom:16px;}
    .tb-empty .et{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px;}

    /* ─── SETTINGS ────────────────────────────────────────────────────── */
    .set-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:24px;margin-bottom:16px;}
    .set-hdr{font-family:var(--font-d);font-size:15px;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}
    .set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
    .set-row:last-child{border-bottom:none;}
    .set-lbl{font-size:14px;}
    .set-desc{font-size:12px;color:var(--text3);margin-top:2px;}
    .toggle{width:40px;height:22px;background:var(--bg3);border-radius:11px;position:relative;cursor:pointer;transition:background var(--tr);border:1px solid var(--border2);}
    .toggle.on{background:var(--accent);border-color:var(--accent);}
    .toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--tr);}
    .toggle.on::after{transform:translateX(18px);}

    /* ─── CONTENT MANAGER ─────────────────────────────────────────────── */
    .drop-zone{background:var(--bg3);border:2px dashed var(--border2);border-radius:12px;padding:40px;text-align:center;margin-bottom:16px;transition:border-color var(--tr);}
    .drop-zone:hover{border-color:var(--accent);}

    /* ─── TOAST ───────────────────────────────────────────────────────── */
    #toast{position:fixed;bottom:28px;right:28px;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:12px 18px;font-size:13px;box-shadow:0 8px 48px rgba(0,0,0,.6);z-index:999;display:none;align-items:center;gap:10px;max-width:320px;animation:slideUp .3s ease;}
    @keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    #toast.show{display:flex;}

    /* ─── MODAL ───────────────────────────────────────────────────────── */
    .modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;}
    .modal-ov.open{display:flex;}
    .modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:32px;max-width:500px;width:90%;box-shadow:0 8px 48px rgba(0,0,0,.6);animation:fadeIn .2s ease;}
    .modal-title{font-family:var(--font-d);font-size:20px;font-weight:800;margin-bottom:8px;}
    .modal-sub{font-size:14px;color:var(--text2);margin-bottom:24px;}
    .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;}

    /* ─── INSTALL BANNER ──────────────────────────────────────────────── */
    #install-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border2);padding:14px 24px;display:none;align-items:center;gap:16px;z-index:50;}
    #install-banner.show{display:flex;}
    #install-banner .it{flex:1;font-size:14px;color:var(--text2);}

    /* ─── AUTO-LOAD STATUS ────────────────────────────────────────────── */
    .al-status{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;}
    .al-status.ok{background:var(--green-dim);border:1px solid rgba(16,185,129,.3);color:var(--green);}
    .al-status.warn{background:var(--yellow-dim);border:1px solid rgba(245,158,11,.3);color:var(--yellow);}
    .al-status.err{background:var(--red-dim);border:1px solid rgba(239,68,68,.3);color:var(--red);}



    /* Training mode tabs */
    .tr-tab {
      padding: 8px 18px; border-radius: 8px;
      font-size: 13px; font-weight: 600; color: var(--text3);
      cursor: pointer; transition: all var(--tr);
      font-family: var(--font-d); border: none; background: transparent;
    }
    .tr-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
    .tr-tab:hover:not(.active) { color: var(--text2); }

    /* ─── TRAINING MODE ENHANCEMENTS ─────────────────────────────────── */
    .tr-section-hdr {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px; padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .tr-section-title {
      font-family: var(--font-d); font-size: 15px; font-weight: 700;
      color: var(--text); display: flex; align-items: center; gap: 8px;
    }
    .tr-q-badge {
      background: var(--accent-glow); border: 1px solid rgba(59,130,246,.3);
      color: var(--accent2); font-size: 11px; font-weight: 600;
      padding: 3px 9px; border-radius: 20px; font-family: var(--font-m);
    }
    /* ─── LESSONS MODE ────────────────────────────────────────────────── */
    .ls-chapter{border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden;background:var(--surface);}
    .ls-chapter-hdr{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background var(--tr);user-select:none;}
    .ls-chapter-hdr:hover{background:var(--bg3);}
    .ls-chapter-chevron{font-size:16px;color:var(--text3);transition:transform var(--tr);flex-shrink:0;line-height:1;}
    .ls-chapter-chevron.open{transform:rotate(90deg);}
    .ls-chapter-info{flex:1;min-width:0;}
    .ls-chapter-name{font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
    .ls-chapter-meta{font-size:11px;color:var(--text3);font-family:var(--font-m);}
    .ls-chapter-body{border-top:1px solid var(--border);}
    .ls-topic-row{border-bottom:1px solid var(--border);}
    .ls-topic-row:last-child{border-bottom:none;}
    .ls-topic-main{display:flex;align-items:center;gap:8px;padding:10px 16px 10px 28px;}
    .ls-topic-left{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;min-width:0;}
    .ls-topic-chevron{font-size:13px;color:var(--text3);transition:transform var(--tr);flex-shrink:0;line-height:1;}
    .ls-topic-chevron.open{transform:rotate(90deg);}
    .ls-topic-info{min-width:0;}
    .ls-topic-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
    .ls-topic-meta{font-size:11px;color:var(--text3);font-family:var(--font-m);}
    .ls-done-badge{display:inline-flex;align-items:center;background:var(--green-dim);border:1px solid rgba(16,185,129,.3);color:var(--green);font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;font-family:var(--font-m);vertical-align:middle;margin-left:4px;}
    .ls-passage-rows{background:var(--bg);}
    .ls-passage-row{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 8px 56px;cursor:pointer;transition:background var(--tr);border-top:1px solid var(--border);}
    .ls-passage-row:hover{background:var(--surface);}
    .ls-passage-label{display:flex;align-items:center;gap:8px;}
    .ls-passage-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--bg3);border-radius:50%;font-size:10px;font-weight:700;color:var(--text3);font-family:var(--font-m);flex-shrink:0;}
    .ls-passage-title-lbl{font-size:12px;color:var(--text2);}
    .ls-run-btn{flex-shrink:0;}

    /* ── Quiz Tab Bar ────────────────────────────────── */
    .qz-tab-bar {
      display: flex; gap: 4px; background: var(--bg3);
      border-radius: 10px; padding: 4px; width: fit-content; margin-bottom: 20px;
    }
    .qz-tab {
      background: none; border: none; border-radius: 7px; padding: 7px 18px;
      font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer;
      transition: background .15s, color .15s; font-family: var(--font-s);
    }
    .qz-tab:hover { background: var(--surface); color: var(--text); }
    .qz-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

    /* ── Topic Quiz List ─────────────────────────────── */
    /* Each chapter is a card, matching .card / .ls-chapter treatment used
       throughout Drill, Lessons, and the dashboard — was previously a bare
       uppercase mono-font label with no container, which read as visually
       disconnected from the rest of the app. */
    .tqz-chapter {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--rl); padding: 16px 18px; margin-bottom: 16px;
    }
    .tqz-chapter-hdr {
      font-family: var(--font-d); font-size: 15px; font-weight: 700; color: var(--text);
      margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
    }
    .tqz-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 4px; border-bottom: 1px solid var(--border); gap: 12px;
    }
    .tqz-row:last-child { border-bottom: none; }
    .tqz-locked { opacity: .55; }
    .tqz-unlocked { border-radius: 8px; transition: background var(--tr); }
    .tqz-unlocked:hover { background: var(--surface2); }
    .tqz-info { flex: 1; min-width: 0; }
    .tqz-name {
      font-size: 14px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tqz-meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .tqz-action { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .tqz-lock-badge { font-size: 12px; color: var(--text3); font-family: var(--font-m); }
    .tqz-score-badge { font-size: 14px; font-weight: 700; font-family: var(--font-m); }

    /* Drill mode: overtime indicator */
    .drill-overtime-badge {
      background: var(--red-dim); border: 1px solid rgba(239,68,68,.3);
      color: var(--red); font-size: 11px; font-weight: 700;
      padding: 3px 9px; border-radius: 20px; font-family: var(--font-m);
    }
    /* Drill: per-question countdown timer */
    #drill-q-timer-wrap {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 16px; border-radius: 10px;
      background: var(--surface); border: 1px solid var(--border);
      margin-bottom: 16px;
    }
    #drill-q-timer {
      font-family: var(--font-m); font-size: 22px; font-weight: 600;
      min-width: 48px; color: var(--text);
      transition: color .3s;
    }
    #drill-q-timer.warn { color: var(--yellow); }
    #drill-q-timer.danger { color: var(--red); animation: timerPulse .5s ease infinite alternate; }
    @keyframes timerPulse { from { opacity:1; } to { opacity:.5; } }
    #drill-q-timer-bar-track {
      flex: 1; height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden;
    }
    #drill-q-timer-bar {
      height: 100%; border-radius: 3px;
      background: linear-gradient(90deg, var(--green), var(--accent2));
      transition: width .9s linear, background .3s;
    }

    /* ══════════ SPEED MODE ══════════ */
    .speed-flash {
      position: fixed; inset: 0; pointer-events: none; z-index: 9999;
      opacity: 0; transition: opacity .5s ease-out;
    }
    .speed-flash.show { opacity: 1; transition: opacity 0s; }
    .speed-flash.correct { background: rgba(16,185,129,.35); }
    .speed-flash.wrong { background: rgba(239,68,68,.35); }
    .speed-hdr {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
    }
    .speed-hdr-stats { display: flex; gap: 8px; flex-wrap: wrap; }
    .speed-end-btn {
      background: none; border: 1px solid var(--border2); border-radius: 8px;
      padding: 6px 12px; font-size: 12px; color: var(--text3); cursor: pointer;
      font-family: var(--font-m); transition: all var(--tr);
    }
    .speed-end-btn:hover { border-color: var(--red); color: var(--red); }
    .speed-timer-wrap {
      display: flex; flex-direction: column; align-items: center;
      margin-bottom: 18px;
    }
    .speed-timer-label {
      font-size: 11px; color: var(--text3); font-family: var(--font-m);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
    }
    .speed-timer-num {
      font-family: var(--font-d); font-size: 44px; font-weight: 800;
      line-height: 1; color: var(--accent2); transition: color .2s;
    }
    .speed-timer-num.warn { color: var(--yellow); }
    .speed-timer-num.danger { color: var(--red); animation: timerPulse .5s ease infinite alternate; }
    .speed-timer-bar-track {
      width: 100%; max-width: 320px; height: 6px; border-radius: 3px;
      background: var(--bg); overflow: hidden; margin-top: 10px;
    }
    .speed-timer-bar {
      height: 100%; border-radius: 3px;
      background: linear-gradient(90deg, var(--green), var(--accent2));
      transition: width 1s linear, background .2s;
    }
    .speed-budget-note {
      font-size: 11px; color: var(--text3); font-family: var(--font-m);
      text-transform: uppercase; letter-spacing: .06em; margin-top: 8px;
    }

    /* Drill setup: question count row */
    .drill-count-row {
      display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    }
    .drill-count-label {
      font-size: 14px; color: var(--text2); font-weight: 500; white-space: nowrap;
    }
    .drill-count-btns { display: flex; gap: 6px; flex-wrap: wrap; }
    .drill-count-btn {
      padding: 6px 14px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text2); font-size: 13px; font-weight: 600;
      font-family: var(--font-m); cursor: pointer; transition: all var(--tr);
    }
    .drill-count-btn:hover { border-color: var(--accent2); color: var(--text); }
    .drill-count-btn.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent2); }
    #drill-count-custom {
      width: 80px; padding: 6px 10px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font-m); font-size: 13px;
      text-align: center; outline: none;
    }
    #drill-count-custom:focus { border-color: var(--accent); }
    .drill-start-btn { width:100%; padding:14px 28px; font-size:15px; justify-content:center; margin-top:4px; }

    /* ── DRILL SESSION HEADER ──────────────────────────────────────────── */
    #drill-session-header {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 6px;
    }
    .drill-hdr-left { flex: 1; min-width: 0; }
    .drill-mobile-score { display: none; } /* hidden on desktop — shown via mobile media query */
    .drill-hdr-stats {
      display: flex; gap: 8px; align-items: center; flex-shrink: 0;
    }
    .drill-stat-pill {
      font-family: var(--font-m); font-size: 13px; font-weight: 600;
      padding: 4px 10px; border-radius: 20px;
      background: var(--bg3);
    }
    .drill-stat-pill.green { color: var(--green); }
    .drill-stat-pill.red   { color: var(--red); }
    .drill-stat-pill.gold  { color: var(--yellow); }
    .drill-end-btn {
      background: none; border: 1px solid var(--border); border-radius: 8px;
      color: var(--text3); font-size: 12px; font-family: var(--font-m);
      font-weight: 600; padding: 6px 14px; cursor: pointer; flex-shrink: 0;
      margin-left: 8px;
      transition: background .15s, color .15s, border-color .15s;
    }
    .drill-end-btn:hover { background: var(--red-dim); border-color: rgba(239,68,68,.4); color: var(--red); }

    /* ── DRILL PROGRESS BAR (question progress, distinct from timer) ────── */
    #drill-progress-bar-wrap {
      height: 4px; background: var(--bg3); border-radius: 2px;
      overflow: hidden; margin-bottom: 12px;
    }
    #drill-progress-bar {
      height: 100%; width: 0%; border-radius: 2px;
      background: var(--accent2);
      transition: width .4s ease;
    }

    /* ── DRILL SUBMIT/NEXT STICKY FOOTER ─────────────────────────────── */
    .drill-btn-row {
      display: flex; justify-content: flex-end; gap: 8px;
      margin-top: 12px;
    }
    .drill-results-actions { display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
    .drill-results-primary { padding:12px 28px; font-size:15px; }
    .drill-results-secondary { display:flex; gap:8px; flex-wrap:wrap; }




    /* ─── PASSAGE VISUALS ─────────────────────────────────────────────────── */
    .visual-block {
      margin: 20px 0; border-radius: 12px; overflow: hidden;
      border: 1px solid var(--border); background: var(--bg3);
    }
    .visual-title {
      font-family: var(--font-d); font-size: 12px; font-weight: 700;
      color: var(--text3); text-transform: uppercase; letter-spacing: .08em;
      padding: 10px 16px; border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .visual-body { padding: 16px; }
    /* Comparison / table visuals */
    .vis-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .vis-table th {
      background: var(--surface2); color: var(--accent2);
      font-family: var(--font-m); font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      padding: 8px 12px; text-align: left;
      border-bottom: 2px solid var(--accent);
    }
    .vis-table td {
      padding: 8px 12px; border-bottom: 1px solid var(--border);
      color: var(--text2); vertical-align: top; line-height: 1.5;
    }
    .vis-table tr:last-child td { border-bottom: none; }
    .vis-table tr:nth-child(even) td { background: var(--bg); }
    .vis-table td:first-child { color: var(--text); font-weight: 600; }
    /* Flowchart visuals */
    .vis-flow { display: flex; flex-direction: column; gap: 0; }
    .vis-step {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .vis-step:last-child { border-bottom: none; }
    .vis-step-num {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      background: var(--accent); color: #fff;
      font-family: var(--font-m); font-size: 12px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }
    .vis-step-label {
      font-weight: 700; color: var(--text); font-size: 13px; margin-bottom: 3px;
    }
    .vis-step-detail { font-size: 12px; color: var(--text2); line-height: 1.6; }
    .vis-flow-note {
      font-size: 12px; color: var(--yellow); margin-top: 12px;
      padding: 8px 12px; background: rgba(245,158,11,.08);
      border-radius: 8px; border-left: 3px solid var(--yellow);
    }
    /* Formula visuals */
    .vis-formula {
      background: var(--surface); border-radius: 10px;
      padding: 20px; text-align: center;
    }
    .vis-formula-eq {
      font-family: var(--font-m); font-size: 18px; color: var(--accent2);
      margin-bottom: 12px; letter-spacing: .02em;
    }
    .vis-formula-parts {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    }
    .vis-formula-part {
      background: var(--bg3); border: 1px solid var(--border);
      border-radius: 8px; padding: 6px 12px; font-size: 12px;
      color: var(--text2);
    }
    .vis-formula-part strong { color: var(--accent2); }
    /* Comparison two-column */
    /* 2-col comparison (legacy / no row labels) */
    .vis-compare {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0;
      border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    }
    .vis-compare-hdr {
      background: var(--surface2); padding: 10px 14px;
      font-family: var(--font-m); font-size: 12px; font-weight: 700;
      color: var(--accent2); text-transform: uppercase; letter-spacing: .06em;
      border-bottom: 2px solid var(--accent);
    }
    .vis-compare-hdr:not(:last-child) { border-right: 1px solid var(--border); }
    .vis-compare-row { display: contents; }
    .vis-compare-cell {
      padding: 9px 14px; font-size: 13px; color: var(--text2);
      border-bottom: 1px solid var(--border); line-height: 1.5;
    }
    .vis-compare-cell.row-label {
      font-weight: 700; color: var(--text3); font-size: 11px;
      text-transform: uppercase; letter-spacing: .05em;
      background: var(--bg3); grid-column: 1 / -1;
      padding: 5px 14px; border-bottom: 1px solid var(--border);
    }
    /* 3-col labelled comparison: row label | left value | right value */
    .vis-compare3 {
      display: grid; grid-template-columns: minmax(120px,1.2fr) 1fr 1fr; gap: 0;
      border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    }
    .vis-compare3 .vc3-corner {
      background: var(--surface2); border-bottom: 2px solid var(--accent);
      border-right: 1px solid var(--border);
    }
    .vis-compare3 .vc3-hdr {
      background: var(--surface2); padding: 10px 14px;
      font-family: var(--font-m); font-size: 12px; font-weight: 700;
      color: var(--accent2); text-transform: uppercase; letter-spacing: .06em;
      border-bottom: 2px solid var(--accent);
    }
    .vis-compare3 .vc3-hdr:not(:last-child) { border-right: 1px solid var(--border); }
    .vis-compare3 .vc3-label {
      padding: 9px 14px; font-size: 12px; font-weight: 700;
      color: var(--text); background: var(--bg3);
      border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
      line-height: 1.5;
    }
    .vis-compare3 .vc3-cell {
      padding: 9px 14px; font-size: 13px; color: var(--text2);
      border-bottom: 1px solid var(--border); line-height: 1.5;
    }
    .vis-compare3 .vc3-cell:not(:last-child) { border-right: 1px solid var(--border); }
    .vis-compare3 > *:nth-last-child(-n+3) { border-bottom: none; }
    /* Threshold / spectrum chart */
    .vis-threshold { display: flex; flex-direction: column; gap: 0; }
    .vis-threshold-row {
      display: flex; align-items: stretch;
      border-bottom: 1px solid var(--border);
    }
    .vis-threshold-row:last-child { border-bottom: none; }
    .vis-threshold-band {
      width: 6px; flex-shrink: 0;
    }
    .vis-threshold-label {
      padding: 9px 14px; font-size: 12px; font-weight: 700;
      color: var(--text); min-width: 160px; border-right: 1px solid var(--border);
      display: flex; align-items: center;
    }
    .vis-threshold-val {
      padding: 9px 14px; font-size: 13px; color: var(--text2);
      display: flex; align-items: center; line-height: 1.5;
    }

    /* ─── FLASH CARDS ─────────────────────────────────────────────────────── */
    .fc-setup { max-width: 680px; margin: 0 auto; }
    .fc-deck-list {
      border: 1px solid var(--border); border-radius: 12px;
      overflow: hidden; max-height: 320px; overflow-y: auto;
      scrollbar-width: thin; scrollbar-color: var(--border2) transparent;
    }
    .fc-deck-list::-webkit-scrollbar{width:6px;}
    .fc-deck-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
    .fc-list-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background var(--tr);
    }
    .fc-list-row:last-child { border-bottom: none; }
    .fc-list-row:hover { background: var(--surface2); }
    .fc-list-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
    .fc-list-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
    .fc-list-meta { font-size: 12px; color: var(--text3); font-family: var(--font-m); white-space: nowrap; }
    .fc-list-pct { color: var(--green); font-weight: 700; margin-left: 6px; }
    /* Session */
    .fc-session { max-width: 680px; margin: 0 auto; }
    .fc-progress-row {
      display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    }
    .fc-prog-track {
      flex: 1; height: 5px; background: var(--bg3);
      border-radius: 3px; overflow: hidden;
    }
    .fc-prog-fill {
      height: 100%; border-radius: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width .4s ease;
    }
    .fc-prog-label {
      font-size: 12px; color: var(--text3);
      font-family: var(--font-m); white-space: nowrap;
    }
    /* The card itself */
    .fc-stage {
      perspective: 1200px;
      height: 320px; margin-bottom: 20px; cursor: pointer; touch-action: manipulation;
    }
    .fc-card-inner {
      position: relative; width: 100%; height: 100%;
      transform-style: preserve-3d;
      transition: transform .5s cubic-bezier(.4,0,.2,1);
    }
    .fc-card-inner.flipped { transform: rotateY(180deg); }
    .fc-face {
      position: absolute; inset: 0;
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
      border-radius: 20px; padding: 32px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
    }
    .fc-front {
      background: var(--read-bg);
      border: 1px solid var(--read-border);
      box-shadow: 0 4px 24px rgba(0,0,0,.12);
    }
    .fc-back {
      background: var(--read-bg2);
      border: 1px solid var(--read-border);
      box-shadow: 0 4px 24px rgba(0,0,0,.1);
      transform: rotateY(180deg);
    }
    .fc-topic-tag {
      font-size: 10px; font-weight: 700; color: #1a3d8a;
      background: rgba(59,130,246,0.14); padding: 3px 10px;
      border-radius: 10px; margin-bottom: 20px;
      font-family: var(--font-m); text-transform: uppercase; letter-spacing: .06em;
    }
    .fc-term {
      font-family: var(--font-d); font-size: 26px; font-weight: 800;
      color: var(--read-text); line-height: 1.25; margin-bottom: 16px;
    }
    .fc-hint {
      font-size: 12px; color: var(--read-text2);
      font-family: var(--font-m); margin-top: auto;
    }
    .fc-back-label {
      font-size: 10px; font-weight: 700; color: #1a3d8a;
      background: rgba(59,130,246,0.14); padding: 3px 10px;
      border-radius: 10px; margin-bottom: 16px;
      font-family: var(--font-m); text-transform: uppercase; letter-spacing: .06em;
    }
    .fc-definition {
      font-size: 15px; color: var(--read-text); line-height: 1.7;
      overflow-y: auto; max-height: 200px;
    }
    .fc-definition strong { color: #1a3d8a; }
    .fc-contrast-row {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid var(--read-border);
    }
    .fc-contrast-label {
      font-size: 10px; font-weight: 700; color: var(--read-text2);
      text-transform: uppercase; letter-spacing: .06em;
      font-family: var(--font-m); margin-bottom: 6px;
    }
    .fc-contrast {
      font-size: 13px; color: var(--read-text2); line-height: 1.6;
      font-style: italic;
    }
    /* Rating buttons */
    .fc-rating-row {
      display: flex; gap: 10px; justify-content: center; margin-bottom: 20px;
    }
    .fc-rate-btn {
      flex: 1; max-width: 180px; padding: 12px 16px;
      border-radius: 12px; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: all var(--tr); border: 1px solid transparent;
      font-family: var(--font-d);
    }
    .fc-rate-got  { background: rgba(16,185,129,.15); color: var(--green); border-color: rgba(16,185,129,.3); }
    .fc-rate-got:hover  { background: rgba(16,185,129,.25); transform: translateY(-1px); }
    .fc-rate-miss { background: rgba(239,68,68,.15);  color: var(--red);   border-color: rgba(239,68,68,.3); }
    .fc-rate-miss:hover { background: rgba(239,68,68,.25); transform: translateY(-1px); }
    /* Flip instruction */
    .fc-flip-hint {
      text-align: center; font-size: 12px; color: var(--read-text2);
      font-family: var(--font-m); margin-bottom: 8px;
    }
    /* Card navigation wrapper (arrows + card) */
    .fc-stage-wrap {
      display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
    }
    .fc-stage-wrap .fc-stage { flex: 1; margin-bottom: 0; }
    .fc-nav-btn {
      flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text2); font-size: 26px; line-height: 1;
      cursor: pointer; transition: all var(--tr);
      display: flex; align-items: center; justify-content: center;
    }
    .fc-nav-btn:hover:not(:disabled) {
      border-color: var(--accent); color: var(--accent);
      background: var(--accent-glow);
    }
    .fc-nav-btn:disabled { opacity: 0.22; cursor: default; }
    /* Results */
    .fc-results { max-width: 480px; margin: 0 auto; text-align: center; padding: 40px 0; }
    .fc-results-ring {
      width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 20px;
      background: conic-gradient(var(--green) 0% var(--rp,0%), var(--surface2) var(--rp,0%) 100%);
      display: flex; align-items: center; justify-content: center; position: relative;
    }
    .fc-results-ring::before {
      content: ''; position: absolute; inset: 10px;
      background: var(--bg2); border-radius: 50%;
    }
    .fc-results-score {
      position: relative; font-family: var(--font-d);
      font-size: 26px; font-weight: 800; color: var(--text);
    }
    .fc-results-title { font-family: var(--font-d); font-size: 20px; font-weight: 800; margin-bottom: 8px; }
    .fc-results-sub { font-size: 14px; color: var(--text2); margin-bottom: 28px; }
    .fc-stats-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 28px; }
    .fc-stat { text-align: center; }
    .fc-stat-n { font-family: var(--font-m); font-size: 24px; font-weight: 700; }
    .fc-stat-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

    /* ─── SESSION RESULTS SCREEN ──────────────────────────────────────── */
    .results-screen { max-width: 800px; margin: 0 auto; }
    .results-hero {
      text-align: center; padding: 36px 0 28px;
    }
    .results-score-ring {
      width: 130px; height: 130px; border-radius: 50%;
      background: conic-gradient(var(--green) 0% var(--rp,0%), var(--surface2) var(--rp,0%) 100%);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px; position: relative;
    }
    .results-score-ring.fail {
      background: conic-gradient(var(--red) 0% var(--rp,0%), var(--surface2) var(--rp,0%) 100%);
    }
    .results-score-ring::before {
      content: ''; position: absolute; inset: 10px;
      background: var(--bg2); border-radius: 50%;
    }
    .results-score-val {
      position: relative; z-index: 1;
      font-family: var(--font-d); font-size: 30px; font-weight: 800; color: var(--text);
    }
    .results-title {
      font-family: var(--font-d); font-size: 22px; font-weight: 800; margin-bottom: 6px;
    }
    .results-sub { font-size: 14px; color: var(--text2); }
    /* Topic strength table */
    .topic-result-row {
      display: grid; grid-template-columns: 1fr auto 120px auto;
      align-items: center; gap: 12px;
      padding: 10px 0; border-bottom: 1px solid var(--border);
    }
    .topic-result-row:last-child { border-bottom: none; }
    .topic-result-name { font-size: 13px; color: var(--text); }
    .topic-result-count { font-size: 11px; color: var(--text3); font-family: var(--font-m); white-space: nowrap; }
    .topic-result-bar-wrap { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
    .topic-result-bar { height: 100%; border-radius: 3px; transition: width .4s ease; }
    .topic-result-pct { font-family: var(--font-m); font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; }
    .topic-tag {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 700; padding: 2px 7px;
      border-radius: 10px; font-family: var(--font-m); text-transform: uppercase;
    }
    .topic-tag.strength { background: rgba(34,197,94,.15); color: var(--green); }
    .topic-tag.weakness { background: rgba(239,68,68,.15); color: var(--red); }
    .topic-tag.overtime { background: rgba(251,191,36,.15); color: var(--yellow); }
    /* Question review */
    .review-q-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 18px 20px; margin-bottom: 12px;
    }
    .review-q-card.correct-q { border-left: 3px solid var(--green); }
    .review-q-card.wrong-q   { border-left: 3px solid var(--red); }
    .review-q-card.skipped-q { border-left: 3px solid var(--text3); }
    .review-q-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    }
    .review-q-num {
      font-family: var(--font-m); font-size: 11px; color: var(--text3);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .review-q-topic {
      font-size: 11px; color: var(--accent2); background: var(--accent-glow);
      padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    }
    .review-q-text { font-size: 14px; color: var(--text); margin-bottom: 12px; line-height: 1.6; }
    .review-opt {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 8px 12px; border-radius: 8px; margin-bottom: 5px;
      font-size: 13px; color: var(--text2);
    }
    .review-opt.correct-opt { background: rgba(34,197,94,.1); color: var(--green); }
    .review-opt.selected-wrong { background: rgba(239,68,68,.1); color: var(--red); }
    .review-opt-letter {
      font-family: var(--font-m); font-weight: 700; font-size: 12px;
      min-width: 20px; padding-top: 1px;
    }
    .review-exp {
      font-size: 12px; color: var(--text3); margin-top: 5px;
      padding: 8px 10px; background: var(--bg3); border-radius: 6px; line-height: 1.6;
    }
    .review-filter-row {
      display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
    }
    .review-filter-btn {
      padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
      font-family: var(--font-m); cursor: pointer; transition: all var(--tr);
      border: 1px solid var(--border); background: var(--surface); color: var(--text2);
    }
    .review-filter-btn.active {
      background: var(--accent-glow); border-color: var(--accent); color: var(--accent2);
    }
    .review-filter-btn:hover { border-color: var(--border2); color: var(--text); }


    /* ─── MASTERY PROGRESSION ─────────────────────────────────────────── */
    .mastery-topic-row {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 0; border-bottom: 1px solid var(--border);
    }
    .mastery-topic-row:last-child { border-bottom: none; }
    .mastery-topic-name { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
    .mastery-topic-sub  { font-size: 11px; color: var(--text3); margin-top: 1px; }
    .tier-pipeline { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
    .tier-pip {
      display: flex; align-items: center; justify-content: center;
      width: 56px; height: 26px; border-radius: 6px;
      font-size: 10px; font-weight: 700; font-family: var(--font-m);
      letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent;
      transition: all var(--tr);
    }
    .tier-pip.locked   { background: var(--bg3); color: var(--text3); border-color: var(--border); }
    .tier-pip.active   { background: var(--accent-glow); color: var(--accent2); border-color: var(--accent); }
    .tier-pip.mastered { background: rgba(34,197,94,.15); color: var(--green); border-color: rgba(34,197,94,.35); }
    .tier-arrow { font-size: 10px; color: var(--text3); }
    .tier-pip.locked .tier-lock { display: inline; }
    .tier-pip:not(.locked) .tier-lock { display: none; }
    /* Compact tier progress bar under topic name */
    .mastery-mini-bar {
      height: 3px; border-radius: 2px; background: var(--bg3);
      overflow: hidden; margin-top: 4px; width: 100%;
    }
    .mastery-mini-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
    /* Drill setup tier indicator — kept subtle, secondary info */
    .drill-tier-info {
      padding: 6px 10px; background: transparent; border-radius: 6px;
      border: 1px solid var(--border); font-size: 11px; color: var(--text3);
      margin-bottom: 14px; display: flex; align-items: center; gap: 8px; line-height: 1.5;
    }
    .drill-tier-info .ti-icon { font-size: 13px; opacity: .7; flex-shrink: 0; }

    /* ─── RSVP BIONIC SPEED READER ──────────────────────────────────── */
    /* Trigger button — appears next to passage titles */
    .rsvp-trigger {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border2);
      background: var(--surface2); color: var(--text3);
      font-size: 11px; font-weight: 600; font-family: var(--font-m);
      cursor: pointer; transition: all var(--tr); letter-spacing: .04em;
      text-transform: uppercase; vertical-align: middle; margin-left: 10px;
      flex-shrink: 0;
    }
    .rsvp-trigger:hover { background: var(--accent-glow); color: var(--accent2); border-color: var(--accent); }
    .rsvp-trigger .rsvp-icon { font-size: 12px; }

    /* Modal overlay */
    #rsvp-overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(4, 8, 20, 0.92);
      backdrop-filter: blur(8px);
      display: none; align-items: center; justify-content: center;
    }
    #rsvp-overlay.rsvp-open { display: flex; }

    /* Modal box */
    #rsvp-modal {
      background: #080d1a;
      border: 1px solid rgba(99,120,180,0.22);
      border-radius: 20px;
      width: min(680px, 94vw);
      padding: 0;
      box-shadow: 0 24px 80px rgba(0,0,0,.8);
      display: flex; flex-direction: column;
      overflow: hidden;
      animation: rsvpIn .22s cubic-bezier(.4,0,.2,1);
    }
    @keyframes rsvpIn {
      from { opacity:0; transform: translateY(18px) scale(.97); }
      to   { opacity:1; transform: translateY(0) scale(1); }
    }

    /* Modal header */
    #rsvp-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 22px 14px;
      border-bottom: 1px solid rgba(99,120,180,0.12);
    }
    #rsvp-title {
      font-family: var(--font-d); font-size: 13px; font-weight: 700;
      color: var(--text2); text-transform: uppercase; letter-spacing: .1em;
    }
    #rsvp-passage-label {
      font-family: var(--font-m); font-size: 11px; color: var(--text3);
      max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #rsvp-close-btn {
      width: 28px; height: 28px; border-radius: 7px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--text3); font-size: 14px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all var(--tr); flex-shrink: 0;
    }
    #rsvp-close-btn:hover { background: var(--red-dim); color: var(--red); border-color: var(--red); }

    /* Word display stage */
    #rsvp-stage {
      display: flex; align-items: center; justify-content: center;
      min-height: 180px; padding: 32px 48px;
      position: relative; user-select: none;
    }
    /* Vertical guide lines flanking the ORP */
    #rsvp-stage::before, #rsvp-stage::after {
      content: ''; position: absolute; top: 28px; bottom: 28px;
      width: 1px; background: rgba(99,120,180,.18);
    }
    #rsvp-stage::before { left: calc(50% - 1px); }
    #rsvp-stage::after  { display: none; } /* single center line */

    #rsvp-word-wrap {
      /* 3-column grid: left half | ORP char | right half.
         The ORP column sits exactly at the horizontal center of the stage,
         aligned with the guide line. The before span grows rightward (text-align:right)
         and the after span grows leftward (text-align:left) — ORP never moves. */
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: baseline;
      width: 100%;
      font-family: 'DM Sans', sans-serif; /* even stroke weight, high legibility */
      font-size: 44px; font-weight: 600;
      color: var(--text); letter-spacing: .01em; line-height: 1.15;
    }
    #rsvp-word-before { color: var(--text); text-align: right; }
    #rsvp-word-orp {
      color: var(--red); font-weight: 700;
      text-shadow: 0 0 18px rgba(239,68,68,.35);
      text-align: center;
    }
    #rsvp-word-after { color: var(--text); text-align: left; }

    /* Status line below word */
    #rsvp-status {
      text-align: center; font-family: var(--font-m); font-size: 11px;
      color: var(--text3); margin-bottom: 4px; min-height: 16px;
      letter-spacing: .04em;
    }

    /* Progress bar */
    #rsvp-progress-wrap {
      padding: 0 22px 14px;
    }
    #rsvp-progress-track {
      height: 3px; background: var(--surface2); border-radius: 2px; overflow: hidden;
    }
    #rsvp-progress-fill {
      height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 2px; transition: width .12s linear;
    }
    #rsvp-progress-label {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--text3); font-family: var(--font-m);
      margin-top: 5px;
    }

    /* Controls section */
    #rsvp-controls {
      padding: 14px 22px 20px;
      border-top: 1px solid rgba(99,120,180,.10);
      display: flex; flex-direction: column; gap: 14px;
    }

    /* WPM row */
    .rsvp-wpm-row {
      display: flex; align-items: center; gap: 12px;
    }
    .rsvp-wpm-label {
      font-family: var(--font-m); font-size: 11px; color: var(--text3);
      text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; width: 32px;
    }
    #rsvp-slider {
      flex: 1; -webkit-appearance: none; appearance: none;
      height: 4px; border-radius: 2px; background: var(--surface2); outline: none;
      cursor: pointer;
    }
    #rsvp-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
      background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
      box-shadow: 0 0 6px var(--accent-glow);
    }
    #rsvp-slider::-moz-range-thumb {
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
    }
    #rsvp-wpm-val {
      font-family: var(--font-m); font-size: 13px; font-weight: 600;
      color: var(--accent2); min-width: 52px; text-align: right;
    }

    /* Speed presets */
    .rsvp-presets {
      display: flex; gap: 6px;
    }
    .rsvp-preset {
      flex: 1; padding: 6px 0; border-radius: 7px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text3); font-size: 11px; font-weight: 600;
      font-family: var(--font-m); cursor: pointer; transition: all var(--tr);
      text-align: center; text-transform: uppercase; letter-spacing: .04em;
    }
    .rsvp-preset:hover { border-color: var(--accent2); color: var(--text); }
    .rsvp-preset.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent2); }

    /* Button row */
    .rsvp-btn-row {
      display: flex; gap: 8px; align-items: center;
    }
    #rsvp-play-btn {
      flex: 1; padding: 11px; border-radius: 10px;
      background: var(--accent); color: #fff;
      font-family: var(--font-d); font-size: 15px; font-weight: 700;
      cursor: pointer; transition: all var(--tr); border: none;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    #rsvp-play-btn:hover { background: var(--accent2); transform: translateY(-1px); }
    #rsvp-play-btn.rsvp-playing { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); }
    #rsvp-play-btn.rsvp-playing:hover { background: var(--surface); color: var(--text); }
    .rsvp-btn-sm {
      padding: 10px 14px; border-radius: 9px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text2); font-size: 12px; font-weight: 600;
      font-family: var(--font-m); cursor: pointer; transition: all var(--tr);
      white-space: nowrap;
    }
    .rsvp-btn-sm:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }

    /* Options row */
    .rsvp-options-row {
      display: flex; align-items: center; gap: 16px;
    }
    .rsvp-checkbox-label {
      display: flex; align-items: center; gap: 7px;
      font-size: 12px; color: var(--text2); cursor: pointer;
      font-family: var(--font-b); user-select: none;
    }
    .rsvp-checkbox-label input[type=checkbox] {
      width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer;
    }
    .rsvp-punct-label { color: var(--text3); font-size: 11px; font-family: var(--font-m); }

    /* Completion screen */
    #rsvp-complete {
      display: none; flex-direction: column; align-items: center;
      justify-content: center; padding: 40px; gap: 12px; text-align: center;
    }
    #rsvp-complete.show { display: flex; }
    .rsvp-complete-icon { font-size: 44px; }
    .rsvp-complete-title {
      font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--text);
    }
    .rsvp-complete-sub { font-size: 13px; color: var(--text2); }
    .rsvp-complete-btns { display: flex; gap: 10px; margin-top: 8px; }

    /* Textbook chapter select dropdown */
    #rsvp-chapter-select {
      padding: 10px 14px 6px;
      border-bottom: 1px solid rgba(99,120,180,.10);
    }
    #rsvp-chapter-select select {
      width: 100%; padding: 8px 12px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border2);
      color: var(--text); font-family: var(--font-b); font-size: 13px;
      outline: none; cursor: pointer;
    }
    #rsvp-chapter-select select:focus { border-color: var(--accent); }

    /* ─── SLIDE PLAYER ─────────────────────────────────────────────── */
    #sp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
    #sp-overlay.sp-open{opacity:1;pointer-events:all}
    #sp-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;width:min(720px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)}
    .sp-player-wrap{display:flex;flex-direction:column;height:100%;min-height:0}
    .sp-player-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
    .sp-player-meta{font-size:11px;color:var(--text3);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
    #sp-close-btn{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;line-height:1}
    #sp-close-btn:hover{background:var(--bg3);color:var(--text)}
    .sp-player-progress{height:3px;background:var(--bg3);flex-shrink:0}
    .sp-player-progress-fill{height:100%;background:var(--accent);transition:width .35s ease;width:0%}
    .sp-player-stage{flex:1;overflow-y:auto;min-height:0}
    .sp-player-slide{min-height:100%}
    .sp-player-controls{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;gap:12px}
    .sp-player-audio-wrap{display:flex;align-items:center;gap:6px;min-width:0}
    .sp-player-audio-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px;padding:4px 6px;border-radius:6px;transition:background .15s;line-height:1}
    .sp-player-audio-btn:hover{background:var(--bg3)}
    .sp-player-audio-status{font-size:11px;color:var(--text3);font-family:var(--font-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
    .sp-player-counter{font-size:12px;color:var(--text3);font-family:var(--font-m);white-space:nowrap}
    .sp-player-btn{padding:8px 16px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:13px;cursor:pointer;transition:all .15s}
    .sp-player-btn:hover:not(:disabled){background:var(--surface);color:var(--text)}
    .sp-player-btn:disabled{opacity:.35;cursor:default}
    .sp-player-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
    .sp-player-btn.primary:hover:not(:disabled){background:#2563eb}
    .sp-player-complete{flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:16px;min-height:420px}
    .sp-player-complete-icon{font-size:48px}
    .sp-player-complete-title{font-size:20px;font-weight:700;color:var(--text)}
    .sp-player-complete-sub{font-size:14px;color:var(--text2);max-width:400px;line-height:1.6}
    .sp-player-complete-btns{display:flex;gap:12px;margin-top:8px}
    .sp-slides-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;border:1px solid var(--accent);background:var(--accent-glow);color:var(--accent2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;margin-left:8px;vertical-align:middle;line-height:1.4}
    .sp-slides-btn:hover{background:var(--accent);color:#fff}


    /* ─── REF PANEL ──────────────────────────────────────────────────── */
    #ref-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9100;opacity:0;pointer-events:none;transition:opacity .25s;}
    #ref-panel-overlay.visible{opacity:1;pointer-events:all;}
    #ref-panel{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--border2);z-index:9101;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.4);}
    #ref-panel.open{transform:translateX(0);}
    .ref-panel-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);}
    .ref-panel-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text);}
    .ref-panel-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;}
    .ref-panel-close:hover{background:var(--surface2);color:var(--text);}
    .ref-panel-body{flex:1;overflow-y:auto;padding:20px;}
    .ref-panel-section-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-m);margin-bottom:8px;}

    /* ─── FEEDBACK PANEL ─────────────────────────────────────────────── */
    #pp-feedback-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9100;opacity:0;pointer-events:none;transition:opacity .25s;}
    #pp-feedback-overlay.visible{opacity:1;pointer-events:all;}
    #pp-feedback-panel{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--border2);z-index:9101;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 32px rgba(0,0,0,.4);}
    #pp-feedback-panel.open{transform:translateX(0);}
    .pp-fb-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);}
    .pp-fb-header h3{margin:0;font-size:16px;font-weight:700;color:var(--text);}
    .pp-fb-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;}
    .pp-fb-close:hover{background:var(--surface2);color:var(--text);}
    .pp-fb-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
    #pp-fb-q-context{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--text2);line-height:1.5;display:none;}
    .pp-fb-field{display:flex;flex-direction:column;gap:5px;}
    .pp-fb-field label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.04em;}
    .pp-fb-field select,.pp-fb-field textarea{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:14px;padding:9px 11px;font-family:var(--font-b);outline:none;transition:border-color .15s;}
    .pp-fb-field select:focus,.pp-fb-field textarea:focus{border-color:var(--accent);}
    .pp-fb-field select option{background:var(--surface);}
    .pp-fb-field textarea{resize:vertical;min-height:90px;line-height:1.5;}
    .pp-fb-footer{padding:14px 20px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
    #pp-fb-submit{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;}
    #pp-fb-submit:hover:not(:disabled){background:var(--accent2);}
    #pp-fb-submit:disabled{opacity:.6;cursor:default;}
    .pp-fb-status{font-size:13px;text-align:center;min-height:18px;}
    .pp-fb-status-error{color:var(--red);}
    .pp-fb-status-success{color:#22c55e;}

    /* ═══════════════════════════════════════════════════════════════════
       MOBILE FIXES — all changes below are scoped to mobile breakpoints
       or are safe progressive enhancements (100dvh) with desktop fallback.
       Desktop layout is unaffected.
       ═══════════════════════════════════════════════════════════════════ */

    /* ── 1. dvh progressive enhancement (safe on desktop: dvh === vh there) ── */
    #app{height:100dvh;}
    #content{height:calc(100dvh - 60px);}

    /* ── 2. VISUAL COMPARISON TABLES — prevent horizontal overflow ── */
    .visual-block{overflow-x:auto;}
    .vis-compare,.vis-compare3,.vis-table{min-width:320px;}

    /* ═══════════════════════════════════════════════════════════════════
       TABLET + MOBILE  (≤ 768px)
       ═══════════════════════════════════════════════════════════════════ */
    @media(max-width:768px){
      /* ── Safe-area inset: bottom tab bar clears notch home indicator ── */
      #bottom-tabs{
        padding-bottom:env(safe-area-inset-bottom);
        height:calc(60px + env(safe-area-inset-bottom));
      }

      /* ── Content height: account for taller bottom-tabs on notched phones ── */
      #content{
        height:calc(100dvh - 60px - env(safe-area-inset-bottom));
        padding-bottom:calc(80px + env(safe-area-inset-bottom));
      }

      /* ── Toasts: lift above the 60px tab bar ── */
      #toast{bottom:calc(70px + env(safe-area-inset-bottom));right:16px;max-width:calc(100vw - 32px);}
      .inactivity-toast{bottom:calc(70px + env(safe-area-inset-bottom));}

      /* ── Install banner: sit above tab bar, not behind it ── */
      #install-banner{bottom:calc(60px + env(safe-area-inset-bottom));}

      /* ── Textbook mobile: two-view model (select → reader) ── */
      .tb-reader-body{padding:16px 18px;}
      .tb-passage-nav{
        position:sticky;bottom:0;
        padding:10px 16px;
        background:var(--bg2);
        border-radius:0;
        gap:6px;
      }
      #tb-select{max-width:100%;}
      #tb-session{max-width:100%;}
      .tb-topic-item{padding:12px 14px;}
      .tb-topic-group{border-radius:8px;margin-bottom:6px;}

      /* ── Flash card stage: don't eat the whole viewport on short phones ── */
      .fc-stage{height:min(320px,42vh);}

      /* ── RSVP speed reader: scale font down on narrow screens ── */
      #rsvp-word-wrap{font-size:clamp(26px,9vw,44px);}

      /* ── Results topic bar: let the bar column shrink on small screens ── */
      .topic-result-row{grid-template-columns:1fr auto minmax(60px,120px) auto;}
    }

    /* ═══════════════════════════════════════════════════════════════════
       SMALL PHONES  (≤ 480px)
       ═══════════════════════════════════════════════════════════════════ */
    @media(max-width:480px){
      /* ── Flashcard deck picker: compact on small phones ── */
      .fc-deck-list{max-height:260px;}

      /* ── Study schedule: horizontal scroll instead of cramped 7-col grid ── */
      .sched-cal-hdr,.sched-cal-grid{
        display:grid;
        grid-template-columns:repeat(7,minmax(40px,1fr));
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }
      /* Wrap the calendar in a scroll container via a utility class (see note) */
      .sched-cal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px;}

      /* ── Visual comparison tables: always horizontally scrollable ── */
      .vis-compare,.vis-compare3,.vis-table{
        display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
      }

      /* ── Training mode tab strip: allow horizontal scroll instead of wrapping ── */
      .tb-mode-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px;}
    }

    /* ═══════════════════════════════════════════════════════════════════
       PRACTICE MODE MOBILE FIXES
       All rules below are scoped to ≤768px or ≤480px.
       Desktop layout is completely untouched.
       ═══════════════════════════════════════════════════════════════════ */

    @media(max-width:768px){

      /* ── EXAM HEADER: break into 2 rows ─────────────────────────────── */
      /* Row 1: timer (left) + q-number (right)
         Row 2: progress bar (full width)
         "End Exam" button moves into the nav row via the rule below      */
      .exam-hdr{
        flex-wrap:wrap;
        gap:10px;
        padding:12px 16px;
      }
      /* Timer and q-number stay on row 1 (order them to opposite ends) */
      .exam-hdr > div:first-child{ order:1; }          /* timer block */
      .exam-prog-wrap{ order:3; flex-basis:100%; }      /* progress bar — full row */
      .exam-qnum{ order:2; margin-left:auto; }          /* q-number pushed right on row 1 */
      /* End Exam button: keep it in the header but float to its own row */
      .exam-hdr > .btn{ order:4; flex-basis:100%; width:100%; }

      /* ── DRILL SUBMIT/NEXT: sticky at bottom of screen ─────────────── */
      .drill-btn-row{
        position: sticky;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        background: var(--bg);
        padding: 10px 0 8px;
        margin-top: 16px;
        border-top: 1px solid var(--border);
        justify-content: stretch;
        gap: 10px;
      }
      .drill-btn-row .btn{ flex: 1; justify-content: center; }

      /* ── QUESTION CARD: less padding on mobile ───────────────────────── */
      .q-card{ padding: 14px 14px 10px; }

      /* ── EXAM NAV BUTTONS: full-width, equal-size ────────────────────── */
      #exam-session > div:last-child{ gap:8px; }
      #exam-prev{ flex:1; justify-content:center; }
      #exam-session > div:last-child > div{ display:flex; gap:8px; flex:1; }
      #exam-flag{ flex:1; justify-content:center; }
      #exam-next, #exam-submit{ flex:1; justify-content:center; }

      /* ── RESULTS TAB STRIP: scrollable instead of overflowing ───── */
      #drill-results [style*="width:fit-content"],
      #exam-results [style*="width:fit-content"] {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }