:root{
  /* ══════════════════════════════════════════════════════════
     LEARNING DEN — DESIGN SYSTEM COLORS  (Figma · Mar 2026)
     ══════════════════════════════════════════════════════════ */

  /* ── Brand / Core ── */
  --color-blue-30:#A6C8FF;
  --color-blue-40:#78A9FF;
  --color-blue-60:#0F62FE;
  --color-purple-40:#BE95FF;

  /* ── Gray Scale ── */
  --color-gray-10:#F4F4F4;
  --color-gray-60:#6F6F6F;
  --color-gray-100:#161616;

  /* ── Background ── */
  --color-bg:#F4F4F4;
  --color-bg-brand:#0F62FE;
  --color-bg-active:#8D8D8D;
  --color-bg-hover:#8D8D8D;
  --color-bg-selected:#8D8D8D;
  --color-bg-selected-hover:#8D8D8D;
  --color-bg-inverse:#393939;
  --color-bg-inverse-hover:#4C4C4C;

  /* ── Layer ── */
  --color-layer-01:#FFFFFF;
  --color-layer-02:#F4F4F4;
  --color-layer-03:#FFFFFF;
  --color-layer-hover-02:#E8E8E8;
  --color-layer-hover-03:#E8E8E8;
  --color-layer-active-01:#C6C6C6;
  --color-layer-active-02:#C6C6C6;
  --color-layer-active-03:#C6C6C6;
  --color-layer-selected-01:#E0E0E0;
  --color-layer-selected-02:#E0E0E0;
  --color-layer-selected-03:#E0E0E0;
  --color-layer-selected-hover:#CACACA;
  --color-layer-selected-disabled:#8D8D8D;
  --color-layer-accent-01:#E0E0E0;
  --color-layer-accent-hover-01:#CACACA;
  --color-layer-accent-active-01:#A8A8A8;

  /* ── Field ── */
  --color-field-01:#FFFFFF;
  --color-field-02:#F4F4F4;
  --color-field-03:#FFFFFF;
  --color-field-hover-01:#E8E8E8;
  --color-field-hover-02:#E8E8E8;
  --color-field-hover-03:#E8E8E8;

  /* ── Border ── */
  --color-border-subtle-00:#C6C6C6;
  --color-border-subtle-01:#E0E0E0;
  --color-border-subtle-02:#C6C6C6;
  --color-border-subtle-03:#E0E0E0;
  --color-border-subtle-selected:#C6C6C6;
  --color-border-strong-01:#8D8D8D;
  --color-border-strong-02:#8D8D8D;
  --color-border-strong-03:#8D8D8D;
  --color-border-inverse:#161616;
  --color-border-interactive:#0F62FE;
  --color-border-disabled:#C6C6C6;
  --color-border-tile-01:#A8A8A8;
  --color-border-tile-02:#C6C6C6;
  --color-border-tile-03:#A8A8A8;

  /* ── Text ── */
  --color-text-primary:#161616;
  --color-text-secondary:#525252;
  --color-text-placeholder:#A8A8A8;
  --color-text-helper:#6F6F6F;
  --color-text-on-color:#FFFFFF;
  --color-text-inverse:#FFFFFF;
  --color-text-disabled:#161616;
  --color-text-on-color-disabled:#8D8D8D;
  --color-text-error:#DA1E28;

  /* ── Link ── */
  --color-link-primary:#0F62FE;
  --color-link-primary-hover:#0043CE;
  --color-link-secondary:#0043CE;
  --color-link-visited:#8A3FFC;
  --color-link-inverse:#78A9FF;
  --color-link-inverse-hover:#A6C8FF;
  --color-link-inverse-active:#F4F4F4;
  --color-link-inverse-visited:#BE95FF;

  /* ── Icon ── */
  --color-icon-primary:#161616;
  --color-icon-secondary:#525252;
  --color-icon-on-color:#FFFFFF;
  --color-icon-inverse:#FFFFFF;
  --color-icon-interactive:#0F62FE;
  --color-icon-disabled:#161616;
  --color-icon-on-color-disabled:#8D8D8D;

  /* ── Support / Status ── */
  --color-support-error:#DA1E28;
  --color-support-success:#24A148;
  --color-support-warning:#F1C21B;
  --color-support-info:#0043CE;
  --color-support-caution-major:#FF832B;
  --color-support-caution-minor:#F1C21B;
  --color-support-undefined:#8A3FFC;
  --color-support-error-inverse:#FA4D56;
  --color-support-success-inverse:#42BE65;
  --color-support-warning-inverse:#F1C21B;
  --color-support-info-inverse:#4589FF;

  /* ── Focus ── */
  --color-focus:#0F62FE;
  --color-focus-inset:#FFFFFF;
  --color-focus-inverse:#FFFFFF;

  /* ── Button ── */
  --color-btn-primary:#0F62FE;
  --color-btn-primary-hover:#0353E9;
  --color-btn-primary-active:#002D9C;
  --color-btn-secondary:#393939;
  --color-btn-secondary-hover:#4C4C4C;
  --color-btn-secondary-active:#6F6F6F;
  --color-btn-tertiary:#0F62FE;
  --color-btn-tertiary-hover:#0353E9;
  --color-btn-tertiary-active:#002D9C;
  --color-btn-danger:#DA1E28;
  --color-btn-danger-hover:#BA1B23;
  --color-btn-danger-active:#750E13;
  --color-btn-separator:#E0E0E0;
  --color-btn-disabled:#C6C6C6;

  /* ── Miscellaneous ── */
  --color-interactive:#0F62FE;
  --color-highlight:#D0E2FF;
  --color-overlay:#161616;
  --color-toggle-off:#8D8D8D;

  /* ── Skeleton ── */
  --color-skeleton-bg:#E5E5E5;
  --color-skeleton-element:#C6C6C6;

  /* ── Tags ── */
  --color-tag-blue-bg:#D0E2FF;   --color-tag-blue-text:#0043CE;   --color-tag-blue-hover:#B8D3FF;
  --color-tag-cyan-bg:#BAE6FF;   --color-tag-cyan-text:#00539A;   --color-tag-cyan-hover:#99DAFF;
  --color-tag-green-bg:#A7F0BA;  --color-tag-green-text:#0E6027;  --color-tag-green-hover:#74E792;
  --color-tag-magenta-bg:#FFD6E8;--color-tag-magenta-text:#9F1853;--color-tag-magenta-hover:#FFBDDA;
  --color-tag-purple-bg:#E8DAFF; --color-tag-purple-text:#6929C4; --color-tag-purple-hover:#DCC7FF;
  --color-tag-red-bg:#FFD7D9;    --color-tag-red-text:#A2191F;    --color-tag-red-hover:#FFC2C5;
  --color-tag-teal-bg:#9EF0F0;   --color-tag-teal-text:#005D5D;   --color-tag-teal-hover:#57E5E5;
  --color-tag-gray-bg:#E0E0E0;   --color-tag-gray-text:#161616;   --color-tag-gray-hover:#D1D1D1;
  --color-tag-cool-gray-bg:#CDD3DA;--color-tag-cool-gray-text:#121619;--color-tag-cool-gray-hover:#C4C9D1;
  --color-tag-warm-gray-bg:#E5E0DF;--color-tag-warm-gray-text:#171414;--color-tag-warm-gray-hover:#D8D0CF;

  /* ══ Legacy token aliases — mapped to new design system ══ */
  --navy:#161616;        /* was #161616 */
  --navy2:#262626;       /* was #262626 */
  --navy-pale:#D0E2FF;   /* was #D0E2FF */
  --gold:#0F62FE;        /* was #0f62fe — primary brand blue */
  --gold2:#78A9FF;       /* was #78a9ff — light brand blue */
  --sky:#F4F4F4;         /* was #f4f4f4 */
  --ink:#161616;         /* was #161616 */
  --muted:#6F6F6F;       /* was #6F6F6F */
  --border:#E0E0E0;      /* was #E0E0E0 */
  --white:#F4F4F4;       /* was #f4f4f4 */
  --card:#FFFFFF;
  --green:#24A148;       /* was #24a148 */
  --red:#DA1E28;         /* was #da1e28 */
  --color-text-subtle:#525252;  /* was #525252 */
  --color-text-link:#0F62FE;    /* was #0f62fe */

  /* ── Spacing / Radius / Typography (unchanged) ── */
  --spacing:0.25rem;
  --radius-xs:0.125rem;
  --radius-sm:0.25rem;
  --radius-md:0.375rem;
  --radius-lg:0.5rem;
  --radius-xl:0.75rem;
  --radius-2xl:1rem;
  --radius-3xl:1.5rem;
  --radius-4xl:2rem;
  --radius-full:9999px;
  --text-xs:0.75rem;--text-xs--line-height:1.333;
  --text-sm:0.875rem;--text-sm--line-height:1.4286;
  --text-base:1rem;--text-base--line-height:1.5;
  --text-lg:1.125rem;--text-lg--line-height:1.5556;
  --text-xl:1.25rem;--text-xl--line-height:1.4;
  --text-2xl:1.5rem;--text-2xl--line-height:1.3333;
  --text-3xl:1.875rem;--text-3xl--line-height:1.2;
  --text-4xl:2.25rem;--text-4xl--line-height:1.1111;
  --text-5xl:3rem;--text-5xl--line-height:1;
  --text-6xl:3.75rem;--text-6xl--line-height:1;
  --font-heading:'Open Sans',sans-serif;
  --font-body:'Open Sans',sans-serif;
  --font-code:'Open Sans',sans-serif;
  --font-metric:'Open Sans',sans-serif;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-bold:700;
  --font-weight-heading:700;
  --font-weight-metric:653;
  --font-size-heading-xxl:32px;  --line-height-heading-xxl:36px;
  --font-size-heading-xl:28px;   --line-height-heading-xl:32px;
  --font-size-heading-l:24px;    --line-height-heading-l:28px;
  --font-size-heading-m:20px;    --line-height-heading-m:24px;
  --font-size-heading-s:16px;    --line-height-heading-s:20px;
  --font-size-heading-xs:14px;   --line-height-heading-xs:20px;
  --font-size-heading-xxs:12px;  --line-height-heading-xxs:16px;
  --font-size-body-l:16px;       --line-height-body-l:24px;
  --font-size-body-m:14px;       --line-height-body-m:20px;
  --font-size-body-s:12px;       --line-height-body-s:16px;
  --font-size-metric-l:28px;     --line-height-metric-l:32px;
  --font-size-metric-m:24px;     --line-height-metric-m:28px;
  --font-size-metric-s:16px;     --line-height-metric-s:20px;
  --font-size-code:12px;         --line-height-code:20px;
  --letter-spacing-default:0;
  --letter-spacing-label:0.48px;
}
/* ╔══════════════════════════════════════════════════════════════════════╗
   ║              LEARNING DEN AI — GLOBAL DESIGN SYSTEM                 ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║  Based on Tailwind CSS + Material Design 3 guidelines               ║
   ║                                                                      ║
   ║  SPACING — 8px STEP GRID  ✦  ALWAYS use multiples of 8             ║
   ║  ─────────────────────────────────────────────────────────────────  ║
   ║  Every margin, padding, and gap MUST be a multiple of 8px.         ║
   ║  Allowed: 8 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96px            ║
   ║  Exception: 4px ONLY for micro-nudges (icon offsets, hairlines).   ║
   ║  !! NEVER use 13px, 18px, 22px or other off-grid values !!         ║
   ║  !! If unavoidable, use Tailwind [arbitrary] syntax e.g. [18px] !! ║
   ║                                                                      ║
   ║  Tailwind equivalents (--spacing: 0.25rem base):                   ║
   ║    p-2 = 8px   p-4 = 16px  p-6 = 24px  p-8 = 32px                ║
   ║    p-10= 40px  p-12= 48px  p-16= 64px  p-20= 80px                 ║
   ║                                                                      ║
   ║  Layout rhythm (8px grid "Do" reference):                          ║
   ║    Column gutter   → 16px  (gap-4)                                 ║
   ║    Card padding    → 24px  (p-6)                                   ║
   ║    Section padding → 32px desktop / 24px mobile  (p-8 / p-6)      ║
   ║    Block rhythm    → 24px between stacked blocks  (mb-6)           ║
   ║    Inline spacing  →  8px between sibling elements (gap-2)         ║
   ║                                                                      ║
   ║  BORDER RADIUS (Tailwind scale)                                     ║
   ║    --radius-sm=4px  --radius-md=6px  --radius-lg=8px               ║
   ║    --radius-xl=12px  --radius-2xl=16px  --radius-3xl=24px          ║
   ║    --radius-4xl=32px  --radius-full=9999px                         ║
   ║                                                                      ║
   ║  TYPOGRAPHY — LearningDen Typography · March 2026                   ║
   ║    Source: Figma Learning-Den, Node 25:61035                        ║
   ║                                                                      ║
   ║  TYPEFACES                                                           ║
   ║    --font-heading / --font-body → Open Sans                         ║
   ║    --font-code                  → Open Sans                         ║
   ║    --font-metric                → Open Sans                         ║
   ║                                                                      ║
   ║  HEADING  (font-weight: 700)                                        ║
   ║    XXL   32px / 36px lh   Page titles                              ║
   ║    XL    28px / 32px lh   Section headings                         ║
   ║    L     24px / 28px lh   Sub-sections                             ║
   ║    M     20px / 24px lh   Card / panel titles                      ║
   ║    S     16px / 20px lh   Sidebar / labels                         ║
   ║    XS    14px / 20px lh   Compact headers                          ║
   ║    XXS   12px / 16px lh   Eyebrow / micro                          ║
   ║                                                                      ║
   ║  BODY   (Regular 400 · Medium 500 · Bold 700)                       ║
   ║    L     Regular / Medium / Bold   16px / 24px lh  Lead copy       ║
   ║    M     Regular / Medium / Bold   14px / 20px lh  DEFAULT ← use  ║
   ║    S     Regular / Medium / Bold   12px / 16px lh  Captions        ║
   ║                                                                      ║
   ║  METRIC  (font-weight: 653)                                         ║
   ║    L     28px / 32px lh   Large stats / KPIs                       ║
   ║    M     24px / 28px lh   Mid stats                                ║
   ║    S     16px / 20px lh   Inline metrics                           ║
   ║                                                                      ║
   ║  CODE                                                                ║
   ║    Code  12px / 20px lh   Open Sans — code blocks                  ║
   ║                                                                      ║
   ║  COMPONENTS — padding (follow 8px grid):                           ║
   ║    Button:       px-5 (20px→round to 24px) py-3 (12px)            ║
   ║    Input/Select: px-4 (16px) py-3 (12px) + pr-[42px] for arrows   ║
   ║    Card:         p-6 (24px)                                         ║
   ║    Section:      px-8 (32px) desktop · px-4 (16px) mobile         ║
   ║    Filter bar:   px-4 (16px) py-3 (12px)                           ║
   ║                                                                      ║
   ║  BUTTONS — RULE: every <button> must use border-radius:full (pill)  ║
   ║    Applied globally via   button { border-radius:var(--radius-full) }║
   ║    Never use --radius-lg / --radius-xl / --radius-2xl on buttons.  ║
   ║                                                                      ║
   ║  BUTTON STATES (use the right semantic level per action):           ║
   ║    .btn-danger    → red fill      destructive (delete/remove)       ║
   ║    .btn-primary   → navy fill     ONE main action per screen        ║
   ║    .btn-secondary → navy outline  secondary alongside primary       ║
   ║    .btn-tertiary  → gray outline  low-emphasis passive action       ║
   ║    .btn-link      → no bg/border  inline text-style                 ║
   ║    .btn-icon      → icon-only pill compact contextual               ║
   ║    Add .btn-loading to any for a spinner progress state             ║
   ║                                                                      ║
   ║  SELECTS — RULE: every <select> must have                           ║
   ║    appearance:none  +  padding-right:42px  +  chevron SVG bg       ║
   ║    Applied globally via   select { ... }   below.                  ║
   ║    Never use browser's native arrow — always custom chevron.        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;}
body{font-family:var(--font-body);font-size:var(--font-size-body-m);line-height:var(--line-height-body-m);background:var(--white);color:var(--color-text-primary);min-height:100vh;padding-top:58px;}

/* ── GLOBAL BUTTON RESET — every <button> in the project gets full radius ── */
/* Never use a non-pill radius on a CTA. Individual .btn-* classes may still  */
/* override padding/color, but border-radius defaults to pill here.            */
button{ border-radius:var(--radius-full); font-family:var(--font-body); cursor:pointer; }
code,pre,kbd{font-family:var(--font-code);font-size:var(--font-size-code);line-height:var(--line-height-code);}

/* ── LearningDen Typography — body weight utilities ─────────────────────────
   Usage: combine a size class with a weight class, e.g.
     <p class="ld-body-m ld-regular"> or <span class="ld-body-s ld-bold">
   ────────────────────────────────────────────────────────────────────────── */
/* Size + line-height */
.ld-body-l{font-size:var(--font-size-body-l);line-height:var(--line-height-body-l);}
.ld-body-m{font-size:var(--font-size-body-m);line-height:var(--line-height-body-m);}
.ld-body-s{font-size:var(--font-size-body-s);line-height:var(--line-height-body-s);}
/* Weight modifiers */
.ld-regular{font-weight:var(--font-weight-regular);}
.ld-medium {font-weight:var(--font-weight-medium);}
.ld-bold   {font-weight:var(--font-weight-bold);}
/* Heading shorthands */
.ld-heading-xxl{font-family:var(--font-heading);font-size:var(--font-size-heading-xxl);line-height:var(--line-height-heading-xxl);font-weight:var(--font-weight-heading);}
.ld-heading-xl {font-family:var(--font-heading);font-size:var(--font-size-heading-xl); line-height:var(--line-height-heading-xl); font-weight:var(--font-weight-heading);}
.ld-heading-l  {font-family:var(--font-heading);font-size:var(--font-size-heading-l);  line-height:var(--line-height-heading-l);  font-weight:var(--font-weight-heading);}
.ld-heading-m  {font-family:var(--font-heading);font-size:var(--font-size-heading-m);  line-height:var(--line-height-heading-m);  font-weight:var(--font-weight-heading);}
.ld-heading-s  {font-family:var(--font-heading);font-size:var(--font-size-heading-s);  line-height:var(--line-height-heading-s);  font-weight:var(--font-weight-heading);}
.ld-heading-xs {font-family:var(--font-heading);font-size:var(--font-size-heading-xs); line-height:var(--line-height-heading-xs); font-weight:var(--font-weight-heading);}
.ld-heading-xxs{font-family:var(--font-heading);font-size:var(--font-size-heading-xxs);line-height:var(--line-height-heading-xxs);font-weight:var(--font-weight-heading);}
/* Metric shorthands */
.ld-metric-l{font-family:var(--font-metric);font-size:var(--font-size-metric-l);line-height:var(--line-height-metric-l);font-weight:var(--font-weight-metric);}
.ld-metric-m{font-family:var(--font-metric);font-size:var(--font-size-metric-m);line-height:var(--line-height-metric-m);font-weight:var(--font-weight-metric);}
.ld-metric-s{font-family:var(--font-metric);font-size:var(--font-size-metric-s);line-height:var(--line-height-metric-s);font-weight:var(--font-weight-metric);}
/* Code shorthand */
.ld-code{font-family:var(--font-code);font-size:var(--font-size-code);line-height:var(--line-height-code);}

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — BUTTON STATES
   Based on Material Design 3 button hierarchy.
   Use the right semantic level to reduce cognitive noise.

   DANGER    — filled red.    Destructive actions (delete, remove).
   PRIMARY   — filled navy.   The single main action per screen.
   SECONDARY — navy outline.  Supporting action alongside a Primary.
               Rule: stroke color = what the fill color would be.
   TERTIARY  — gray outline.  Low-emphasis, passive actions.
   LINK      — no border/bg.  Inline text-style action.
   ICON      — icon-only pill. Compact, contextual actions.

   !! RESOURCE CARDS use Secondary (outline) for View — not Primary fill !!
   !! That was causing cognitive noise from too much dark navy on cards.   !!
   ════════════════════════════════════════════════════════════════════════════ */

/* DANGER — red fill, white text */
.btn-danger{
  padding:10px 22px; background:#da1e28; color:white;
  border:none; font-weight:700; font-size:var(--font-size-body-m);
  transition:all 0.18s; white-space:nowrap;
}
.btn-danger:hover{ background:#ba1b23; box-shadow:0 4px 14px rgba(218,30,40,0.35); }
.btn-danger:active{ transform:scale(0.97); }

/* PRIMARY — navy fill, white text (already handled by .btn-primary) */
/* Use @extend pattern: .btn-primary keeps its existing definition    */

/* SECONDARY — transparent bg, navy stroke, navy text */
/* "stroke color = what the fill color would be" rule                 */
.btn-secondary{
  padding:10px 22px; background:transparent; color:var(--navy);
  border:1.5px solid var(--navy); font-weight:600; font-size:var(--font-size-body-m);
  transition:all 0.18s; white-space:nowrap;
}
.btn-secondary:hover{ background:var(--navy-pale); }
.btn-secondary:active{ transform:scale(0.97); }

/* SECONDARY GOLD — transparent bg, gold stroke, gold text */
.btn-secondary-gold{
  padding:10px 22px; background:transparent; color:var(--gold);
  border:1.5px solid var(--gold); font-weight:600; font-size:var(--font-size-body-m);
  transition:all 0.18s; white-space:nowrap;
}
.btn-secondary-gold:hover{ background:#fffbf0; border-color:var(--gold2); color:var(--gold2); }

/* TERTIARY — light gray stroke, navy text */
.btn-tertiary{
  padding:10px 22px; background:transparent; color:var(--navy);
  border:1.5px solid var(--border); font-weight:500; font-size:var(--font-size-body-m);
  transition:all 0.18s; white-space:nowrap;
}
.btn-tertiary:hover{ border-color:#8D8D8D; background:#f4f4f4; }

/* LINK — no bg, no border, text only */
.btn-link{
  padding:4px 2px; background:none; border:none; color:var(--navy);
  font-weight:600; font-size:var(--font-size-body-m); text-decoration:none;
  transition:color 0.15s;
}
.btn-link:hover{ color:var(--gold); }

/* ICON — pill, icon-only, no label */
.btn-icon{
  width:36px; height:36px; padding:0; background:transparent;
  border:1.5px solid var(--border); color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.btn-icon:hover{ border-color:var(--navy); color:var(--navy); background:#f4f4f4; }

/* Progress states (spinner inside Primary/Secondary) */
.btn-loading{ position:relative; color:transparent !important; pointer-events:none; }
.btn-loading::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:16px;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:var(--radius-full); animation:spin 0.7s linear infinite;
}
.btn-primary.btn-loading::after{ border-color:rgba(255,255,255,0.5); border-top-color:transparent; }
.btn-secondary.btn-loading::after{ border-color:var(--navy); border-top-color:transparent; }

/* ── GLOBAL SELECT RESET — applies to every <select> in the project ── */
/* Never use native browser arrows. Always use the custom Lato chevron.  */
select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f62fe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:16px !important;
  cursor:pointer;
}
/* ── Header ── */
header{background:#161616;height:58px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 40px 0 16px;position:fixed;top:0;left:220px;right:0;z-index:200;border-bottom:2px solid var(--gold);box-shadow:0 2px 20px rgba(0,0,0,0.3);gap:20px;transition:left 0.25s ease;}
header.public-nav{left:0;padding-left:24px;}
.hdr-pub-logo{display:none;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;margin-right:8px;}.hdr-pub-logo:hover{opacity:0.85;}
.hdr-pub-logo img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);}
.hdr-pub-logo span{font-family:var(--font-heading);font-size:18px;color:white;white-space:nowrap;font-weight:700;letter-spacing:0.1px;}
.hdr-pub-logo span em{color:var(--gold2);font-style:normal;font-size:11px;vertical-align:super;margin-left:2px;}
.logo-wrap{display:flex;align-items:center;gap:11px;cursor:pointer;flex-shrink:0;}
.logo-img{width:48px;height:48px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--gold);}
.logo-name{font-family:var(--font-heading);font-size:22px;color:white;white-space:nowrap;letter-spacing:0.1px;}
.logo-name .logo-ai{color:var(--gold2);font-size:12px;font-family:var(--font-body);font-weight:700;vertical-align:super;margin-left:3px;letter-spacing:0;}
.logo-sub{display:none;}
.header-nav{display:flex;gap:28px;align-items:center;justify-content:center;}
.nav-link{color:rgba(255,255,255,0.8);font-size:var(--font-size-body-m);font-weight:500;cursor:pointer;font-family:var(--font-body);transition:color 0.18s;background:none;border:none;padding:0;white-space:nowrap;}
.nav-link:hover{color:white;}
.header-right{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-shrink:0;}
.header-left{display:flex;align-items:center;gap:0;flex-shrink:0;}
.hdr-sidebar-toggle{display:none!important;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;border-radius:8px;cursor:pointer;color:rgba(255,255,255,0.65);transition:color 0.18s,background 0.18s;flex-shrink:0;}
.hdr-sidebar-toggle:hover{color:white;background:rgba(255,255,255,0.1);}
.hdr-sidebar-toggle svg{transition:transform 0.25s ease;}
.sidebar-collapsed .hdr-sidebar-toggle svg{transform:scaleX(-1);}
.user-badge{background:var(--gold);color:var(--navy);padding:6px 16px;border-radius:var(--radius-full);font-size:var(--font-size-body-m);font-weight:700;font-family:var(--font-body);letter-spacing:0.3px;user-select:none;transition:background 0.18s;}.user-badge:hover{background:#0353E9;}.user-dropdown{position:relative;}.user-menu{position:absolute;right:0;top:calc(100% + 8px);background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:9999;overflow:hidden;}.user-menu-item{display:block;width:100%;padding:12px 18px;font-size:var(--font-size-body-m);font-family:var(--font-body);color:var(--navy);background:none;border:none;text-align:left;cursor:pointer;transition:background 0.15s;font-weight:500;}.user-menu-item:hover{background:#f4f4f4;}.user-menu-logout{color:#da1e28;border-top:1px solid var(--border);}.user-menu-logout:hover{background:#fff0f2;}
.btn-hdr{background:transparent;border:1.5px solid rgba(255,255,255,0.5);color:white;padding:8px 20px;border-radius:var(--radius-full);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.18s;white-space:nowrap;}
.btn-hdr:hover{background:rgba(255,255,255,0.1);border-color:white;color:white;}
.btn-hdr-gold{background:var(--gold);border:none;color:white;padding:8px 20px;border-radius:var(--radius-full);font-size:var(--font-size-body-m);font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.18s;white-space:nowrap;}
.btn-hdr-gold:hover{background:var(--gold2);}
/* ── Hero ── */
.land-hero{background:linear-gradient(135deg,#111111 0%,#161616 45%,#161616 100%);min-height:calc(100vh - 58px);display:flex;align-items:center;position:relative;overflow:hidden;}
.land-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 68% 50%,rgba(22,42,80,0.7) 0%,transparent 65%);pointer-events:none;}
.hero-inner{max-width:1400px;margin:0 auto;padding:30px 80px;display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:stretch;width:100%;position:relative;z-index:1;min-height:calc(100vh - 58px);box-sizing:border-box;}
.hero-powered{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.hero-powered-lbl{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.4);letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-right:4px;}
.hero-ai-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-full);padding:8px 20px;font-size:var(--font-size-body-l);color:rgba(255,255,255,0.9);font-family:var(--font-body);font-weight:600;}
.hero-left h1{font-family:var(--font-heading);font-size:clamp(32px,5.5vw,56px);color:white;line-height:1.06;margin-bottom:20px;font-weight:900;}
.hero-left h1 em{color:var(--gold2);font-style:italic;display:block;}
.hero-left > p{font-size:var(--font-size-body-l);color:rgba(170,181,213,0.85);line-height:1.8;margin-bottom:32px;max-width:500px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.btn-hero-p{padding:15px 32px;background:var(--gold);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;transition:all 0.25s;}
.btn-hero-p:hover{background:var(--gold2);transform:translateY(-2px);}
.btn-hero-s{padding:15px 32px;background:rgba(255,255,255,0.07);color:white;border:1.5px solid rgba(255,255,255,0.35);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-l);font-weight:600;cursor:pointer;transition:all 0.25s;}
.btn-hero-s:hover{background:rgba(255,255,255,0.13);}
.hero-social-proof{display:flex;align-items:center;gap:14px;}
.avatar-stack{display:flex;}
.avatar-stack .av{width:34px;height:34px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:var(--font-size-body-s);font-weight:800;display:flex;align-items:center;justify-content:center;border:2.5px solid #111111;margin-left:-9px;font-family:var(--font-heading);}
.avatar-stack .av:first-child{margin-left:0;}
.avatar-stack .av.av-name{width:44px!important;height:44px;border-radius:var(--radius-full);font-size:9px;margin-left:-17px;padding:0 2px;white-space:nowrap;overflow:hidden;line-height:1.1;text-align:center;}
.avatar-stack .av.av-name:first-child{margin-left:0;}
.hero-more-label{font-size:12px;font-weight:600;color:rgba(255,255,255,0.45);margin-left:6px;letter-spacing:0.5px;align-self:center;}
.hero-social-txt{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.55);}
.hero-social-txt strong{color:var(--gold2);font-weight:700;}
/* Hero right */
.hero-right{position:relative;display:flex;align-items:stretch;justify-content:center;}
.hero-visual-card{background:linear-gradient(145deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);border:1.5px solid var(--gold2);border-radius:var(--radius-3xl);padding:40px 40px;text-align:center;position:relative;width:100%;backdrop-filter:blur(4px);box-shadow:0 24px 70px rgba(120,169,255,0.35),0 8px 28px rgba(120,169,255,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hero-visual-logo{width:320px;height:320px;border-radius:var(--radius-full);object-fit:cover;margin:0 auto 18px;display:block;border:3px solid rgba(15,98,254,0.45);box-shadow:0 0 50px rgba(15,98,254,0.45),0 0 100px rgba(15,98,254,0.15);}
.hero-visual-name{font-family:var(--font-heading);font-size:var(--font-size-heading-l);color:var(--gold2);font-weight:700;margin-bottom:5px;}
.hero-visual-sub{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.38);letter-spacing:2.5px;text-transform:uppercase;}
.hero-float{position:absolute;background:rgba(12,19,38,0.92);border:1px solid rgba(255,255,255,0.11);border-radius:var(--radius-2xl);padding:11px 16px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.45);z-index:10;}
.hero-float-top{top:40px;left:-28px;animation:floatUpDown 3.5s ease-in-out infinite;}
.hero-float-bottom{bottom:18px;right:-18px;animation:floatUpDown 4s ease-in-out infinite 0.8s;}
@keyframes floatUpDown{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero-float-icon{width:36px;height:36px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-float-icon.green{background:rgba(5,150,105,0.18);color:#42BE65;}
.hero-float-icon.gold{background:rgba(15,98,254,0.18);color:var(--gold2);}
.hero-float-lbl{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.4);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;font-weight:600;}
.hero-float-val{font-size:var(--font-size-body-m);color:white;font-weight:700;}
/* ── Stats Bar ── */
.stats-bar{background:#111111;border-top:1px solid rgba(15,98,254,0.25);border-bottom:1px solid rgba(15,98,254,0.25);padding:38px 40px;display:flex;justify-content:center;align-items:center;}
.stat-item{text-align:center;padding:0 52px;flex:1;max-width:260px;}
.stat-num{font-family:var(--font-metric);font-size:var(--font-size-metric-l);color:var(--gold2);font-weight:var(--font-weight-metric);line-height:var(--line-height-metric-l);}
.stat-label{font-size:var(--font-size-body-s);color:#6F6F6F;letter-spacing:2px;text-transform:uppercase;margin-top:8px;font-weight:600;}
.stat-divider{width:1px;height:64px;background:rgba(255,255,255,0.1);flex-shrink:0;}
/* ── Features (dark) ── */
.features{padding:88px 40px;background:#111111;}
.features h2{font-family:var(--font-heading);font-size:clamp(28px,4vw,32px);text-align:center;color:white;margin-bottom:14px;font-weight:900;}
.features-sub{text-align:center;color:rgba(170,181,213,0.62);font-size:var(--font-size-body-l);margin-bottom:64px;max-width:620px;margin-left:auto;margin-right:auto;line-height:1.75;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1060px;margin:0 auto;}
.feat-card{background:rgba(255,255,255,0.038);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-3xl);padding:34px 28px;transition:all 0.3s;}
.feat-card:hover{border-color:rgba(15,98,254,0.35);background:rgba(255,255,255,0.065);transform:translateY(-4px);}
.feat-icon{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:var(--radius-2xl);margin-bottom:22px;background:#161616;}
.feat-icon svg{color:var(--gold2);}
.feat-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:white;margin-bottom:10px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.feat-card p{font-size:var(--font-size-body-m);color:rgba(160,170,200,0.7);line-height:1.75;}
.pro-tag{font-size:var(--font-size-body-s);font-weight:800;letter-spacing:0.8px;background:rgba(15,98,254,0.18);color:var(--gold2);border:1px solid rgba(15,98,254,0.38);padding:3px 8px;border-radius:var(--radius-md);text-transform:uppercase;vertical-align:middle;flex-shrink:0;}
/* ── How It Works ── */
.how-it-works{background:#f4f4f4;padding:88px 40px;}
.how-it-works h2{font-family:var(--font-heading);font-size:clamp(28px,4vw,32px);text-align:center;color:var(--navy);margin-bottom:14px;font-weight:900;}
.hiw-sub{text-align:center;color:var(--muted);font-size:var(--font-size-body-l);margin-bottom:60px;max-width:540px;margin-left:auto;margin-right:auto;line-height:1.75;}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:900px;margin:0 auto;}
.hiw-step{text-align:center;padding:36px 24px;background:white;border-radius:var(--radius-3xl);border:1.5px solid var(--border);transition:all 0.25s;}
.hiw-step:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,0.08);}
.hiw-step-num{width:54px;height:54px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;font-size:var(--font-size-heading-m);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--font-heading);}
.hiw-step h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--navy);margin-bottom:10px;font-weight:700;}
.hiw-step p{font-size:var(--font-size-body-m);color:var(--muted);line-height:1.7;}
/* ── Pricing ── */
.pricing{padding:88px 40px;background:#f4f4f4;}
.pricing h2{font-family:var(--font-heading);font-size:clamp(28px,4vw,32px);text-align:center;color:var(--navy);margin-bottom:14px;font-weight:900;}
.pricing-sub{text-align:center;color:var(--muted);font-size:var(--font-size-body-l);margin-bottom:64px;max-width:620px;margin-left:auto;margin-right:auto;line-height:1.75;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1060px;margin:0 auto;align-items:start;}
.pricing-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-4xl);padding:40px 34px;transition:all 0.3s;position:relative;}
.pricing-card:hover{box-shadow:0 10px 40px rgba(0,0,0,0.1);transform:translateY(-2px);}
.pricing-card.featured{background:var(--navy);border-color:var(--gold);transform:translateY(-12px);box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.pricing-card.featured:hover{transform:translateY(-16px);}
.pricing-popular{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:var(--font-size-body-s);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 18px;border-radius:var(--radius-full);white-space:nowrap;}
.pricing-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-l);font-weight:700;margin-bottom:10px;color:var(--navy);}
.pricing-card.featured h3{color:white;}
.pricing-desc{font-size:var(--font-size-body-m);color:var(--muted);margin-bottom:28px;min-height:40px;line-height:1.6;}
.pricing-card.featured .pricing-desc{color:rgba(255,255,255,0.6);}
.pricing-price{font-family:var(--font-heading);font-size:var(--font-size-heading-xxl);font-weight:900;color:var(--navy);margin-bottom:28px;line-height:1;}
.pricing-price span{font-size:var(--font-size-body-l);font-weight:500;color:var(--muted);font-family:var(--font-body);}
.pricing-card.featured .pricing-price{color:white;}
.pricing-card.featured .pricing-price span{color:rgba(255,255,255,0.5);}
.pricing-features{list-style:none;margin-bottom:32px;}
.pricing-features li{display:flex;align-items:flex-start;gap:12px;font-size:var(--font-size-body-m);color:#525252;padding:9px 0;border-bottom:1px solid var(--border);}
.pricing-features li:last-child{border-bottom:none;}
.pricing-card.featured .pricing-features li{color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.12);}
.pricing-features li svg{flex-shrink:0;color:var(--navy);margin-top:1px;}
.pricing-card.featured .pricing-features li svg{color:var(--gold2);}
.btn-pricing{width:100%;padding:14px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;transition:all 0.2s;border:2px solid var(--navy);background:transparent;color:var(--navy);}
.btn-pricing:hover{background:var(--navy);color:white;}
.btn-pricing-featured{width:100%;padding:14px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;transition:all 0.2s;border:none;background:var(--gold);color:var(--navy);}
.btn-pricing-featured:hover{background:var(--gold2);}
/* ── CTA ── */
.land-cta{background:var(--navy);padding:80px 40px;text-align:center;position:relative;overflow:hidden;}
.land-cta::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:rgba(15,98,254,0.15);border-radius:var(--radius-full);filter:blur(80px);pointer-events:none;}
.land-cta img{width:96px;height:96px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--gold);margin:0 auto 28px;display:block;box-shadow:0 0 40px rgba(15,98,254,0.4);}
.land-cta h2{font-family:var(--font-heading);font-size:clamp(28px,4vw,56px);color:white;font-weight:900;margin-bottom:18px;position:relative;z-index:1;}
.land-cta p{font-size:var(--font-size-heading-m);color:rgba(255,255,255,0.65);margin-bottom:40px;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.7;position:relative;z-index:1;}
.btn-cta{padding:18px 48px;background:var(--gold);color:var(--navy);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-heading-m);font-weight:700;cursor:pointer;transition:all 0.25s;position:relative;z-index:1;box-shadow:0 0 30px rgba(15,98,254,0.4);}
.btn-cta:hover{background:var(--gold2);transform:scale(1.04);}
/* ── Dark Footer ── */
.land-footer{background:#111111;padding:64px 40px 32px;border-top:1px solid rgba(255,255,255,0.08);}
.land-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;max-width:1060px;margin:0 auto 48px;}
.lf-brand{font-family:var(--font-heading);font-size:var(--font-size-heading-l);color:white;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.lf-brand .lf-ai{color:var(--gold2);}
.lf-desc{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.5);line-height:1.8;max-width:300px;margin-bottom:24px;}
.lf-social{display:flex;gap:12px;}
.lf-social a{width:38px;height:38px;border-radius:var(--radius-full);background:rgba(255,255,255,0.12);border:1.5px solid rgba(255,255,255,0.22);color:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;transition:all 0.2s;text-decoration:none;}
.lf-social a:hover{background:var(--gold);color:var(--navy);}
.lf-col h4{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:white;font-weight:700;margin-bottom:20px;}
.lf-col ul{list-style:none;}
.lf-col ul li{margin-bottom:12px;}
.lf-col ul li a{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.15s;cursor:pointer;}
.lf-col ul li a:hover{color:var(--gold2);}
.lf-col-contact p{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.5);line-height:1.8;}
.lf-col-contact a{color:rgba(255,255,255,0.5);text-decoration:none;}
.lf-col-contact a:hover{color:var(--gold2);}
.land-footer-bottom{max-width:1060px;margin:0 auto;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.lf-copy{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.35);}
.lf-links{display:flex;gap:24px;}
.lf-links a{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.35);text-decoration:none;transition:color 0.15s;}
.lf-links a:hover{color:white;}
#appPage{display:none;background:#f4f4f4;min-height:100vh;}
.container{max-width:860px;margin:0 auto;padding:40px 24px 80px;}
#mainApp{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);width:100vw;margin-top:-40px;margin-bottom:-80px;}
.login-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-3xl);padding:44px;text-align:center;max-width:480px;margin:0 auto;box-shadow:0 8px 40px rgba(17,30,56,0.1);}
.login-logo{width:80px;height:80px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--gold);margin:0 auto 18px;display:block;}
.login-card h2{font-family:var(--font-heading);font-size:var(--font-size-heading-l);color:var(--navy);margin-bottom:7px;}
.login-card p{font-size:var(--font-size-body-m);color:var(--muted);margin-bottom:26px;line-height:1.6;}
.ifield{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-l);outline:none;transition:border-color 0.2s;margin-bottom:10px;}
.ifield:focus{border-color:var(--navy);}
.ifield.upper{text-transform:uppercase;letter-spacing:2px;text-align:center;}
/* select.ifield arrow now handled by global select{} rule above */
.btn-primary{width:100%;padding:14px;background:var(--navy);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-heading);font-size:var(--font-size-heading-m);cursor:pointer;transition:all 0.2s;}
.btn-primary:hover:not(:disabled){background:var(--navy2);}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;}
.login-err{color:var(--red);font-size:var(--font-size-body-m);margin-top:8px;display:none;padding:9px 14px;background:#fff0f2;border-radius:var(--radius-lg);border:1px solid #ffc2c5;}
/* ── Student Welcome Card ── */
.student-bar{background:linear-gradient(135deg,#161616 0%,#262626 60%,#262626 100%);border-radius:var(--radius-3xl);padding:22px 24px;margin-bottom:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(17,30,56,0.4);}
.student-bar::before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:var(--radius-full);background:radial-gradient(ellipse,rgba(15,98,254,0.18) 0%,transparent 70%);pointer-events:none;}
.student-bar::after{content:"";position:absolute;bottom:-50px;left:30%;width:220px;height:120px;border-radius:var(--radius-full);background:rgba(255,255,255,0.03);pointer-events:none;}
.sb-avatar{width:52px;height:52px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:var(--font-size-heading-m);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2.5px solid rgba(255,255,255,0.25);box-shadow:0 4px 14px rgba(0,0,0,0.2);font-family:var(--font-heading);overflow:hidden;}.sb-avatar-upload-hint{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;background:var(--gold);border-radius:var(--radius-full);border:2px solid var(--navy);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-body-s);line-height:1;}.sb-avatar-wrap:hover .sb-avatar{opacity:0.85;}
.sb-info{flex:1;min-width:0;}
.sb-greeting{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.6);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px;}
.sb-name{font-size:var(--font-size-heading-m);color:white;font-weight:700;font-family:var(--font-heading);}
.sb-chips{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.sb-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-3xl);padding:4px 12px;font-size:var(--font-size-body-s);color:rgba(255,255,255,0.85);font-weight:600;backdrop-filter:blur(4px);}
.sb-chip span{font-weight:800;color:var(--gold2);}
.sb-timer{display:inline-flex;align-items:center;gap:5px;background:rgba(15,98,254,0.18);border:1px solid rgba(15,98,254,0.35);border-radius:var(--radius-3xl);padding:4px 12px;font-size:var(--font-size-body-s);color:var(--gold2);font-weight:600;}
.sb-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.btn-sm{background:none;border:1px solid var(--border);border-radius:var(--radius-full);padding:5px 12px;font-size:var(--font-size-body-s);color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all 0.18s;}
.btn-sm:hover{color:var(--red);border-color:var(--red);}
/* Glass buttons specifically for the student welcome card */
.sb-actions .btn-sm{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);color:rgba(255,255,255,0.85);padding:7px 14px;}
.sb-actions .btn-sm:hover{background:rgba(255,255,255,0.2);color:white;border-color:rgba(255,255,255,0.4);}
.btn-sm-logout{background:rgba(218,30,40,0.2);border:1px solid rgba(218,30,40,0.35);border-radius:var(--radius-full);padding:7px 14px;font-size:var(--font-size-body-s);color:#ff8a7a;cursor:pointer;font-family:var(--font-body);transition:all 0.2s;}
.btn-sm-logout:hover{background:rgba(218,30,40,0.35);color:#ffb3a8;}
/* ── Step Cards ── */
.step-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-3xl);padding:24px 26px;margin-bottom:16px;box-shadow:0 2px 16px rgba(0,0,0,0.05);transition:box-shadow 0.2s;}
.step-card:hover{box-shadow:0 4px 24px rgba(0,0,0,0.09);}
.step-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.step-num{width:30px;height:30px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;font-size:var(--font-size-body-m);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-body);}
.step-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);font-family:var(--font-heading);}
.step-label{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;opacity:0.7;}
.sel-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px;}
.sel-btn{padding:8px 15px;border:1.5px solid var(--border);border-radius:var(--radius-4xl);background:white;font-family:var(--font-body);font-size:var(--font-size-body-s);font-weight:600;color:#6f6f6f;cursor:pointer;transition:all 0.18s;white-space:nowrap;}
.sel-btn:hover{border-color:var(--navy);color:var(--navy);background:#f4f4f4;}
.sel-btn.active{background:linear-gradient(135deg,var(--navy),var(--navy2));border-color:var(--navy);color:white;box-shadow:0 3px 10px rgba(17,30,56,0.35);}
.grade-row{display:flex;gap:10px;}
.grade-btn{flex:1;padding:18px 12px;border:2px solid var(--border);border-radius:var(--radius-2xl);background:white;font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;color:#6f6f6f;cursor:pointer;transition:all 0.22s;text-align:center;position:relative;overflow:hidden;}
.grade-btn:hover{border-color:var(--navy);color:var(--navy);background:#f5f8ff;transform:translateY(-1px);}
.grade-btn.active{background:linear-gradient(135deg,var(--navy),var(--navy2));border-color:var(--navy);color:white;box-shadow:0 6px 20px rgba(0,0,0,0.35);transform:translateY(-1px);}
.grade-btn .grade-icon{display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.chapter-input{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);outline:none;margin-top:14px;transition:border-color 0.2s,box-shadow 0.2s;background:#f4f4f4;box-sizing:border-box;}
.chapter-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,0,0,0.08);background:white;}
.subject-dropdown{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);outline:none;background:#f4f4f4;color:#525252;cursor:pointer;transition:border-color 0.2s,box-shadow 0.2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f62fe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;box-sizing:border-box;}
.subject-dropdown:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,0,0,0.08);background-color:white;}
/* Stats section in student bar (hidden — kept as sb-stats for compat) */
.sb-stats{display:none;}
/* ── Welcome card layout ── */
.student-bar{flex-wrap:nowrap;justify-content:space-between;}
.sb-left{display:flex;align-items:center;gap:16px;flex:1;min-width:0;}
.sb-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0;}
.sb-avatar-wrap{position:relative;flex-shrink:0;}
.sb-chip-num{font-weight:800;color:var(--gold2);}
.sb-chip-streak{background:rgba(255,131,43,0.2);border-color:rgba(255,131,43,0.4);color:#FFB784;}
@keyframes flicker{0%,100%{opacity:1;}50%{opacity:0.7;}}
.sb-chip-streak{animation:flicker 2s ease-in-out infinite;}
/* Heatmap */
.sb-heatmap-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.sb-heatmap-label{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.5);letter-spacing:1px;text-transform:uppercase;}
.sb-heatmap{display:flex;gap:5px;align-items:center;}
.sb-heatmap-day{width:20px;height:20px;border-radius:var(--radius-md);background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.1);transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.sb-heatmap-day.active{background:rgba(120,169,255,0.45);border-color:rgba(120,169,255,0.7);box-shadow:0 0 6px rgba(120,169,255,0.3);}
.sb-heatmap-day.today{border-color:rgba(255,255,255,0.5);border-style:solid;}
.sb-heatmap-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--gold2);display:none;}
.sb-heatmap-day.active .sb-heatmap-dot{display:block;}
/* ── Bento stat cards ── */
.bento-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:640px){.bento-row{grid-template-columns:repeat(2,1fr);}.sb-right{display:none;}.student-bar{flex-wrap:wrap;}.sb-left{flex:unset;width:100%;}}
.bento-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:18px 16px;text-align:center;transition:all 0.2s;box-shadow:0 2px 12px rgba(0,0,0,0.05);cursor:default;}
.bento-card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,0.10);}
.bento-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-2xl);margin:0 auto 12px;}
.bento-val{font-size:var(--font-size-heading-l);font-weight:800;color:var(--navy);font-family:var(--font-heading);line-height:1.1;}
.bento-val-sm{font-size:var(--font-size-body-l);font-weight:700;line-height:1.3;margin-top:2px;}
.bento-lbl{font-size:var(--font-size-body-s);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-weight:600;}
.bento-sub{font-size:var(--font-size-body-s);color:var(--muted);margin-top:4px;}
/* ── New Sidebar Dashboard Layout ── */
.dash-layout{display:flex;background:#f4f4f4;height:calc(100vh - 58px);overflow:hidden;padding-left:220px;transition:padding-left 0.25s ease;}
.dash-sidebar{width:220px;min-width:220px;background:linear-gradient(180deg,#161616 0%,#262626 100%);display:flex;flex-direction:column;padding:0;position:fixed;top:0;left:0;height:100vh;overflow:hidden;flex-shrink:0;z-index:201;transition:width 0.25s ease,min-width 0.25s ease;}
.dash-sidebar.collapsed{width:58px;min-width:58px;}
/* Collapsed state: shrink header offset and dash-layout padding */
.dash-sidebar.collapsed~* header,.sidebar-collapsed header{left:58px;}
.sidebar-collapsed .dash-layout{padding-left:58px;}
/* Sidebar brand / logo at top */
.sb-brand{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 14px;border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;}
.sb-brand-logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1;min-width:0;overflow:hidden;}.sb-brand-logo:hover{opacity:0.85;}
.sb-logo-img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex-shrink:0;}
.sb-logo-name{font-family:var(--font-heading);font-size:var(--font-size-body-m);color:white;white-space:nowrap;overflow:hidden;}
.sb-logo-ai{color:var(--gold2);font-size:var(--font-size-body-s);font-family:var(--font-body);font-weight:700;vertical-align:super;margin-left:2px;}
.dash-sidebar.collapsed .sb-brand{justify-content:center;padding:10px 0;}
.dash-sidebar.collapsed .sb-logo-name{display:none;}.dash-sidebar.collapsed .sb-brand-logo{flex:0 0 auto;}
/* Toggle button */





/* Navigation */
.dash-nav{flex:1;padding:8px 10px;overflow-y:auto;overflow-x:hidden;}
.dash-nav-section{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.3);letter-spacing:1.6px;text-transform:uppercase;padding:0 10px;margin-bottom:6px;margin-top:4px;white-space:nowrap;overflow:hidden;transition:opacity 0.2s;}
.dash-sidebar.collapsed .dash-nav-section{opacity:0;}
.sb-nav-menu-row{display:flex;align-items:center;justify-content:space-between;padding-right:4px;}
.sb-menu-toggle{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:none;border:none;border-radius:6px;cursor:pointer;color:rgba(255,255,255,0.4);transition:color 0.18s,background 0.18s;flex-shrink:0;}
.sb-menu-toggle:hover{color:white;background:rgba(255,255,255,0.1);}
.sb-menu-toggle svg{flex-shrink:0;transition:transform 0.25s ease;opacity:0.65;}
.sidebar-collapsed .sb-menu-toggle svg{transform:scaleX(-1);}
.dash-sidebar.collapsed .sb-nav-menu-row{padding-right:0;justify-content:center;}
.dash-sidebar.collapsed .sb-menu-toggle{width:36px;height:36px;padding:0;border-radius:8px;justify-content:center;gap:0;color:rgba(255,255,255,0.5);margin-bottom:0;}
.dash-sidebar.collapsed .sb-menu-toggle:hover{background:rgba(255,255,255,0.07);color:white;}
.dash-sidebar.collapsed .sb-menu-toggle:hover svg{opacity:1;}
.dash-nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-xl);cursor:pointer;transition:background 0.18s,color 0.18s;color:rgba(255,255,255,0.6);font-size:var(--font-size-body-m);font-weight:500;margin-bottom:3px;border:none;background:none;width:100%;text-align:left;font-family:var(--font-body);white-space:nowrap;overflow:hidden;}
.dash-nav-item svg{flex-shrink:0;opacity:0.65;transition:opacity 0.18s;}
.dash-nav-item span{transition:opacity 0.18s;}
.dash-sidebar.collapsed .dash-nav-item span{opacity:0;}
.dash-nav-item:hover{background:rgba(255,255,255,0.07);color:white;}
.dash-nav-item:hover svg{opacity:1;}
.dash-nav-item.active{background:linear-gradient(135deg,rgba(15,98,254,0.22),rgba(120,169,255,0.14));color:white;border-left:3px solid var(--gold2);}
.dash-nav-item.active svg{opacity:1;color:var(--gold2);}
.pro-badge{font-size:var(--font-size-body-s);font-weight:800;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#161616;padding:2px 6px;border-radius:var(--radius-md);margin-left:auto;flex-shrink:0;}
.dash-nav-item.locked{opacity:0.55;cursor:not-allowed;}
.dash-nav-item.locked:hover{background:none !important;}
/* Bottom user card */
.sb-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:10px 10px 12px;flex-shrink:0;}
.sb-user-card{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,0.07);border-radius:var(--radius-xl);padding:8px 9px;position:relative;}
.sb-user-av{width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:var(--font-size-body-l);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2.5px solid var(--gold);overflow:hidden;cursor:pointer;font-family:var(--font-heading);transition:transform 0.18s,border-color 0.18s;}
.sb-user-av:hover{transform:scale(1.06);border-color:#fff;}
.sb-user-info{flex:1;min-width:0;}
.sb-user-name{color:#fff;font-family:var(--font-heading);font-size:var(--font-size-body-m);font-weight:700;letter-spacing:0.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.sb-user-sub{color:rgba(255,255,255,0.45);font-size:var(--font-size-body-s);letter-spacing:0.3px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.sb-3dot{background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;padding:4px 3px;border-radius:var(--radius-md);line-height:1;transition:color 0.18s,background 0.18s;flex-shrink:0;}
.sb-3dot:hover{color:white;background:rgba(255,255,255,0.1);}
.dash-sidebar.collapsed .sb-user-card{background:none;padding:8px 0;justify-content:center;}
.dash-sidebar.collapsed .sb-user-av{width:34px;height:34px;font-size:var(--font-size-body-m);}
.dash-sidebar.collapsed .sb-user-info,.dash-sidebar.collapsed .sb-3dot{display:none;}
.sb-user-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:white;border-radius:var(--radius-xl);box-shadow:0 8px 28px rgba(0,0,0,0.25);overflow:hidden;display:none;z-index:400;}
.sb-user-menu.open{display:block;}
.sb-user-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:11px 15px;border:none;background:none;cursor:pointer;font-size:var(--font-size-body-m);color:#161616;font-family:var(--font-body);transition:background 0.15s;text-align:left;font-weight:500;}
.sb-user-menu button:hover{background:#f4f4f4;}
.sb-user-menu .sb-menu-logout{color:#da1e28;border-top:1px solid #f0f0f0;}
.dash-content{flex:1;min-width:0;padding:28px 0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;}
.dash-profile-panel{width:240px;min-width:240px;background:white;border-left:1.5px solid var(--border);padding:24px 18px;overflow-y:auto;height:100%;}
/* Dashboard Overview */
.dash-greeting{background:linear-gradient(135deg,#161616 0%,#262626 100%);border-radius:var(--radius-2xl);padding:22px 24px;margin-bottom:22px;display:flex;align-items:center;gap:16px;color:white;}
.dash-greeting-text{flex:1;}
.dash-greeting-text h2{font-family:var(--font-heading);font-size:var(--font-size-heading-m);margin-bottom:4px;}
.dash-greeting-text p{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.7);}
.dash-greeting-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);padding:7px 16px;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;white-space:nowrap;}
.dash-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px;}
.dash-action-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:18px;cursor:pointer;transition:all 0.2s;text-align:center;}
.dash-action-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.dash-action-icon{width:44px;height:44px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.dash-action-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);margin-bottom:3px;}
.dash-action-sub{font-size:var(--font-size-body-s);color:var(--muted);}
.dash-section-title{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px;opacity:0.8;}
.dash-recent-list{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:22px;}
.dash-recent-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border);transition:background 0.15s;cursor:default;}
.dash-recent-item:last-child{border-bottom:none;}
.dash-recent-item:hover{background:#f4f4f4;}
.dash-recent-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--gold);flex-shrink:0;}
.dash-recent-info{flex:1;min-width:0;}
.dash-recent-subject{font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-recent-date{font-size:var(--font-size-body-s);color:var(--muted);margin-top:1px;}
/* Profile Panel */
.dp-avatar-wrap{text-align:center;margin-bottom:18px;}
.dp-avatar{width:80px;height:80px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:var(--font-size-heading-xl);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-family:var(--font-heading);overflow:hidden;border:3px solid var(--gold);cursor:pointer;position:relative;}
.dp-name{font-family:var(--font-heading);font-size:var(--font-size-body-l);font-weight:700;color:var(--navy);text-align:center;margin-bottom:3px;}
.dp-id{font-size:var(--font-size-body-s);color:var(--muted);text-align:center;letter-spacing:1px;}
.dp-divider{height:1px;background:var(--border);margin:16px 0;}
.dp-info-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.dp-info-icon{width:32px;height:32px;border-radius:var(--radius-lg);background:#f0f4ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dp-info-label{font-size:var(--font-size-body-s);color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:1px;}
.dp-info-value{font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);}
.dp-streak-badge{display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#fff8ec,#fff8ec);border:1px solid #FFB784;border-radius:var(--radius-xl);padding:10px;margin-top:16px;font-size:var(--font-size-body-m);font-weight:700;color:#FF832B;}
/* Dash Views */
#dashViewStudy{display:none;}
/* Mobile hamburger button */
.dash-hamburger{display:none;width:38px;height:38px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.1);color:white;border:1px solid rgba(255,255,255,0.18);cursor:pointer;align-items:center;justify-content:center;transition:background 0.18s;flex-shrink:0;}
.dash-hamburger:hover{background:rgba(255,255,255,0.2);}
.dash-sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:198;display:none;}
@media(max-width:768px){
  header{left:0!important;transition:none;}
  .hdr-sidebar-toggle{display:none;}
  .dash-layout{height:calc(100vh - 58px);padding-left:0!important;overflow:hidden;}
  .dash-sidebar{display:flex!important;flex-direction:column;position:fixed;top:58px;left:0;height:calc(100vh - 58px);height:calc(100dvh - 58px);z-index:199;width:260px;min-width:260px;overflow-y:auto;overflow-x:hidden;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),box-shadow 0.28s ease;pointer-events:none;box-shadow:none;will-change:transform;}
  .dash-sidebar.collapsed{width:260px;min-width:260px;}
  .dash-sidebar.collapsed .dash-nav-item span{opacity:1;}
  .dash-sidebar.collapsed .dash-nav-section{opacity:1;}
  .dash-sidebar.collapsed .sb-user-info,.dash-sidebar.collapsed .sb-3dot{display:flex;}
  .dash-sidebar.mobile-open{transform:translateX(0);pointer-events:auto;box-shadow:6px 0 32px rgba(0,0,0,0.45);}
  .dash-sidebar-overlay{display:block!important;opacity:0;pointer-events:none;transition:opacity 0.28s ease;}
  .dash-sidebar-overlay.mobile-open{opacity:1;pointer-events:auto;}
  .sb-menu-toggle{display:none!important;}
  .sb-bottom{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .ld-active .dash-hamburger{display:flex;}
  .ld-active #hdrPublicLogo{display:flex!important;position:absolute;right:14px;top:50%;transform:translateY(-50%);margin-right:0;}
  .ld-active #hdrPublicLogo span{display:none;}
  .ld-active #hdrPublicLogo img{width:40px;height:40px;}

  .dash-content{padding:14px 0;}
  .dash-quick-actions{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .dash-content{padding:12px 10px;}
  .dash-quick-actions{grid-template-columns:1fr 1fr;}
}
.dash-view{display:none;width:100%;max-width:1080px;padding:0 clamp(16px,4vw,44px);}
.dash-view.active{display:block;}
.bento-streak.has-streak{background:linear-gradient(135deg,#fff8ec,#fff8ec);border-color:#FFB784;}
.bento-streak.has-streak .bento-val{background:linear-gradient(135deg,#FF832B,#da1e28);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.bento-streak.has-streak .bento-sub{color:#FF832B;}
/* ── SVG Icon Colors ── */
.bento-sessions .bento-icon{background:rgba(0,0,0,0.07);color:#161616;}
.bento-images .bento-icon{background:rgba(28,28,30,0.09);color:#262626;}
.bento-streak .bento-icon{background:rgba(255,131,43,0.1);color:#FF832B;}
.bento-streak.has-streak .bento-icon{background:rgba(218,30,40,0.12);color:#da1e28;}
.bento-subject .bento-icon{background:rgba(15,98,254,0.1);color:#0f62fe;}
.feat-card:nth-child(1) .feat-icon,.feat-card:nth-child(2) .feat-icon,.feat-card:nth-child(3) .feat-icon,.feat-card:nth-child(4) .feat-icon,.feat-card:nth-child(5) .feat-icon,.feat-card:nth-child(6) .feat-icon{background:#161616;color:var(--gold2);}
.grade-btn .grade-icon svg{transition:stroke 0.2s;}
.grade-btn.active .grade-icon svg{stroke:white;}
.upload-zone .upload-icon svg{color:var(--navy2);}
/* ── Sign-up tabs ── */
.auth-tabs{display:flex;gap:0;margin-bottom:24px;border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;}
.auth-tab{flex:1;padding:11px 0;background:white;border:none;font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.18s;letter-spacing:0.2px;}
.auth-tab.active{background:var(--navy);color:white;}
.auth-tab:first-child{border-right:1.5px solid var(--border);}
.signup-success{background:linear-gradient(135deg,#f4f4f4,#ecfdf5);border:1.5px solid #74E792;border-radius:var(--radius-2xl);padding:22px;text-align:center;margin-top:8px;display:none;}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;color:var(--ink);cursor:pointer;transition:all 0.18s;margin-bottom:4px;}
.btn-google:hover{border-color:#0f62fe;background:#f4f4f4;box-shadow:0 2px 8px rgba(66,133,244,0.15);}
.btn-google svg{flex-shrink:0;}
.or-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:var(--font-size-body-s);font-weight:500;}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.google-prefill{background:#f4f4f4;border:1.5px solid #D0E2FF;border-radius:var(--radius-xl);padding:12px 14px;margin-bottom:12px;font-size:var(--font-size-body-m);color:var(--navy);}
.google-prefill strong{color:#0f62fe;}
#publicResourcesPage{display:none;min-height:calc(100vh - 58px);background:#f4f4f4;}
.pub-res-back{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-full);color:rgba(255,255,255,0.85);font-size:var(--font-size-body-m);font-weight:500;cursor:pointer;margin-bottom:20px;transition:all 0.18s;font-family:var(--font-body);}
.pub-res-back:hover{background:rgba(255,255,255,0.18);color:white;}
.pub-res-cta{background:var(--gold);color:var(--navy);padding:10px 22px;border-radius:var(--radius-full);font-size:var(--font-size-body-m);font-weight:700;border:none;cursor:pointer;font-family:var(--font-body);transition:background 0.18s;margin-top:14px;display:inline-block;}
.pub-res-cta:hover{background:var(--gold2);}
.signup-success-icon{width:52px;height:52px;background:linear-gradient(135deg,#24a148,#42BE65);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.signup-success h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:#0E6027;margin-bottom:6px;}
.signup-success p{font-size:var(--font-size-body-m);color:#24a148;line-height:1.6;}
/* ── Pending requests card ── */
.pending-requests-card{background:white;border:2px solid #F1C21B;border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:20px;}
.pending-requests-hd{background:linear-gradient(135deg,#fff8ec,#fff8ec);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid #F1C21B;}
.pending-requests-hd h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:#FF832B;margin:0;display:flex;align-items:center;gap:8px;}
.pending-badge{background:#da1e28;color:white;font-size:var(--font-size-body-s);font-weight:800;padding:2px 8px;border-radius:var(--radius-3xl);margin-left:8px;}
.pending-item{padding:16px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #fff8ec;flex-wrap:wrap;}
.pending-item:last-child{border-bottom:none;}
.pending-info{flex:1;}
.pending-name{font-size:var(--font-size-body-l);font-weight:700;color:var(--navy);font-family:var(--font-heading);}
.pending-meta{font-size:var(--font-size-body-s);color:var(--muted);margin-top:3px;}
.pending-meta span{display:inline-flex;align-items:center;gap:3px;margin-right:10px;}
.pending-date{font-size:var(--font-size-body-s);color:#FF832B;margin-top:5px;font-weight:600;}
.pending-actions{display:flex;gap:7px;flex-shrink:0;align-items:center;}
.btn-approve{padding:8px 16px;background:linear-gradient(135deg,#24a148,#42BE65);color:white;border:none;border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.18s;white-space:nowrap;}
.btn-approve:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(5,150,105,0.3);}
.btn-decline{padding:8px 16px;background:transparent;color:#da1e28;border:1.5px solid #ffc2c5;border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.18s;white-space:nowrap;}
.btn-decline:hover{background:#fff0f2;border-color:#da1e28;}

/* ── Counter animation ── */
@keyframes countUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.bento-val{animation:countUp 0.5s ease-out both;}
/* ── Subject color map ── */
.sel-btn[data-subject="Science"].active,.sel-btn[data-subject="Biology"].active{background:linear-gradient(135deg,#005D5D,#007070);border-color:#005D5D;}
.sel-btn[data-subject="Chemistry"].active{background:linear-gradient(135deg,#6929C4,#5A23A8);border-color:#6929C4;}
.sel-btn[data-subject="Physics"].active{background:linear-gradient(135deg,#0F62FE,#0043CE);border-color:#0F62FE;}
.sel-btn[data-subject="Maths"].active{background:linear-gradient(135deg,#DA1E28,#A2191F);border-color:#DA1E28;}
.sel-btn[data-subject="English"].active,.sel-btn[data-subject="Urdu"].active{background:linear-gradient(135deg,#00539A,#003E7A);border-color:#00539A;}
.sel-btn[data-subject="History"].active,.sel-btn[data-subject="Islamiyat"].active,.sel-btn[data-subject="Pak Studies"].active{background:linear-gradient(135deg,#FF832B,#C76100);border-color:#FF832B;}
.sel-btn[data-subject="Geography"].active{background:linear-gradient(135deg,#0E6027,#0A4D1E);border-color:#0E6027;}
.sel-btn[data-subject="Computer"].active{background:linear-gradient(135deg,#161616,#262626);border-color:#161616;}
.sel-btn[data-subject="Accounts"].active,.sel-btn[data-subject="Economics"].active{background:linear-gradient(135deg,#8A3FFC,#6929C4);border-color:#8A3FFC;}
/* ── Global micro-interactions ── */
.btn-generate:active{transform:scale(0.98) translateY(0)!important;}
.grade-btn:active,.sel-btn:active,.opt-chip:active{transform:scale(0.96)!important;transition:transform 0.08s!important;}
button:active:not(:disabled){transition:transform 0.08s ease;}
/* ── Heatmap day labels ── */
.sb-heatmap-day-label{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.4);text-align:center;margin-top:2px;letter-spacing:0.3px;}
.api-section{background:var(--navy-pale);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:20px 24px;margin-bottom:18px;}
.api-label{font-size:var(--font-size-body-s);font-weight:600;color:var(--navy);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.api-row{display:flex;gap:8px;}
.api-input{flex:1;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);background:white;outline:none;}
.api-input:focus{border-color:var(--navy);}
.btn-save{padding:11px 18px;background:var(--navy);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;white-space:nowrap;}
.api-status{font-size:var(--font-size-body-s);margin-top:7px;color:var(--muted);}
.api-status.ok{color:var(--green);font-weight:600;}
.api-status.err{color:var(--red);font-weight:600;}
.upload-zone{border:2px dashed #c8d5e8;border-radius:var(--radius-2xl);padding:38px 22px;text-align:center;cursor:pointer;transition:all 0.25s;position:relative;background:linear-gradient(135deg,#f8faff,#f4f4f4);margin-bottom:12px;}
.upload-zone:hover,.upload-zone.drag{border-color:var(--navy);background:#eaf0fc;}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-icon{display:flex;align-items:center;justify-content:center;margin-bottom:14px;opacity:0.75;}
.upload-zone h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);margin-bottom:5px;}
.mobile-upload-btns{display:none;}
@media(max-width:768px){
  .step-card:has(.mobile-upload-btns){background:transparent;border:none;box-shadow:none;margin-bottom:0;}
  .upload-zone .upload-icon,.upload-zone h3,.upload-zone p,.upload-zone .badge-gold{display:none;}
  .upload-zone{padding:12px 14px;margin-bottom:0;border:none;background:transparent;cursor:default;}
  .upload-zone:hover,.upload-zone.drag{border-color:var(--border);background:transparent;}
  .upload-zone input[id="fileInput"]{display:none;}
  .mobile-upload-btns{display:flex;gap:12px;margin-bottom:16px;padding:0 2px;}
  .mob-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:22px 12px 18px;border:none;border-radius:var(--radius-4xl);cursor:pointer;
    font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:700;letter-spacing:0.4px;
    text-transform:uppercase;-webkit-tap-highlight-color:transparent;
    transition:transform 0.13s cubic-bezier(.4,0,.2,1),box-shadow 0.13s;
  }
  .mob-btn svg{width:34px;height:34px;display:block;}
  .mob-btn-camera{
    background:linear-gradient(150deg,#161616 0%,#262626 55%,#262626 100%);
    color:rgba(255,255,255,0.92);
    box-shadow:0 8px 28px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .mob-btn-gallery{
    background:linear-gradient(150deg,#0043CE 0%,#0F62FE 55%,#78A9FF 100%);
    color:rgba(255,255,255,0.95);
    box-shadow:0 8px 28px rgba(15,98,254,0.45),inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .mob-btn:active{transform:scale(0.94);box-shadow:0 3px 10px rgba(0,0,0,0.2);}
}
.upload-zone p{font-size:var(--font-size-body-m);color:var(--muted);}
.badge-gold{display:inline-block;margin-top:9px;background:var(--gold);color:white;font-size:var(--font-size-body-s);font-weight:700;padding:3px 12px;border-radius:var(--radius-3xl);}
.img-counter{display:none;align-items:center;justify-content:space-between;margin-bottom:9px;padding:9px 14px;background:var(--navy-pale);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:var(--font-size-body-m);color:var(--navy);font-weight:600;}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-bottom:18px;}
.img-thumb{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--border);aspect-ratio:1;background:#f4f4f4;}
.img-thumb img{width:100%;height:100%;object-fit:cover;}
.img-rm{position:absolute;top:3px;right:3px;width:20px;height:20px;background:rgba(218,30,40,0.9);color:white;border:none;border-radius:var(--radius-full);font-size:var(--font-size-body-s);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.img-num{position:absolute;bottom:3px;left:5px;background:rgba(26,39,68,0.8);color:white;font-size:var(--font-size-body-s);padding:1px 5px;border-radius:var(--radius-md);}
.progress-wrap{display:none;margin-bottom:16px;}
.progress-wrap.on{display:block;}
.prog-top{font-size:var(--font-size-body-s);color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;}
.prog-bar{height:7px;background:var(--border);border-radius:var(--radius-xl);overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:var(--radius-xl);transition:width 0.4s;width:0%;}
.err-box{background:#fff0f2;border:1.5px solid #ffc2c5;border-radius:var(--radius-xl);padding:13px 17px;color:var(--red);font-size:var(--font-size-body-m);display:none;margin-bottom:14px;}
.btn-generate{width:100%;padding:18px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 60%,#2a2a2e 100%);color:white;border:2px solid transparent;border-radius:var(--radius-full);font-family:var(--font-heading);font-size:var(--font-size-heading-m);cursor:pointer;transition:all 0.28s;margin-bottom:30px;position:relative;overflow:hidden;letter-spacing:0.3px;}
.btn-generate::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(15,98,254,0.15) 100%);pointer-events:none;}
.btn-generate:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 36px rgba(17,30,56,0.4);border-color:var(--gold);}
.btn-generate:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none;}
.loader{display:none;text-align:center;padding:42px 20px;}
.loader.on{display:block;}
.dots{display:flex;justify-content:center;gap:8px;margin-bottom:14px;}
.dot{width:12px;height:12px;background:var(--navy);border-radius:var(--radius-full);animation:bounce 1.2s infinite;}
.dot:nth-child(2){animation-delay:0.2s;background:var(--gold);}
.dot:nth-child(3){animation-delay:0.4s;}
@keyframes bounce{0%,80%,100%{transform:scale(0.6);opacity:0.4;}40%{transform:scale(1);opacity:1;}}
.loader-txt{color:var(--muted);font-size:var(--font-size-body-l);}
.loader-sub{font-size:var(--font-size-body-m);color:#78a9ff;margin-top:5px;}
#resultsArea{display:none;animation:fadeUp 0.5s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.results-hd{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:var(--radius-2xl);padding:24px 26px;margin-bottom:20px;color:white;}
.results-hd h2{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--gold2);margin-bottom:5px;}
.results-hd p{font-size:var(--font-size-body-m);color:#a8a8a8;margin-bottom:14px;}
.result-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn-gold{padding:10px 20px;background:var(--gold);color:var(--navy);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;}
.btn-gold:hover{background:var(--gold2);}
.btn-ow{padding:10px 20px;background:transparent;color:white;border:1.5px solid rgba(255,255,255,0.3);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);cursor:pointer;}
.btn-ow:hover{background:rgba(255,255,255,0.1);}
.result-block{margin-bottom:16px;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;background:white;}
.sec-head{background:var(--navy);padding:11px 18px;display:flex;align-items:center;gap:8px;}
.sec-ico{font-size:var(--font-size-body-l);}
.sec-ttl{font-family:var(--font-heading);font-size:var(--font-size-body-m);color:white;}
.sec-body{padding:14px 18px;font-size:var(--font-size-body-m);line-height:1.6;color:var(--ink);}
.sec-body .q{font-weight:700;color:var(--navy);margin-top:10px;display:block;}
.sec-body .a{color:var(--ink);margin-bottom:5px;display:block;padding-left:12px;}
.diff-h{display:inline-block;font-size:var(--font-size-body-s);font-weight:700;padding:2px 7px;border-radius:var(--radius-lg);margin-left:6px;background:#fff0f2;color:#da1e28;border:1px solid #ffc2c5;}
.diff-m{display:inline-block;font-size:var(--font-size-body-s);font-weight:700;padding:2px 7px;border-radius:var(--radius-lg);margin-left:6px;background:#fff8e7;color:#0f62fe;border:1px solid #D0E2FF;}
.diff-e{display:inline-block;font-size:var(--font-size-body-s);font-weight:700;padding:2px 7px;border-radius:var(--radius-lg);margin-left:6px;background:#f4f4f4;color:#24a148;border:1px solid #74E792;}
.save-status{font-size:var(--font-size-body-m);color:var(--green);text-align:center;padding:8px;display:none;font-weight:500;}
/* Options checklist chips */
.options-box{margin-top:16px;padding-top:16px;border-top:1.5px solid var(--border);}
.opt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.opt-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--radius-4xl);background:white;font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:500;color:var(--muted);cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;user-select:none;}
.opt-chip:hover{border-color:var(--navy);color:var(--navy);}
.opt-chip.checked{background:linear-gradient(135deg,var(--navy),var(--navy2));border-color:var(--navy);color:white;}
.opt-chip.locked{cursor:default;}
.opt-chip svg{width:13px;height:13px;flex-shrink:0;opacity:0;transition:opacity 0.12s;}
.opt-chip.checked svg{opacity:1;}
/* Grade chip row */
.grade-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px;}
.grade-chip{padding:6px 13px;border:1.5px solid var(--border);border-radius:var(--radius-3xl);background:white;font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;color:#6f6f6f;cursor:pointer;transition:all 0.16s;-webkit-tap-highlight-color:transparent;}
.grade-chip:hover{border-color:var(--navy);color:var(--navy);}
.grade-chip.active{background:linear-gradient(135deg,var(--navy),var(--navy2));border-color:var(--navy);color:white;}
/* Accordion result sections */
.acc-item{margin-bottom:12px;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;background:white;}
.acc-head{background:var(--navy);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.acc-head-left{display:flex;align-items:center;gap:8px;}
.acc-ico{font-size:var(--font-size-body-l);}
.acc-ttl{font-family:var(--font-heading);font-size:var(--font-size-body-m);color:white;}
.acc-chevron{transition:transform 0.22s;flex-shrink:0;}
.acc-head.open .acc-chevron{transform:rotate(180deg);}
.acc-body{padding:0 18px;font-size:var(--font-size-body-m);line-height:1.7;color:var(--ink);display:none;white-space:pre-line;}
.acc-body.open{display:block;padding:14px 18px;}
.acc-body .q{font-weight:700;color:var(--navy);margin-top:10px;display:block;white-space:normal;}
.acc-body .a{color:var(--ink);margin-bottom:5px;display:block;padding-left:12px;white-space:normal;}
.acc-body .kp{display:block;padding:3px 0 3px 4px;border-left:3px solid var(--gold);margin-bottom:6px;white-space:normal;}
.acc-body .kp-bullet{color:var(--gold);font-weight:700;margin-right:6px;}
.history-section{margin-top:40px;}
.history-section-hd{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.history-section-hd h2{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--navy);margin:0;}
.history-section-hd .hist-count-badge{background:var(--navy);color:white;font-size:var(--font-size-body-s);font-weight:700;padding:3px 10px;border-radius:var(--radius-3xl);}
.history-item{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:14px 18px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;transition:box-shadow 0.15s,border-color 0.15s;}
.history-item:hover{border-color:#b8c8e8;box-shadow:0 3px 14px rgba(0,0,0,0.07);}
.h-date{font-size:var(--font-size-body-s);color:var(--muted);}
.h-title{font-size:var(--font-size-body-m);font-weight:600;color:var(--ink);}
.h-count{font-size:var(--font-size-body-s);color:var(--navy);margin-top:2px;}
.btn-hpdf{padding:6px 14px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;border:none;border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.btn-hpdf:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.25);}
/* Subject folder styles */
.hist-folder{margin-bottom:12px;border-radius:var(--radius-2xl);overflow:hidden;border:1.5px solid var(--border);background:white;}
.hist-folder-header{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;background:#f4f7fc;user-select:none;transition:background 0.15s;}
.hist-folder-header:hover{background:#e8eef8;}
.hist-folder-icon{font-size:var(--font-size-heading-m);}
.hist-folder-name{font-size:var(--font-size-body-l);font-weight:700;color:var(--navy);flex:1;}
.hist-folder-count{font-size:var(--font-size-body-s);color:var(--muted);background:#e2e8f0;border-radius:var(--radius-3xl);padding:2px 10px;font-weight:600;}
.hist-folder-arrow{font-size:var(--font-size-body-m);color:var(--muted);transition:transform 0.2s;}
.hist-folder-content{display:none;padding:8px 12px 10px;}
.hist-folder-content.open{display:block;}
.hist-grade-group{margin-bottom:6px;}
.hist-grade-label{font-size:var(--font-size-body-s);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;padding:4px 6px 4px 4px;}
/* Student notes resource card badge */
.badge-type-student{background:#f4f4f4;color:#0A4D1E;border:1px solid #A7F0BA;}
.res-pill.pill-mynotes{border-color:var(--green);color:var(--green);}
.res-pill.pill-mynotes.active{background:var(--green);border-color:var(--green);color:white;box-shadow:0 4px 12px rgba(36,161,72,0.22);}
.res-student-badge{font-size:var(--font-size-body-s);background:#fefce8;color:#FF832B;border:1px solid #F1C21B;border-radius:var(--radius-md);padding:2px 7px;font-weight:600;}
#teacherPage{display:none;background:#f4f4f4;height:calc(100vh - 58px);overflow:hidden;}
.teacher-login-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 65%,#161616 100%);padding:52px 28px 60px;text-align:center;position:relative;overflow:hidden;}
.teacher-login-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 25%,rgba(15,98,254,0.22) 0%,transparent 50%),radial-gradient(ellipse at 15% 75%,rgba(15,98,254,0.12) 0%,transparent 40%);pointer-events:none;}
.teacher-login-hero h2{font-family:var(--font-heading);font-size:clamp(24px,4vw,32px);color:white;margin-bottom:10px;font-weight:900;position:relative;}
.teacher-login-hero h2 em{color:var(--gold);font-style:italic;}
.teacher-login-hero p{font-size:var(--font-size-body-m);color:rgba(170,181,213,0.85);position:relative;max-width:420px;margin:0 auto;}
.teacher-wrap{max-width:500px;margin:0 auto;padding:40px 22px 80px;}
.teacher-hd{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:var(--radius-2xl);padding:26px 28px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.teacher-hd h1{font-family:var(--font-heading);font-size:var(--font-size-heading-l);color:white;}
.teacher-hd p{font-size:var(--font-size-body-m);color:#a8a8a8;margin-top:3px;}
/* Teacher dashboard layout with sidebar */
.teacher-dash-layout{display:flex;background:#f4f4f4;height:calc(100vh - 58px);overflow:hidden;padding-left:220px;}
.teacher-sidebar{width:220px;min-width:220px;background:linear-gradient(180deg,#161616 0%,#262626 100%);display:flex;flex-direction:column;padding:0;position:fixed;top:0;left:0;height:100vh;overflow:hidden;flex-shrink:0;z-index:201;}
.teacher-dash-content{flex:1;min-width:0;padding:28px 0;overflow-y:auto;height:100%;display:flex;flex-direction:column;align-items:center;}
.teacher-content-wrap{width:100%;max-width:1080px;padding:0 clamp(16px,4vw,44px);box-sizing:border-box;}
.teacher-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:98;}
.t-hamburger{display:none;width:38px;height:38px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.1);color:white;border:1px solid rgba(255,255,255,0.18);cursor:pointer;align-items:center;justify-content:center;transition:background 0.18s;flex-shrink:0;}
.t-hamburger:hover{background:rgba(255,255,255,0.2);}
/* Shift header right and hide public-nav items when teacher is logged in */
.ld-teacher-active header.public-nav{left:220px;}
.ld-teacher-active #headerNav{display:none!important;}
.ld-teacher-active #teacherLoginBtn{display:none!important;}
.ld-teacher-active #headerStartBtn{display:none!important;}
.ld-teacher-active .hdr-pub-logo{display:none!important;}
@media(max-width:768px){
  .teacher-dash-layout{height:calc(100vh - 58px);padding-left:0;}
  .teacher-sidebar{display:none;position:fixed;top:58px;left:0;height:calc(100vh - 58px);height:calc(100dvh - 58px);z-index:99;width:220px;min-width:220px;overflow-y:auto;overflow-x:hidden;}
  .teacher-sidebar.mobile-open{display:flex;}
  .teacher-sidebar-overlay.mobile-open{display:block;}
  .teacher-dash-content{padding:14px 0;}
  .teacher-content-wrap{padding:0 clamp(12px,3vw,16px);}
  .ld-teacher-active .t-hamburger{display:flex;}
  .ld-teacher-active header.public-nav{left:0;}
  .t-sb-bottom{padding-bottom:calc(12px + env(safe-area-inset-bottom));}
}
.t-sb-nav{flex:1;padding:8px 10px;overflow-y:auto;}
.t-sb-nav-section{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.3);letter-spacing:1.6px;text-transform:uppercase;padding:0 10px;margin-bottom:6px;margin-top:4px;white-space:nowrap;overflow:hidden;}
.t-sb-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:10px 10px 12px;flex-shrink:0;}
.t-sb-user-card{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,0.07);border-radius:var(--radius-xl);padding:8px 9px;position:relative;}
.t-sb-av{width:40px;height:40px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--gold),var(--gold2));color:#161616;font-size:var(--font-size-body-m);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2.5px solid var(--gold);font-family:var(--font-heading);overflow:hidden;transition:transform 0.18s,border-color 0.18s;}
.t-sb-av:hover{transform:scale(1.06);border-color:#fff;}
.t-sb-user-info{flex:1;min-width:0;}
.t-sb-name{color:#fff;font-family:var(--font-heading);font-size:var(--font-size-body-m);font-weight:700;letter-spacing:0.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.t-sb-sub{color:rgba(255,255,255,0.45);font-size:var(--font-size-body-s);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px;}
.dash-stat{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px;text-align:center;box-shadow:0 2px 10px rgba(17,30,56,0.06);}
.ds-num{font-family:var(--font-heading);font-size:var(--font-size-heading-xl);color:var(--navy);}
.ds-lbl{font-size:var(--font-size-body-s);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px;}
.add-student-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:22px;margin-bottom:20px;}
.add-student-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--navy);margin-bottom:4px;}
.add-student-card > p{font-size:var(--font-size-body-m);color:var(--muted);margin-bottom:14px;}
.add-row{display:flex;gap:8px;flex-wrap:wrap;}
.add-input{flex:1;min-width:120px;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-family:var(--font-body);font-size:var(--font-size-body-m);outline:none;}
.add-input:focus{border-color:var(--navy);}
.btn-add{padding:10px 20px;background:var(--navy);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;white-space:nowrap;}
.add-msg{font-size:var(--font-size-body-m);margin-top:9px;padding:8px 13px;border-radius:var(--radius-lg);display:none;}
.students-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.sc-hd{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:14px 20px;display:flex;align-items:center;justify-content:space-between;}
.sc-hd h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:white;}
.sc-hd span{font-size:var(--font-size-body-s);color:#8fafd8;background:rgba(255,255,255,0.12);padding:3px 10px;border-radius:var(--radius-3xl);}
.s-row{display:grid;grid-template-columns:1fr 100px auto;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);gap:12px;transition:background 0.15s;}
.s-row:last-child{border-bottom:none;}
.s-row:hover{background:#f8fafd;}
.s-info-wrap{display:flex;align-items:center;gap:12px;min-width:0;}
.s-avatar{width:38px;height:38px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;font-size:var(--font-size-body-m);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:0.5px;}
.s-info{min-width:0;}
.s-name{font-weight:600;font-size:var(--font-size-body-m);color:#262626;}
.s-id{font-size:var(--font-size-body-s);color:var(--muted);}
.s-meta{font-size:var(--font-size-body-s);color:#8D8D8D;margin-top:1px;}
.s-status-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.badge-on{display:inline-flex;align-items:center;gap:5px;background:#f4f4f4;color:#0E6027;border:1px solid #A7F0BA;padding:3px 10px;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;}
.badge-on::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:#42BE65;display:inline-block;flex-shrink:0;}
.badge-off{display:inline-flex;align-items:center;gap:5px;background:#fff0f2;color:var(--red);border:1px solid #ffc2c5;padding:3px 10px;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;}
.badge-off::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:#da1e28;display:inline-block;flex-shrink:0;}
.s-last-login{font-size:var(--font-size-body-s);color:#8D8D8D;white-space:nowrap;}
.s-btns{display:flex;gap:5px;align-items:center;justify-content:flex-end;}
.btn-view{padding:6px 14px;font-size:var(--font-size-body-s);font-weight:600;border-radius:var(--radius-full);cursor:pointer;border:none;background:var(--navy);color:white;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.btn-view:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,0.25);}
.btn-tog{padding:5px 10px;font-size:var(--font-size-body-s);border-radius:var(--radius-full);cursor:pointer;border:1.5px solid var(--border);background:white;font-family:var(--font-body);color:#525252;transition:all 0.15s;white-space:nowrap;}
.btn-tog:hover{border-color:#8D8D8D;background:#f4f4f4;}
.btn-del{padding:5px 10px;font-size:var(--font-size-body-s);border-radius:var(--radius-full);cursor:pointer;border:1.5px solid #ffc2c5;background:white;color:#da1e28;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.btn-del:hover{background:#fff0f2;}
.btn-sm-edit{padding:5px 10px;font-size:var(--font-size-body-s);border-radius:var(--radius-full);cursor:pointer;border:1.5px solid #78A9FF;background:white;color:#0f62fe;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.btn-sm-edit:hover{background:#eff6ff;}
.btn-restore{padding:5px 10px;font-size:var(--font-size-body-s);border-radius:var(--radius-full);cursor:pointer;border:1.5px solid #74e792;background:white;color:#24A148;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.btn-restore:hover{background:#f4f4f4;}
.badge-archived{background:#fff8e7;color:#0f62fe;border:1px solid #D0E2FF;padding:3px 9px;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;}
/* Student View Modal */
#studentViewModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9000;align-items:center;justify-content:center;padding:16px;}
.svm-box{background:white;border-radius:var(--radius-2xl);width:100%;max-width:640px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.svm-hd{background:linear-gradient(135deg,#161616,#262626);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;}
.svm-hd h3{font-family:var(--font-heading);color:white;font-size:var(--font-size-heading-m);margin:0;}
.svm-body{overflow-y:auto;padding:20px 22px;flex:1;}
.svm-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.svm-stat{background:#f7f9fc;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:14px;text-align:center;}
.svm-stat-num{font-size:var(--font-size-metric-m);font-weight:var(--font-weight-metric);color:var(--navy);font-family:var(--font-metric);line-height:var(--line-height-metric-m);}
.svm-stat-lbl{font-size:var(--font-size-body-s);color:var(--muted);margin-top:2px;}
.svm-session{background:#f7f9fc;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:12px 14px;margin-bottom:10px;}
.svm-session-title{font-weight:600;font-size:var(--font-size-body-m);color:var(--navy);}
.svm-session-meta{font-size:var(--font-size-body-s);color:var(--muted);margin-top:3px;}
/* Archive section */
.archive-card{background:white;border:1.5px solid #D0E2FF;border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:20px;}
.archive-hd{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:13px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.archive-hd h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:white;margin:0;}
.archive-hd span{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.75);}
.archive-row{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #D0E2FF;flex-wrap:wrap;gap:8px;}
.archive-row:last-child{border-bottom:none;}
.archive-date{font-size:var(--font-size-body-s);color:#0f62fe;margin-top:2px;}
.sessions-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;}
.sessions-hd{background:var(--navy2);padding:13px 18px;}
.sessions-hd h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:white;}
/* ── Password Alerts + Recent Sessions Widget ── */
.pasw-card{background:white;border:1px solid #e0e0e0;border-radius:16px;overflow:hidden;margin-top:18px;display:flex;flex-direction:column;}
.pasw-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e0e0e0;flex-shrink:0;}
.pasw-tab-row{display:flex;gap:6px;flex-wrap:wrap;}
.pasw-tab-btn{padding:5px 13px;border-radius:var(--radius-full);font-size:12px;font-weight:600;border:1.5px solid var(--border);background:white;color:var(--muted);cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.pasw-tab-btn:hover{background:#F5F5F5;}
.pasw-tab-btn.active{background:var(--navy);color:white;border-color:var(--navy);}
.pasw-clear-btn{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:600;color:#da1e28;background:none;border:1px solid #da1e28;border-radius:var(--radius-full);padding:4px 10px;cursor:pointer;white-space:nowrap;transition:all 0.15s;}
.pasw-clear-btn:hover{background:#fff0f2;}
.pasw-list{padding:0 0 4px;height:420px;overflow-y:auto;flex:1;}
.pasw-row{display:flex;align-items:center;justify-content:space-between;min-height:81px;border-bottom:1px solid #e0e0e0;padding:8px 0;}
.pasw-row:last-child{border-bottom:none;}
.pasw-row-left{padding-left:27px;display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0;}
.pasw-row-name{font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;color:#262626;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pasw-row-date{font-family:'Open Sans',sans-serif;font-size:12px;font-weight:400;color:#6f6f6f;line-height:20px;}
.pasw-row-right{padding-right:17px;text-align:right;font-family:'Open Sans',sans-serif;font-size:12px;color:#6f6f6f;line-height:16px;flex-shrink:0;}
.pasw-row-right p{margin:0;line-height:16px;}
.pasw-eye-btn{background:none;border:none;cursor:pointer;padding:2px 3px;color:#9ca3af;vertical-align:middle;display:inline-flex;align-items:center;border-radius:4px;}
.pasw-eye-btn:hover{color:#374151;background:rgba(0,0,0,0.05);}
.pasw-empty{padding:28px 20px;text-align:center;color:#6f6f6f;font-family:'Open Sans',sans-serif;font-size:13px;}
.t-login-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-3xl);padding:40px;max-width:440px;margin:0 auto;box-shadow:0 8px 40px rgba(17,30,56,0.1);}
.t-login-card h2{font-family:var(--font-heading);font-size:var(--font-size-heading-l);color:var(--navy);margin-bottom:8px;font-weight:800;}
.t-login-card p{font-size:var(--font-size-body-m);color:var(--muted);margin-bottom:22px;line-height:1.6;}
.page-contact{text-align:center;padding:28px 20px 32px;margin-top:10px;}
.f-brand{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:#161616;margin-bottom:3px;}
.f-tag{font-size:var(--font-size-body-s);color:#888;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;}
.f-divider{width:34px;height:1px;background:rgba(15,98,254,0.35);margin:8px auto;}
.f-icons{display:flex;gap:22px;justify-content:center;align-items:center;}
.f-icon-link{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;}
.f-circle{width:44px;height:44px;border-radius:var(--radius-full);border:1.5px solid rgba(0,0,0,0.15);background:rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;transition:all 0.25s;}
.f-icon-link:hover .f-circle.yt{background:rgba(255,107,107,0.18);border-color:rgba(255,107,107,0.75);}
.f-icon-link:hover .f-circle.wa{background:rgba(107,203,119,0.18);border-color:rgba(107,203,119,0.75);}
.f-icon-link:hover .f-circle.ig{background:rgba(193,53,132,0.18);border-color:rgba(193,53,132,0.75);}
.f-icon-lbl{font-size:var(--font-size-body-s);color:rgba(0,0,0,0.45);letter-spacing:2px;text-transform:uppercase;}
.f-sep{width:1px;height:32px;background:rgba(0,0,0,0.12);}
.f-bottom-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:14px;}.f-powered{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.f-powered-lbl{font-size:var(--font-size-body-s);color:#888;letter-spacing:1.5px;text-transform:uppercase;}
.f-powered-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.f-ai-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-3xl);border:1px solid rgba(0,0,0,0.12);background:rgba(0,0,0,0.04);font-size:var(--font-size-body-s);font-weight:600;color:#444;letter-spacing:0.2px;}
.f-ai-badge svg{flex-shrink:0;}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr auto;gap:24px;padding:50px 32px;align-items:center;}.hero-right{display:flex;align-items:center;justify-content:center;}.hero-float{display:none!important;}.hero-visual-card{background:rgba(255,255,255,0.06);border:2px solid rgba(120,169,255,0.4);box-shadow:0 0 24px rgba(15,98,254,0.25);backdrop-filter:none;padding:14px;width:auto;min-width:unset;display:flex;flex-direction:column;align-items:center;gap:0;}.hero-visual-logo{width:110px;height:110px;margin:0 auto;}.hero-visual-name{font-size:12px;margin-top:8px;}.hero-visual-sub{font-size:9px;letter-spacing:1.5px;}.feat-grid{grid-template-columns:1fr 1fr;}.hiw-steps{grid-template-columns:1fr;gap:16px;}.header-nav{display:none;}.pricing-grid{grid-template-columns:1fr;}.pricing-card.featured{transform:none;}.land-footer-grid{grid-template-columns:1fr 1fr;gap:32px;}header{padding:0 24px;}.res-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){header{padding:0 16px;}#teacherLoginBtn{display:none;}.btn-hdr-gold{padding:8px 14px;font-size:var(--font-size-body-s);}.land-hero{min-height:auto;padding:0;}.hero-inner{min-height:auto;padding:36px 18px 44px;grid-template-columns:1fr auto;gap:12px;align-items:center;}.hero-left h1{font-size:var(--font-size-heading-xxl);}.hero-right{display:flex;align-items:center;}.hero-visual-logo{width:72px;height:72px;}.hero-visual-name{font-size:10px;}.hero-visual-sub{font-size:8px;letter-spacing:1px;}.features{padding:56px 20px;}.stats-bar{flex-wrap:wrap;gap:0;padding:28px 20px;}.stat-item{padding:16px 20px;flex:0 0 50%;max-width:50%;}.stat-divider{display:none;}.feat-grid{grid-template-columns:1fr;gap:14px;}.how-it-works{padding:56px 20px;}.pricing{padding:56px 20px;}.land-footer{padding:48px 20px 24px;}.land-footer-grid{grid-template-columns:1fr 1fr;gap:20px 24px;}.land-footer-grid>div:first-child{grid-column:1/-1;}.land-footer-bottom{flex-direction:column;text-align:center;}.land-cta{padding:56px 20px;}.container{padding:22px 12px 60px;}.grade-row{flex-direction:column;}.add-row{flex-direction:column;}.res-filter-bar{flex-wrap:wrap;}.res-grid{grid-template-columns:1fr;}.res-hero{border-radius:var(--radius-full);}.res-hero-stats{gap:20px;}.pdf-toolbar{flex-wrap:wrap;gap:8px;}.res-upload-row{flex-direction:column;}.dash-layout{height:calc(100vh - 58px);}#mainApp{margin-top:-22px;margin-bottom:-60px;}}
/* ===== RESOURCES PAGE ===== */
#resourcesPage{display:none;}
/* legacy — keep hidden, public resources uses #publicResourcesPage */
/* ── Resources Page ── */
.res-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 65%,#161616 100%);padding:56px 28px 64px;text-align:center;position:relative;overflow:hidden;border-radius:var(--radius-2xl);margin-bottom:28px;}
.res-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 25%,rgba(15,98,254,0.22) 0%,transparent 50%),radial-gradient(ellipse at 15% 75%,rgba(15,98,254,0.12) 0%,transparent 40%);pointer-events:none;}
.res-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 110%,rgba(255,255,255,0.04) 0%,transparent 60%);pointer-events:none;}
.res-hero h1{font-family:var(--font-heading);font-size:clamp(28px,4.5vw,56px);color:white;margin-bottom:12px;position:relative;font-weight:900;letter-spacing:-0.5px;}
.res-hero h1 em{color:var(--gold);font-style:italic;}
.res-hero p{font-size:var(--font-size-body-l);color:rgba(170,181,213,0.9);max-width:520px;margin:0 auto 0;position:relative;line-height:1.7;}
.res-hero-stats{display:flex;justify-content:center;gap:0;flex-wrap:wrap;position:relative;margin-top:32px;border-top:1px solid rgba(255,255,255,0.1);padding-top:28px;}
.res-hero-stat{text-align:center;padding:0 40px;border-right:1px solid rgba(255,255,255,0.12);}
.res-hero-stat:last-child{border-right:none;}
.res-hero-stat strong{display:block;font-family:var(--font-heading);font-size:var(--font-size-heading-xl);color:var(--gold);font-weight:900;line-height:1.1;}
.res-hero-stat span{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.5);letter-spacing:1.5px;text-transform:uppercase;margin-top:5px;display:block;}
.res-container{width:100%;max-width:1080px;margin:0 auto;padding:0 24px 80px;}
/* Search + filters */
.res-filter-bar{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:14px 18px;margin-bottom:16px;display:flex;gap:10px;align-items:center;box-shadow:0 4px 20px rgba(17,30,56,0.07);}
.res-filter-select{padding:10px 42px 10px 16px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);color:var(--ink);background:white;outline:none;cursor:pointer;transition:border-color 0.15s;white-space:nowrap;flex-shrink:0;}
.res-filter-select:focus,.res-filter-select:hover{border-color:var(--navy);}
.res-search{flex:1;padding:10px 14px 10px 42px;border:none;border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);outline:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 14px center;}
.res-search:focus{outline:none;}
/* Type pills */
.res-type-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.res-pill{padding:7px 18px;border-radius:var(--radius-full);border:1.5px solid var(--border);font-size:var(--font-size-body-s);font-weight:600;cursor:pointer;font-family:var(--font-body);background:white;color:#6f6f6f;transition:all 0.18s;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
.res-pill:hover:not(.active){border-color:var(--navy);color:var(--navy);background:#f8fafd;}
.res-pill.active{background:var(--navy);border-color:var(--navy);color:white;box-shadow:0 4px 12px rgba(17,30,56,0.2);}
.res-pill.active.pill-past{background:#0F62FE;border-color:#0F62FE;color:white;box-shadow:0 4px 12px rgba(15,98,254,0.22);}
.res-pill.active.pill-notes{background:#6929C4;border-color:#6929C4;color:white;box-shadow:0 4px 12px rgba(105,41,196,0.22);}
.res-pill.active.pill-ebook{background:#C76100;border-color:#C76100;color:white;box-shadow:0 4px 12px rgba(199,97,0,0.22);}
/* Result count */
.res-count{font-size:var(--font-size-body-m);color:var(--muted);margin-bottom:18px;font-weight:500;display:flex;align-items:center;gap:6px;}
.res-count strong{color:var(--navy);}
/* Grid — 3 columns */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* Cards (base — shared with teacher section) */
.res-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);transition:all 0.2s;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.res-card:hover{border-color:transparent;box-shadow:0 10px 36px rgba(17,30,56,0.12);transform:translateY(-3px);}
.res-card-media{position:relative;height:248px;padding:18px;background:linear-gradient(180deg,#fafbfd 0%,#f4f6fb 100%);border-bottom:1px solid var(--border);overflow:hidden;}
.res-card-media::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0));pointer-events:none;}
.res-card-body{padding:16px 18px 14px;flex:1;display:flex;flex-direction:column;gap:10px;}
.res-card-top{display:flex;align-items:flex-start;gap:11px;}
.res-icon-wrap{width:100%;height:100%;border-radius:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:56px;color:var(--navy);background:var(--res-accent,#eef2ff);box-shadow:inset 0 0 0 1px rgba(17,30,56,0.06);}
.res-media-kind{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:30px;padding:0 12px;border-radius:10px;background:#2f2f34;color:#fff;font-size:var(--font-size-body-s);font-weight:800;letter-spacing:0.5px;text-transform:uppercase;box-shadow:0 10px 24px rgba(17,30,56,0.22);}
.res-preview-frame{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.res-preview-frame::after{content:"";position:absolute;left:24px;right:24px;bottom:10px;height:16px;border-radius:999px;background:rgba(17,30,56,0.08);filter:blur(12px);z-index:0;}
.res-preview-canvas{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.res-preview-page{max-width:100%;max-height:100%;object-fit:contain;object-position:top center;border-radius:2px;background:white;box-shadow:0 12px 30px rgba(17,30,56,0.18),0 0 0 1px rgba(17,30,56,0.08);}
.res-preview-fallback{width:100%;height:100%;}
.res-preview-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-body-s);font-weight:700;color:var(--muted);background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.02));z-index:2;}
.res-preview-ready .res-preview-loading{display:none;}
.res-title{font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);line-height:1.4;}
.res-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.res-badge{padding:2px 8px;border-radius:var(--radius-md);font-size:var(--font-size-body-s);font-weight:600;letter-spacing:0.3px;}
.badge-subj{background:#f4f4f4;color:#525252;}
.badge-grade{background:#fef3e2;color:#FF832B;}
.badge-year{background:#f4f4f4;color:#0A4D1E;font-weight:700;}
.badge-type-past{background:#ecfdf5;color:#0E6027;border:1px solid #74E792;}
.badge-type-notes{background:#E8DAFF;color:#6929C4;border:1px solid #DCC7FF;}
.badge-type-ebook{background:#fff8ec;color:#FF832B;border:1px solid #FFB784;}
.res-size{font-size:var(--font-size-body-s);color:var(--muted);margin-left:2px;}
.res-card-footer{padding:11px 18px;border-top:1px solid var(--border);background:white;display:flex;gap:8px;}
/* View = Secondary button — navy outline, no fill (reduces cognitive noise) */
.btn-view{flex:1;padding:8px 12px;background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:6px;}
.btn-view:hover{background:var(--navy-pale);}
/* Save = Tertiary button — light gray border */
.btn-dl{padding:8px 13px;background:transparent;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:600;cursor:pointer;transition:all 0.18s;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--font-body);white-space:nowrap;}
.btn-dl:hover{border-color:var(--navy);background:var(--navy-pale);}
/* ── Public Resources Cards (enhanced) ── */
.pub-res-card{border-radius:var(--radius-2xl);box-shadow:0 2px 12px rgba(17,30,56,0.07);}
.pub-res-card:hover{box-shadow:0 14px 44px rgba(17,30,56,0.16);transform:translateY(-4px);}
.pub-res-card .res-card-bar{display:none;}
.pub-res-body{padding:20px 20px 16px;display:flex;gap:15px;flex:1;align-items:flex-start;}
.pub-res-icon{width:46px;height:46px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pub-res-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.pub-res-type-badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-md);font-size:var(--font-size-body-s);font-weight:700;letter-spacing:0.4px;width:fit-content;}
.pub-res-title{font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);line-height:1.45;margin-top:2px;}
.pub-res-meta{font-size:var(--font-size-body-s);color:var(--muted);font-weight:500;line-height:1.4;}
.pub-res-size{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-body-s);color:#8D8D8D;margin-top:3px;font-weight:500;}
.pub-res-footer{padding:13px 18px;border-top:1px solid var(--border);background:white;display:flex;gap:8px;}
/* View = Secondary — navy outline, no fill (same rule as .btn-view) */
.pub-btn-view{flex:1;padding:9px 12px;background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:0.2px;}
.pub-btn-view:hover{background:var(--navy-pale);}
.pub-btn-dl{padding:9px 14px;background:var(--gold);color:var(--navy);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;letter-spacing:0.2px;}
.pub-btn-dl:hover{background:var(--gold2);box-shadow:0 4px 14px rgba(15,98,254,0.35);}
/* Pro lock on revision notes */
.pub-res-card.locked-card{position:relative;overflow:hidden;}
.pub-res-card.locked-card::after{content:"";position:absolute;inset:0;background:rgba(17,30,56,0.04);pointer-events:none;border-radius:var(--radius-2xl);}
.pub-res-locked-footer{padding:13px 18px;border-top:1px solid var(--border);background:linear-gradient(135deg,#fefce8,#fffbf0);display:flex;gap:8px;align-items:center;}
.pub-btn-unlock{flex:1;padding:9px 12px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:0.2px;}
.pub-btn-unlock:hover{box-shadow:0 4px 14px rgba(15,98,254,0.45);transform:translateY(-1px);}
.pub-locked-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:var(--font-size-body-s);font-weight:800;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-md);position:absolute;top:12px;right:12px;z-index:2;}
@media(max-width:860px){.res-grid{grid-template-columns:repeat(2,1fr);}.res-card-media{height:228px;}}
@media(max-width:560px){.res-grid{grid-template-columns:1fr;}.res-card-media{height:236px;}}
/* Pro upgrade modal */
#resProModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1100;align-items:center;justify-content:center;padding:20px;}
#resProModal.open{display:flex;}
.res-pro-modal-box{background:white;border-radius:var(--radius-3xl);padding:44px 40px;max-width:440px;width:100%;text-align:center;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.35);}
.res-pro-modal-icon{width:64px;height:64px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.res-pro-modal-box h3{font-family:var(--font-heading);font-size:var(--font-size-heading-l);color:var(--navy);margin-bottom:9px;font-weight:800;}
.res-pro-modal-box p{font-size:var(--font-size-body-m);color:var(--muted);line-height:1.65;margin-bottom:24px;}
.res-pro-modal-btns{display:flex;gap:10px;flex-direction:column;}
.btn-pro-signup{padding:13px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;transition:all 0.18s;}
.btn-pro-signup:hover{opacity:0.9;transform:translateY(-1px);}
.btn-pro-login{padding:11px;background:transparent;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;transition:all 0.18s;}
.btn-pro-login:hover{border-color:var(--navy);background:#f8fafd;}
.btn-pro-close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;border-radius:var(--radius-full);transition:background 0.15s;}
.btn-pro-close:hover{background:#f4f4f4;}
/* CTA Box */
.pub-res-cta-box{text-align:center;margin-top:56px;padding:52px 36px;background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 65%,#161616 100%);border-radius:var(--radius-3xl);position:relative;overflow:hidden;}
.pub-res-cta-box::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;background:rgba(15,98,254,0.12);border-radius:var(--radius-full);filter:blur(70px);pointer-events:none;}
.pub-res-cta-box h3{font-family:var(--font-heading);font-size:clamp(20px,3vw,28px);color:white;margin-bottom:12px;font-weight:800;position:relative;}
.pub-res-cta-box p{font-size:var(--font-size-body-m);color:rgba(170,181,213,0.85);max-width:480px;margin:0 auto 26px;line-height:1.7;position:relative;}
.pub-res-cta-btn{background:var(--gold);color:var(--navy);padding:14px 32px;border-radius:var(--radius-full);font-size:var(--font-size-body-l);font-weight:700;border:none;cursor:pointer;font-family:var(--font-body);transition:all 0.2s;display:inline-block;position:relative;letter-spacing:0.2px;}
.pub-res-cta-btn:hover{background:var(--gold2);box-shadow:0 8px 28px rgba(15,98,254,0.45);transform:translateY(-2px);}
/* Subject accent colors */
.res-acc-chemistry{background:#6929C4;}.res-acc-biology{background:#42BE65;}.res-acc-physics{background:#0f62fe;}
.res-acc-maths{background:#da1e28;}.res-acc-english{background:#00539A;}.res-acc-history{background:#FF832B;}
.res-acc-geography{background:#0E6027;}.res-acc-computer{background:#161616;}.res-acc-accounts{background:#8A3FFC;}
.res-acc-economics{background:#F1C21B;}.res-acc-science{background:#005D5D;}.res-acc-urdu{background:#9F1853;}
.res-acc-islamiyat{background:#42BE65;}.res-acc-default{background:var(--navy);}
/* Subject icon bg */
.res-ico-chemistry{background:#fff8ec;}.res-ico-biology{background:#A7F0BA;}.res-ico-physics{background:#dbeafe;}
.res-ico-maths{background:#ede9fe;}.res-ico-english{background:#cffafe;}.res-ico-history{background:#fde8c8;}
.res-ico-geography{background:#ecfccb;}.res-ico-computer{background:#e0f2fe;}.res-ico-accounts{background:#ffedd5;}
.res-ico-economics{background:#ccfbf1;}.res-ico-science{background:#E8DAFF;}.res-ico-default{background:#f4f4f4;}
/* Empty state */
.res-empty{text-align:center;padding:64px 20px;color:var(--muted);}
.res-empty-icon{font-size:var(--font-size-heading-xxl);margin-bottom:12px;opacity:0.5;}
.res-empty h3{font-size:var(--font-size-body-l);font-weight:600;color:var(--ink);margin-bottom:6px;}
.res-empty p{font-size:var(--font-size-body-m);}
/* My Notes Cards */
.mn-card{background:#fff;border-radius:var(--radius-2xl);box-shadow:0 1px 4px rgba(15,23,42,0.07),0 4px 16px rgba(15,23,42,0.06);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 0.22s,transform 0.22s;border:1px solid rgba(15,23,42,0.06);}
.mn-card:hover{box-shadow:0 8px 36px rgba(15,23,42,0.14);transform:translateY(-4px);}
.mn-stripe{display:none;}/* removed — no colored stripes per design system */
.mn-body{padding:18px 20px 14px;flex:1;display:flex;flex-direction:column;gap:0;}
.mn-icon{width:52px;height:52px;border-radius:var(--radius-2xl);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-heading-l);margin-bottom:14px;flex-shrink:0;}
.mn-title{font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:700;color:#161616;line-height:1.45;margin-bottom:10px;}
.mn-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px;}
.mn-chip{padding:3px 10px;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;letter-spacing:0.2px;}
.mn-chip-grade{background:#f4f4f4;color:#525252;}
.mn-chip-chap{background:#f4f4f4;color:#6f6f6f;border:1px solid #e2e8f0;font-weight:500;}
.mn-date{font-size:var(--font-size-body-s);color:#8D8D8D;letter-spacing:0.1px;}
.mn-footer{padding:12px 16px 14px;margin-top:4px;display:flex;gap:8px;}
/* mn-btn = secondary button from design system: navy outline, navy text, no fill */
.mn-btn{flex:1;padding:10px 12px;background:transparent;border:1.5px solid var(--navy);border-radius:var(--radius-full);color:var(--navy);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;transition:all 0.18s;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:0.2px;}
.mn-btn:hover{background:var(--navy-pale);}
.mn-btn:active{transform:scale(0.97);}
.mn-btn-view{background:#2563eb;border-color:#2563eb;color:#fff;}
.mn-btn-view:hover{background:#1d4ed8;border-color:#1d4ed8;}
.mn-btn-pdf{background:#161616;border-color:#161616;color:#fff;}
.mn-btn-pdf:hover{background:#374151;border-color:#374151;}
/* ── Teacher Token Usage Card ── */
.token-usage-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:20px 22px;margin-bottom:20px;}
.token-usage-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.token-usage-hd h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:var(--navy);font-weight:700;margin:0;}
.token-bar-wrap{background:#f4f4f4;border-radius:var(--radius-lg);height:10px;margin:8px 0;overflow:hidden;}
.token-bar-fill{height:100%;border-radius:var(--radius-lg);background:linear-gradient(90deg,#161616,#0f62fe);transition:width 0.6s ease;}
.token-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.token-stat-box{background:#f7f9fc;border-radius:var(--radius-xl);padding:12px 14px;text-align:center;}
.token-stat-box .ts-num{font-size:var(--font-size-heading-m);font-weight:800;color:var(--navy);font-family:var(--font-heading);}
.token-stat-box .ts-lbl{font-size:var(--font-size-body-s);color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600;margin-top:2px;}
/* Teacher Resources Upload */
.res-upload-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:20px;}
.res-upload-hd{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:14px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.res-upload-hd h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:white;}
.res-upload-body{padding:20px;}
.res-upload-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.res-upload-input{flex:1;min-width:140px;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);outline:none;}
.res-upload-input:focus{border-color:var(--navy);}
.res-upload-select{padding:10px 42px 10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);background:white;outline:none;cursor:pointer;}
.res-file-zone{border:2px dashed var(--border);border-radius:var(--radius-xl);padding:22px;text-align:center;cursor:pointer;transition:all 0.2s;background:var(--white);margin-bottom:12px;position:relative;}
.res-file-zone:hover,.res-file-zone.drag{border-color:var(--navy);background:var(--navy-pale);}
.res-file-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.res-prog-wrap{display:none;margin-bottom:10px;}
.res-prog-bar{height:6px;background:var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.res-prog-fill{height:100%;background:var(--gold);transition:width 0.3s;}
.res-prog-txt{font-size:var(--font-size-body-s);color:var(--muted);margin-bottom:4px;}
.res-list-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);}
.res-list-item:last-child{border-bottom:none;}
.res-list-info{flex:1;}
.res-list-title{font-size:var(--font-size-body-m);font-weight:600;color:var(--ink);}
.res-list-sub{font-size:var(--font-size-body-s);color:var(--muted);}
.btn-del-res{background:none;border:1px solid #ffc2c5;color:var(--red);border-radius:var(--radius-full);padding:4px 10px;font-size:var(--font-size-body-s);cursor:pointer;}
.btn-del-res:hover{background:#fff0f2;}
.btn-edit-res{background:none;border:1px solid #c6d8f5;color:#0f62fe;border-radius:var(--radius-full);padding:4px 10px;font-size:var(--font-size-body-s);cursor:pointer;margin-right:4px;}
.btn-edit-res:hover{background:#f4f4f4;}
.res-edit-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9999;align-items:center;justify-content:center;}
.res-edit-modal-overlay.open{display:flex;}
.res-edit-modal{background:#fff;border-radius:var(--radius-2xl);padding:28px 28px 22px;width:100%;max-width:430px;box-shadow:0 8px 40px rgba(0,0,0,0.18);}
.res-edit-modal h3{margin:0 0 18px;font-size:var(--font-size-body-l);color:var(--navy);}
.res-edit-modal label{font-size:var(--font-size-body-s);font-weight:600;color:var(--muted);display:block;margin-bottom:4px;margin-top:12px;}
.res-edit-modal input,.res-edit-modal select{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-lg);font-size:var(--font-size-body-m);color:var(--ink);background:#fafafa;}
.res-edit-modal-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end;}
.res-edit-save-btn{background:var(--navy);color:#fff;border:none;border-radius:var(--radius-lg);padding:7px 20px;font-size:var(--font-size-body-m);cursor:pointer;font-weight:600;}
.res-edit-save-btn:hover{opacity:0.88;}
.res-edit-cancel-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-lg);padding:7px 16px;font-size:var(--font-size-body-m);cursor:pointer;}
/* ── Resource library new elements ── */
.res-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.res-time-ago{font-size:11px;color:var(--muted);margin-top:3px;font-weight:500;}
/* Kebab menu on teacher cards */
.res-kebab-wrap{position:absolute;top:10px;right:10px;z-index:4;}
.res-kebab-btn{background:white;border:1.5px solid var(--border);border-radius:var(--radius-full);width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;padding:0;}
.res-kebab-btn:hover{border-color:var(--navy);background:var(--navy-pale);}
.res-kebab-menu{position:absolute;right:0;top:36px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);box-shadow:0 8px 28px rgba(17,30,56,0.14);min-width:120px;overflow:hidden;display:none;}
.res-kebab-menu.open{display:block;}
.res-kebab-menu button{display:block;width:100%;text-align:left;padding:9px 16px;font-size:var(--font-size-body-s);font-family:var(--font-body);font-weight:600;background:none;border:none;color:var(--ink);cursor:pointer;transition:background 0.12s;}
.res-kebab-menu button:hover{background:#f4f4f4;}
.res-kebab-menu .res-kebab-del{color:var(--red);}
.res-kebab-menu .res-kebab-del:hover{background:#fff0f2;}
.res-card{position:relative;} /* ensure kebab absolute positioning works */
/* ── PDF viewer right panel (teacher) ── */
.res-pdf-panel-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:8900;}
.res-pdf-panel-overlay.open{display:block;}
.res-pdf-panel{position:fixed;top:0;right:-100%;width:56%;max-width:880px;height:100vh;background:#fff;box-shadow:-4px 0 40px rgba(0,0,0,0.18);z-index:8901;display:flex;flex-direction:column;transition:right 0.3s cubic-bezier(.4,0,.2,1);}
.res-pdf-panel.open{right:0;}
.res-pdf-panel-header{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1.5px solid var(--border);background:#fff;flex-shrink:0;}
.res-pdf-panel-title{flex:1;font-weight:700;font-size:var(--font-size-body-m);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res-pdf-panel-open-tab{padding:6px 14px;background:transparent;color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--radius-full);font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;}
.res-pdf-panel-open-tab:hover{background:var(--navy);color:#fff;}
.res-pdf-panel-close{background:none;border:1.5px solid var(--border);border-radius:var(--radius-full);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;line-height:1;color:var(--muted);}
.res-pdf-panel-close:hover{background:var(--navy-pale);border-color:var(--navy);color:var(--navy);}
.res-pdf-panel iframe{flex:1;border:none;width:100%;height:100%;display:block;}
@media(max-width:860px){.res-pdf-panel{width:100%;max-width:100%;}}
/* ── Send to Students modal — Apple design ── */
.res-send-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999;align-items:center;justify-content:center;padding:20px;}
.res-send-modal-overlay.open{display:flex;}
.res-send-modal{background:#fff;border-radius:22px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,0.22),0 4px 16px rgba(0,0,0,0.08);display:flex;flex-direction:column;max-height:86vh;overflow:hidden;}
/* Modal header */
.rsm-header{padding:22px 22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;}
.rsm-header-text{flex:1;min-width:0;}
.rsm-title{font-size:17px;font-weight:700;color:#1C1C1E;letter-spacing:-0.3px;margin:0 0 3px;}
.rsm-resource-chip{display:inline-block;background:#F2F2F7;color:#3C3C43;border-radius:6px;padding:3px 9px;font-size:12px;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rsm-close-btn{width:30px;height:30px;border-radius:50%;background:#E5E5EA;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#3C3C43;transition:background 0.15s;}
.rsm-close-btn:hover{background:#D1D1D6;}
.rsm-close-btn svg{display:block;}
/* Search */
.rsm-search-wrap{padding:14px 22px 10px;flex-shrink:0;}
.rsm-search-row{display:flex;align-items:center;gap:8px;background:#F2F2F7;border-radius:10px;padding:8px 12px;}
.rsm-search-row svg{flex-shrink:0;color:#8E8E93;}
.rsm-search-row input{flex:1;border:none;background:transparent;outline:none;font-size:15px;color:#1C1C1E;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.rsm-search-row input::placeholder{color:#8E8E93;}
/* Select all row */
.rsm-select-all{display:flex;align-items:center;gap:12px;padding:10px 22px;border-bottom:1px solid #F2F2F7;cursor:pointer;flex-shrink:0;}
.rsm-select-all:active{background:#F9F9F9;}
.rsm-sa-label{font-size:14px;font-weight:600;color:#007AFF;flex:1;}
.rsm-sa-count{font-size:13px;color:#8E8E93;}
/* Student list */
.rsm-list{flex:1;overflow-y:auto;overscroll-behavior:contain;}
.rsm-list::-webkit-scrollbar{width:4px;}
.rsm-list::-webkit-scrollbar-thumb{background:#D1D1D6;border-radius:4px;}
/* Student row */
.rsm-student-row{display:flex;align-items:center;gap:12px;padding:10px 22px;cursor:pointer;transition:background 0.12s;border-bottom:1px solid #F2F2F7;position:relative;}
.rsm-student-row:last-child{border-bottom:none;}
.rsm-student-row:active{background:#F2F2F7;}
.rsm-student-row.selected{background:#EBF4FF;}
.rsm-student-row input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;}
/* Avatar */
.rsm-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:-0.5px;}
/* Student info */
.rsm-student-info{flex:1;min-width:0;}
.rsm-student-name{font-size:15px;font-weight:500;color:#1C1C1E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rsm-student-meta{font-size:12px;color:#8E8E93;margin-top:1px;}
/* Checkmark */
.rsm-check{width:22px;height:22px;border-radius:50%;border:2px solid #C7C7CC;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;background:#fff;}
.rsm-student-row.selected .rsm-check{background:#007AFF;border-color:#007AFF;}
.rsm-check svg{opacity:0;transform:scale(0.5);transition:all 0.15s;}
.rsm-student-row.selected .rsm-check svg{opacity:1;transform:scale(1);}
/* Footer */
.rsm-footer{padding:14px 22px 20px;flex-shrink:0;background:#fff;}
.rsm-footer-divider{height:1px;background:#F2F2F7;margin-bottom:14px;}
.rsm-send-btn{width:100%;padding:14px;background:#007AFF;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;letter-spacing:-0.2px;transition:opacity 0.15s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.rsm-send-btn:hover{opacity:0.88;}
.rsm-send-btn:disabled{opacity:0.45;cursor:not-allowed;}
.rsm-cancel-btn{width:100%;padding:13px;background:#F2F2F7;color:#1C1C1E;border:none;border-radius:12px;font-size:15px;font-weight:500;cursor:pointer;margin-top:8px;transition:background 0.15s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
.rsm-cancel-btn:hover{background:#E5E5EA;}
@media(max-width:480px){.res-send-modal-overlay{padding:0;align-items:flex-end;}.res-send-modal{border-radius:22px 22px 0 0;max-height:92vh;}}
/* ── Student Notes pill ── */
.pill-studentnotes.active{background:#7c3aed;border-color:#7c3aed;color:#fff;}
/* ── Load More button ── */
.res-load-more-btn{padding:10px 32px;background:transparent;color:var(--navy);border:2px solid var(--navy);border-radius:99px;font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all 0.18s;}
.res-load-more-btn:hover{background:var(--navy);color:#fff;}
/* Teacher resource view layout */
.t-res-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.t-res-add-btn{display:flex;align-items:center;gap:7px;padding:10px 20px;background:var(--navy);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:700;cursor:pointer;transition:all 0.18s;white-space:nowrap;}
.t-res-add-btn:hover{opacity:0.88;transform:translateY(-1px);}
.t-res-stat-bar{display:flex;gap:24px;align-items:center;padding:14px 20px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);margin-bottom:20px;flex-wrap:wrap;}
.t-res-stat{text-align:center;}
.t-res-stat strong{display:block;font-size:var(--font-size-heading-m);font-weight:900;color:var(--navy);}
.t-res-stat span{font-size:var(--font-size-body-s);color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
/* Upload modal (teacher) */
.res-upload-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9000;align-items:center;justify-content:center;padding:16px;}
.res-upload-modal-overlay.open{display:flex;}
.res-upload-modal{background:white;border-radius:var(--radius-2xl);padding:28px;width:100%;max-width:560px;box-shadow:0 24px 80px rgba(0,0,0,0.25);max-height:90vh;overflow-y:auto;}
.res-upload-modal h3{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:var(--navy);margin:0 0 18px;display:flex;align-items:center;gap:8px;}
.res-upload-modal label{font-size:var(--font-size-body-s);font-weight:700;color:var(--muted);display:block;margin:12px 0 4px;text-transform:uppercase;letter-spacing:0.5px;}
.res-upload-modal input,.res-upload-modal select{width:100%;box-sizing:border-box;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);color:var(--ink);background:white;outline:none;}
.res-upload-modal input:focus,.res-upload-modal select:focus{border-color:var(--navy);}
.res-upload-modal-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.res-upload-modal-actions{display:flex;gap:10px;margin-top:20px;justify-content:flex-end;}
/* My Notes section */
.mn-section-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
@media(max-width:900px){
  .t-res-stat-bar{gap:14px;}
  .res-upload-modal-row{grid-template-columns:1fr;}
}
/* ===== QUIZ PAGE ===== */
#quizPage{display:none;}
.quiz-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:44px 28px 52px;text-align:center;position:relative;overflow:hidden;}
.quiz-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(15,98,254,0.15) 0%,transparent 60%);pointer-events:none;}
.quiz-hero h1{font-family:var(--font-heading);font-size:clamp(24px,4vw,32px);color:white;margin-bottom:8px;position:relative;}
.quiz-hero p{font-size:var(--font-size-body-m);color:#a8a8a8;max-width:500px;margin:0 auto;position:relative;}
.quiz-wrap{flex:1;min-width:0;max-width:860px;margin:0;padding:32px 22px 80px;}
/* ── Quiz view: center the inner row like the old subject-cards layout ── */
#dashViewQuiz{max-width:1080px;}
#dashViewQuiz.active{display:block!important;width:100%;}
.quiz-inner-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:50px;max-width:1200px;margin:0 auto;padding:0;width:100%;box-sizing:border-box;}
/* Performance sidebar (outside quiz-wrap) */
.quiz-perf-sidebar{width:310px;min-width:290px;flex-shrink:0;padding:32px 0 80px 0;display:flex;flex-direction:column;gap:16px;}
/* Hide sidebar when quiz is in full-bleed 2-panel mode */
.dash-content.qnl-full-content .quiz-perf-sidebar,#dashViewQuiz.qnl-full .quiz-perf-sidebar{display:none!important;}
/* Sidebar cards */
.qsi-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:18px 16px;display:flex;flex-direction:column;}
.qsi-card-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);margin:0 0 14px 0;display:flex;align-items:center;gap:6px;}
.qsi-card-title .material-symbols-rounded{font-size:18px;color:#0f62fe;}
.qsi-card-hint{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.55;}
/* content areas inside qsi-card fill available height */
#quizNewTopicsList,#quizStatsChart,#dbNewTopicsList,#dbStatsChart{flex:1;display:flex;flex-direction:column;}
/* distribute topic rows evenly to fill available vertical space */
#quizNewTopicsList,#dbNewTopicsList{justify-content:space-between;}
/* sidebar cards share equal height */
.quiz-perf-sidebar .qsi-card{flex:1;}
/* ── Dashboard View ── */

.db-header{padding:28px 0 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.db-title{font-size:24px;font-weight:800;color:var(--navy);margin:0 0 4px;}
.db-subtitle{font-size:13px;color:var(--muted);}
.db-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 14px;}
.db-stat-chip{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:18px 20px;display:flex;align-items:center;gap:16px;transition:all 0.2s;cursor:default;}
.db-stat-chip:hover{box-shadow:0 6px 24px rgba(17,30,56,0.10);transform:translateY(-1px);}
.db-stat-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:21px;}
.db-stat-val{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1;letter-spacing:-0.5px;}
.db-stat-label{font-size:12px;color:var(--muted);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;}
.db-stat-sub{font-size:11px;color:var(--muted);margin-top:4px;font-weight:500;opacity:0.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
/* Subject progress row */
.db-subj-prog-wrap{margin:0 0 28px;}
.db-subj-prog-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0.6px;text-transform:uppercase;margin-bottom:10px;}
.db-subj-prog-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.db-subj-prog-row::-webkit-scrollbar{display:none;}
.db-subj-prog-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px 18px;min-width:148px;flex:1;flex-shrink:0;transition:all 0.2s;cursor:default;}
.db-subj-prog-card:hover{box-shadow:0 4px 18px rgba(17,30,56,0.10);transform:translateY(-1px);}
.db-subj-prog-name{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px;text-transform:capitalize;letter-spacing:0.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-subj-prog-pct{font-size:22px;font-weight:800;line-height:1;margin-bottom:7px;letter-spacing:-0.5px;}
.db-subj-prog-bar-wrap{height:5px;background:#f0f0f0;border-radius:99px;overflow:hidden;margin-bottom:5px;}
.db-subj-prog-bar-fill{height:100%;border-radius:99px;transition:width 0.7s cubic-bezier(.4,0,.2,1);}
.db-subj-prog-sub{font-size:11px;color:var(--muted);font-weight:500;}
.db-subj-prog-empty{font-size:13px;color:var(--muted);padding:20px;text-align:center;background:white;border:1.5px dashed var(--border);border-radius:var(--radius-xl);}
.db-section-label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0.6px;text-transform:uppercase;margin:0 0 14px;}
.db-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px;}
.db-recent-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:20px 18px;margin-bottom:28px;}
.db-recent-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F0F0F0;}
.db-recent-item:last-child{border-bottom:none;padding-bottom:0;}
.db-recent-item:first-child{padding-top:0;}
.db-recent-icon{width:38px;height:38px;border-radius:10px;background:#F4F4F4;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.db-recent-subj{font-size:14px;font-weight:600;color:var(--navy);}
.db-recent-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.db-recent-empty{font-size:13px;color:var(--muted);text-align:center;padding:20px 0;}
.db-go-quiz{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#0F62FE,#4589FF);color:white;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:700;padding:9px 22px;cursor:pointer;flex-shrink:0;transition:all 0.2s;box-shadow:0 2px 14px rgba(15,98,254,0.32);}
.db-go-quiz:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(15,98,254,0.45);}
.db-upload-btn{display:inline-flex;align-items:center;gap:6px;background:white;color:var(--navy);border:1.5px solid var(--navy);border-radius:var(--radius-full);font-size:13px;font-weight:700;padding:8px 18px;cursor:pointer;flex-shrink:0;transition:all 0.2s;}
.db-upload-btn:hover{background:#f4f4f4;}
/* ── Dashboard header search + bell ── */
.db-header-search-wrap{flex:1;min-width:180px;max-width:340px;position:relative;display:flex;align-items:center;}
.db-header-search-wrap svg{position:absolute;left:12px;color:var(--muted);pointer-events:none;}
.db-header-search{width:100%;padding:9px 14px 9px 34px;border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:13px;color:var(--navy);background:white;outline:none;cursor:pointer;transition:border-color 0.18s;}
.db-header-search:hover{border-color:#0F62FE;}
.db-bell-btn{width:36px;height:36px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:white;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all 0.18s;flex-shrink:0;}
.db-bell-btn:hover{border-color:#0F62FE;color:#0F62FE;background:#EEF3FF;}
/* ── Sidebar plan card ── */
.sb-plan-card{margin:0 10px 10px;padding:10px 12px;background:rgba(255,255,255,0.07);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:8px;cursor:pointer;transition:background 0.18s;}
.sb-plan-card:hover{background:rgba(255,255,255,0.12);}
.sb-plan-icon{width:28px;height:28px;border-radius:var(--radius-lg);background:rgba(15,98,254,0.25);display:flex;align-items:center;justify-content:center;color:#78A9FF;flex-shrink:0;}
.sb-plan-name{flex:1;font-size:12px;font-weight:700;color:rgba(255,255,255,0.85);}
.sb-plan-btn{font-size:11px;font-weight:700;color:#78A9FF;background:rgba(15,98,254,0.2);border:none;border-radius:var(--radius-full);padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background 0.15s;}
.sb-plan-btn:hover{background:rgba(15,98,254,0.35);}
/* ── Fresh Material play button ── */
.qsi-topic-play-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid #0F62FE;background:transparent;color:#0F62FE;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.18s;flex-shrink:0;padding-left:2px;}
.qsi-topic-play-btn:hover{background:#0F62FE;color:white;}
/* ── Upload Material Modal ── */
.upm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;}
.upm-modal{background:#fff;border-radius:20px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.18);overflow:hidden;}
.upm-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0;}
.upm-head h3{margin:0;font-size:17px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;}
.upm-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);padding:0;line-height:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.upm-close:hover{background:#f4f4f4;}
.upm-body{flex:1;overflow-y:auto;padding:20px 24px;}
.upm-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.upm-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:5px;}
.upm-select,.upm-input{width:100%;border:1.5px solid #e5e7eb;border-radius:10px;padding:9px 12px;font-size:14px;color:var(--navy);background:#fff;outline:none;box-sizing:border-box;font-family:inherit;}
.upm-select:focus,.upm-input:focus{border-color:var(--gold);}
.upm-dropzone{border:2px dashed #d1d5db;border-radius:14px;padding:28px 20px;text-align:center;cursor:pointer;transition:all 0.2s;margin-top:4px;background:#fafafa;}
.upm-dropzone:hover,.upm-dropzone.drag-over{border-color:#10b981;background:#f0fdf4;}
.upm-dz-icon{font-size:28px;margin-bottom:8px;}
.upm-dz-text{font-size:14px;color:var(--navy);font-weight:600;margin-bottom:3px;}
.upm-dz-sub{font-size:12px;color:var(--muted);}
.upm-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.upm-thumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;background:#f4f4f4;border:1.5px solid #e5e7eb;}
.upm-thumb img{width:100%;height:100%;object-fit:cover;}
.upm-thumb-doc{width:72px;height:72px;border-radius:10px;background:#eff6ff;border:1.5px solid #bfdbfe;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#3b82f6;font-weight:600;text-align:center;padding:4px;box-sizing:border-box;}
.upm-thumb-rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.55);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.upm-status{font-size:13px;color:var(--muted);margin-top:10px;min-height:20px;text-align:center;}
.upm-foot{padding:16px 24px;border-top:1px solid #f0f0f0;display:flex;gap:10px;justify-content:flex-end;}
.upm-btn-cancel{background:none;border:1.5px solid #e5e7eb;color:var(--navy);border-radius:var(--radius-full);font-size:13px;font-weight:600;padding:9px 20px;cursor:pointer;}
.upm-btn-save{background:#10b981;color:#fff;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:700;padding:9px 22px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:7px;}
.upm-btn-save:hover{background:#059669;}
.upm-btn-save:disabled{background:#9ca3af;cursor:not-allowed;}
.upm-success{text-align:center;padding:8px 0 4px;}
.upm-success-icon{font-size:42px;margin-bottom:10px;}
.upm-success-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.upm-success-sub{font-size:13px;color:var(--muted);margin-bottom:18px;}
.upm-success-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.upm-quiz-now{background:var(--gold);color:#fff;border:none;border-radius:var(--radius-full);font-size:14px;font-weight:700;padding:11px 26px;cursor:pointer;}
.upm-view-mat{background:none;border:1.5px solid #e5e7eb;color:var(--navy);border-radius:var(--radius-full);font-size:14px;font-weight:600;padding:11px 22px;cursor:pointer;}
@media(max-width:480px){.upm-row{grid-template-columns:1fr;}}
/* ── Teacher UPM searchable student combobox ── */
.tupm-combo{position:relative;}
.tupm-combo-input{width:100%;border:1.5px solid #e5e7eb;border-radius:10px;padding:9px 36px 9px 12px;font-size:14px;color:var(--navy);background:#fff;outline:none;box-sizing:border-box;font-family:inherit;cursor:text;}
.tupm-combo-input:focus{border-color:var(--gold);}
.tupm-combo-input.has-value{background:#f0fdf4;border-color:#10b981;}
.tupm-combo-arrow{position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:#9ca3af;}
.tupm-combo-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:9999;max-height:200px;overflow-y:auto;display:none;}
.tupm-combo-drop.open{display:block;}
.tupm-combo-item{padding:9px 14px;font-size:13px;color:var(--navy);cursor:pointer;border-bottom:1px solid #f3f4f6;}
.tupm-combo-item:last-child{border-bottom:none;}
.tupm-combo-item:hover,.tupm-combo-item.active{background:#f0fdf4;color:#059669;}
.tupm-combo-empty{padding:10px 14px;font-size:13px;color:var(--muted);text-align:center;}
/* Multi-student selector */
.tupm-multi-wrap{border:1.5px solid #e5e7eb;border-radius:10px;padding:6px 10px;min-height:42px;background:#fff;display:flex;flex-wrap:wrap;gap:5px;align-items:center;cursor:text;box-sizing:border-box;}
.tupm-multi-wrap:focus-within{border-color:var(--gold);}
.tupm-multi-search{border:none;outline:none;font-size:14px;padding:4px 2px;flex:1;min-width:140px;background:transparent;font-family:inherit;color:var(--navy);}
.tupm-multi-search::placeholder{color:#9ca3af;}
.tupm-chip{display:inline-flex;align-items:center;gap:3px;background:#e0f2fe;color:#0369a1;border-radius:20px;padding:3px 6px 3px 10px;font-size:12px;font-weight:500;white-space:nowrap;}
.tupm-chip button{background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;color:#0369a1;font-size:15px;display:flex;align-items:center;}
.tupm-multi-drop{display:none;border:1.5px solid #e5e7eb;border-top:none;border-radius:0 0 10px 10px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.10);max-height:190px;overflow-y:auto;z-index:9999;}
.tupm-multi-drop.open{display:block;}
.tupm-multi-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid #f3f4f6;cursor:pointer;user-select:none;}
.tupm-multi-item:last-child{border-bottom:none;}
.tupm-multi-item:hover{background:#f9fafb;}
.tupm-multi-item.selected{background:#f0fdf4;}
.tupm-multi-item input[type=checkbox]{width:15px;height:15px;accent-color:#10b981;cursor:pointer;flex-shrink:0;}
.tupm-multi-item span{font-size:13px;color:var(--navy);flex:1;}
.tupm-multi-item.selected span{color:#059669;font-weight:500;}
/* ── Top 2-col row (ranking + AI assist) ── */
.db-bottom-row{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-bottom:32px;align-items:stretch;}
/* ── Leaderboard card ── */
.db-lb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.db-lb-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#10B981;background:rgba(16,185,129,0.1);border-radius:var(--radius-full);padding:3px 10px;letter-spacing:0.3px;}
.db-lb-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#10B981;flex-shrink:0;animation:db-pulse 1.8s infinite;}
@keyframes db-pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.db-lb-filters{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;}
.db-lb-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;border:1.5px solid #e4e8ef;background:white;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.db-lb-pill:hover{border-color:#0F62FE;color:#0F62FE;}
.db-lb-pill.active{background:#0F62FE;border-color:#0F62FE;color:white;}
#dbLeaderboard{overflow-y:auto;overflow-x:hidden;max-height:260px;padding-right:2px;}
#dbLeaderboard::-webkit-scrollbar{width:3px;}
#dbLeaderboard::-webkit-scrollbar-thumb{background:#e4e8ef;border-radius:3px;}
#dbLeaderboard .db-lb-row{min-width:0;}
.db-lb-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #F4F4F4;}
.db-lb-row:last-child{border-bottom:none;padding-bottom:0;}
.db-lb-row:first-child{padding-top:0;}
.db-lb-rank{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;font-weight:800;}
.db-lb-rank.r1{background:linear-gradient(135deg,#FFD700,#FFA500);color:white;}
.db-lb-rank.r2{background:linear-gradient(135deg,#C0C0C0,#A0A0A0);color:white;}
.db-lb-rank.r3{background:linear-gradient(135deg,#CD7F32,#A0522D);color:white;}
.db-lb-rank.rn{background:#F4F4F4;color:var(--muted);font-size:12px;}
.db-lb-info{flex:1;min-width:0;}
.db-lb-nameline{font-size:14px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:5px;}
.db-lb-you{font-size:11px;font-weight:600;color:#0F62FE;background:rgba(15,98,254,0.08);border-radius:999px;padding:1px 7px;}
.db-lb-bar-wrap{height:5px;border-radius:99px;background:#EBEBF0;margin:6px 0 4px;overflow:hidden;}
.db-lb-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,#0F62FE,#4589FF);transition:width 0.7s cubic-bezier(0.22,1,0.36,1);}
.db-lb-pts{font-size:11px;color:var(--muted);font-weight:600;}
.db-lb-score{text-align:right;flex-shrink:0;}
.db-lb-pct{font-size:16px;font-weight:800;color:var(--navy);line-height:1;}
.db-lb-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.db-lb-empty{font-size:14px;color:var(--muted);text-align:center;padding:28px 0;line-height:1.6;}
/* ── AI Assist widget (Replit reference design) ── */
.db-ai-widget{background:linear-gradient(135deg,#4f46e5 0%,#2563eb 50%,#7c3aed 100%);border-radius:20px;padding:28px 24px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;display:flex;flex-direction:column;min-height:260px;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(79,70,229,0.25);}
.db-ai-widget:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(79,70,229,0.4);}
.db-ai-orb1{position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.18);filter:blur(40px);pointer-events:none;}
.db-ai-orb2{position:absolute;bottom:-50px;left:-25px;width:140px;height:140px;border-radius:50%;background:rgba(167,139,250,0.28);filter:blur(40px);pointer-events:none;}
.db-ai-grid-overlay{position:absolute;inset:0;opacity:0.1;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,white 1px,transparent 0);background-size:28px 28px;}
.db-ai-shimmer{position:absolute;inset:0;opacity:0.18;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,transparent 40%,rgba(167,139,250,0.18) 100%);border-radius:inherit;transition:transform 0.7s;}
.db-ai-widget:hover .db-ai-shimmer{transform:scale(1.06);}
.db-ai-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;flex:1;}
.db-ai-top-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;}
.db-ai-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.2);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:999px;padding:5px 13px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.95);letter-spacing:0.6px;text-transform:uppercase;}
.db-ai-sparkle{padding:8px;background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.db-ai-title{font-size:21px;font-weight:800;color:white;line-height:1.25;margin:0 0 10px;letter-spacing:-0.2px;}
.db-ai-desc{font-size:12.5px;color:rgba(219,234,254,0.92);line-height:1.7;margin:0 0 20px;flex:1;font-weight:500;}
.db-ai-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.db-ai-avatars{display:flex;align-items:center;}
.db-ai-av{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,0.7);overflow:hidden;background:#6366f1;margin-left:-8px;flex-shrink:0;object-fit:cover;}
.db-ai-avatars .db-ai-av:first-child{margin-left:0;}
.db-ai-av-count{font-size:11px;color:rgba(219,234,254,0.85);font-weight:600;margin-left:8px;white-space:nowrap;}
.db-ai-cta{display:inline-flex;align-items:center;gap:7px;background:white;color:#4f46e5;border-radius:999px;font-size:13px;font-weight:700;padding:9px 18px;flex-shrink:0;transition:background 0.18s,transform 0.18s;box-shadow:0 4px 14px rgba(0,0,0,0.12);}
.db-ai-widget:hover .db-ai-cta{background:#f0f0ff;}
.db-ai-cta svg{transition:transform 0.18s;}
.db-ai-widget:hover .db-ai-cta svg{transform:translateX(3px);}
/* ── Dashboard: Previous Sessions table card ── */
.db-sess-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.db-sess-search{flex:1;min-width:130px;max-width:240px;padding:8px 14px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:13px;font-family:'Open Sans',sans-serif;color:var(--navy);background:#FAFAFA;outline:none;transition:border-color 0.18s;}
.db-sess-search:focus{border-color:#0F62FE;background:white;}
.db-sess-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.db-sess-pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:5px 14px;border-radius:999px;border:1.5px solid var(--border);background:white;color:var(--muted);cursor:pointer;transition:all 0.15s;line-height:1.3;}
.db-sess-pill:hover{border-color:#0F62FE;color:#0F62FE;}
.db-sess-pill.active{background:#0F62FE;border-color:#0F62FE;color:white;}
.db-sess-tbl-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1.5px solid var(--border);}
.db-sess-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.db-sess-tbl thead tr{background:#F8F9FB;}
.db-sess-tbl th{padding:12px 16px;font-size:11px;font-weight:700;color:var(--muted);text-align:left;letter-spacing:0.5px;text-transform:uppercase;border-bottom:1.5px solid var(--border);white-space:nowrap;}
.db-sess-tbl td{padding:13px 16px;border-bottom:1px solid #F4F4F4;color:var(--navy);vertical-align:middle;}
.db-sess-tbl tr:last-child td{border-bottom:none;}
.db-sess-tbl tbody tr{transition:background 0.12s;}
.db-sess-tbl tbody tr:hover{background:#F8FAFF;}
.db-sess-tbl-num{color:var(--muted);font-size:12px;font-weight:600;text-align:center;min-width:28px;}
.db-sess-tbl-title{font-weight:600;max-width:260px;}
.db-sess-tbl-title span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-sess-tbl-subj{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;font-weight:500;}
.db-sess-tbl-grade{font-size:12px;font-weight:700;padding:4px 10px;background:#EEF3FF;color:#0F62FE;border-radius:999px;white-space:nowrap;display:inline-block;}
.db-sess-tbl-date{white-space:nowrap;font-size:12.5px;color:var(--muted);font-weight:500;}
.db-sess-act{display:flex;align-items:center;gap:6px;}
.db-sess-act-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1.5px solid var(--border);border-radius:var(--radius-lg);background:white;cursor:pointer;color:var(--navy);transition:all 0.15s;padding:0;}
.db-sess-act-btn:hover{border-color:#0F62FE;color:#0F62FE;background:#EEF3FF;}
.db-sess-act-btn.pdf:hover{border-color:#6929C4;color:#6929C4;background:#F3EEFF;}
.db-sess-pg{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 0 2px;flex-wrap:wrap;}
.db-sess-pg-info{font-size:12px;color:var(--muted);font-weight:500;}
.db-sess-pg-btns{display:flex;gap:5px;align-items:center;}
.db-sess-pg-btn{min-width:30px;height:30px;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:13px;font-weight:600;cursor:pointer;background:white;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;transition:all 0.15s;font-family:'Open Sans',sans-serif;}
.db-sess-pg-btn:hover{border-color:#0F62FE;color:#0F62FE;}
.db-sess-pg-btn.active{background:#0F62FE;border-color:#0F62FE;color:white;}
.db-sess-pg-btn:disabled{opacity:0.35;cursor:not-allowed;pointer-events:none;}
.db-sess-empty-row td{text-align:center;padding:32px 16px;font-size:14px;color:var(--muted);line-height:1.6;}
@media(max-width:860px){.db-bottom-row{grid-template-columns:1fr;}}
@media(max-width:900px){.db-cards-grid{grid-template-columns:1fr 1fr;}.db-stats-row{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.db-cards-grid{grid-template-columns:1fr 1fr;}.db-stats-row{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.db-cards-grid{grid-template-columns:1fr;}.db-stats-row{grid-template-columns:1fr 1fr;}}
.qsi-topic-row{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #F0F0F0;}
.qsi-topic-row:last-child{border-bottom:none;padding-bottom:0;}
.qsi-topic-icon{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,rgba(17,30,56,0.07),rgba(17,30,56,0.03));display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.qsi-topic-info{flex:1;min-width:0;}
.qsi-topic-name{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.qsi-topic-badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 6px;border-radius:99px;background:#EEF3FF;color:#0353E9;margin-top:2px;line-height:1.5;}
.qsi-topic-btn{font-size:11px;font-weight:700;padding:4px 9px;border:none;border-radius:99px;background:#0F62FE;color:#fff;cursor:pointer;white-space:nowrap;transition:background 0.15s;flex-shrink:0;}
.qsi-topic-btn:hover{background:#0353E9;}
.qsi-topic-empty{color:var(--muted);font-size:var(--font-size-body-s);text-align:center;padding:10px 0;}
/* Donut chart */
.qsi-donut-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 0;}
.qsi-donut-legend{width:100%;margin-top:12px;display:flex;flex-direction:column;gap:7px;}
.qsi-legend-row{display:flex;align-items:center;gap:8px;}
.qsi-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.qsi-legend-label{flex:1;font-size:var(--font-size-body-s);color:var(--muted);}
.qsi-legend-val{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);}
/* Avg performance bar chart */
.qsi-bar-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.qsi-bar-item{}
.qsi-bar-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;}
.qsi-bar-label{font-size:11px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.qsi-bar-score{font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;margin-left:6px;}
.qsi-bar-track{height:7px;background:#EFEFEF;border-radius:99px;overflow:hidden;position:relative;}
.qsi-bar-fill{height:100%;border-radius:99px;transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1);}
.qsi-bar-axis{display:flex;justify-content:space-between;margin-top:8px;padding:0 0;}
.qsi-bar-axis-label{font-size:9px;color:#BDBDBD;font-weight:500;}
/* Responsive: stack sidebar above quiz-wrap on narrow screens */
@media(max-width:1000px){.quiz-inner-row{flex-direction:column;gap:0;padding:0 16px;}.quiz-perf-sidebar{width:100%;min-width:0;padding:16px 0 0;}}
/* Quiz greeting */
.quiz-greeting{display:flex;align-items:center;gap:18px;margin-bottom:22px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:20px 24px;}
.qg-avatar{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-heading-m);font-weight:700;flex-shrink:0;font-family:var(--font-heading);}
.qg-name{font-size:var(--font-size-heading-l);font-weight:700;color:var(--navy);font-family:var(--font-heading);}
.qg-quote{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--font-size-body-m);color:var(--muted);}
.qg-quote::before{content:"💡";font-size:15px;flex-shrink:0;}
/* Selector panel */
.quiz-sel-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:28px;margin-bottom:22px;}
.quiz-sel-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--navy);margin-bottom:16px;}
.quiz-subject-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:20px;}
.quiz-subj-btn{padding:10px 14px;background:var(--sky);border:1.5px solid var(--border);border-radius:var(--radius-xl);font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);cursor:pointer;transition:all 0.2s;text-align:center;font-family:var(--font-body);}
.quiz-subj-btn:hover{border-color:var(--navy);background:#d4e8fa;}
.quiz-subj-btn.active{background:var(--navy);color:white;border-color:var(--navy);}
.quiz-chapter-input{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-family:var(--font-body);font-size:var(--font-size-body-m);outline:none;transition:border-color 0.2s;margin-bottom:16px;}
.quiz-chapter-input:focus{border-color:var(--navy);}
.quiz-count-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.quiz-count-lbl{font-size:var(--font-size-body-m);color:var(--muted);font-weight:500;}
.quiz-count-btn{padding:7px 18px;background:var(--sky);border:1.5px solid var(--border);border-radius:var(--radius-xl);font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);cursor:pointer;font-family:var(--font-body);transition:all 0.2s;}
.quiz-count-btn.active{background:var(--navy);color:white;border-color:var(--navy);}
.btn-start-quiz{padding:14px 36px;background:var(--gold);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-heading);font-size:var(--font-size-heading-m);font-weight:700;cursor:pointer;transition:all 0.22s;box-shadow:0 4px 16px rgba(17,30,56,0.15);}
.btn-start-quiz:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(17,30,56,0.22);}
.btn-start-quiz:disabled{opacity:0.5;cursor:not-allowed;}
/* Quiz taking */
#quizTaking{display:none;}
.quiz-taking-inner{max-width:780px;margin:0 auto;padding:36px 24px 48px;}
.quiz-taking-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.quiz-taking-progress-label{font-size:var(--font-size-body-m);color:var(--muted);font-weight:600;}
.quiz-taking-score{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);}
.quiz-progress-bar-wrap{background:#e8eef6;border-radius:var(--radius-lg);height:8px;margin-bottom:28px;overflow:hidden;}
.quiz-progress-bar{background:linear-gradient(90deg,var(--navy),var(--navy2));height:100%;border-radius:var(--radius-lg);transition:width 0.4s ease;}
.quiz-q-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:32px 36px;margin-bottom:24px;}
.quiz-q-num{font-size:var(--font-size-body-s);font-weight:700;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.quiz-q-text{font-size:var(--font-size-body-l);font-weight:600;color:var(--ink);line-height:1.6;margin-bottom:20px;}
.quiz-options{display:flex;flex-direction:column;gap:10px;}
.quiz-opt{padding:13px 18px;background:var(--sky);border:1.5px solid var(--border);border-radius:var(--radius-xl);font-size:var(--font-size-body-m);color:var(--ink);cursor:pointer;transition:all 0.18s;text-align:left;font-family:var(--font-body);display:flex;align-items:center;gap:12px;outline:none;}
.quiz-opt:hover:not(.selected):not(.correct):not(.wrong){border-color:var(--navy);background:#daeaf8;}
.quiz-opt.selected{border-color:var(--navy);background:var(--navy-pale);}
.quiz-opt.correct{border-color:#24a148;background:#a7f0ba;color:#0E6027;}
.quiz-opt.wrong{border-color:var(--red);background:#fff0f2;color:#A2191F;}
.quiz-opt-letter{width:28px;height:28px;border-radius:var(--radius-lg);background:var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-body-s);font-weight:700;flex-shrink:0;transition:all 0.18s;}
.quiz-opt.correct .quiz-opt-letter{background:#24a148;color:white;}
.quiz-opt.wrong .quiz-opt-letter{background:var(--red);color:white;}
.quiz-opt.selected .quiz-opt-letter{background:var(--navy);color:white;}
.quiz-explain{margin-top:16px;padding:14px 16px;background:#f4f4f4;border:1px solid #74E792;border-radius:var(--radius-xl);font-size:var(--font-size-body-m);color:#0E6027;line-height:1.6;display:none;}
.quiz-nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:12px;flex-wrap:wrap;}
.quiz-nav-arrows{display:flex;gap:10px;align-items:center;}
.btn-quiz-nav{padding:11px 26px;background:var(--navy);color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;transition:all 0.18s;white-space:nowrap;}
.btn-quiz-nav:hover{background:var(--navy2);}
.btn-quiz-nav:disabled{opacity:0.4;cursor:not-allowed;}
.quiz-nav-blocked{animation:quizNavShake 0.4s ease;}
@keyframes quizNavShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.btn-quiz-nav--secondary{background:var(--sky);color:var(--navy);border:1.5px solid var(--border);}.btn-quiz-nav--secondary:hover:not(:disabled){background:#d8e4f0;border-color:var(--navy);}
.btn-quiz-nav--ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border);}.btn-quiz-nav--ghost:hover{background:#f5f5f5;color:var(--navy);border-color:var(--navy);}
/* Results */
#quizResults{display:none;max-width:780px;margin:0 auto;padding:32px 24px 48px;}
.quiz-result-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-3xl);padding:44px 36px 36px;text-align:center;margin-bottom:20px;}
.quiz-score-ring{width:120px;height:120px;margin:0 auto 20px;position:relative;}
.quiz-score-ring svg{transform:rotate(-90deg);}
.quiz-score-ring-track{fill:none;stroke:#eef1f7;stroke-width:9;}
.quiz-score-ring-fill{fill:none;stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);}
.quiz-score-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:var(--font-size-heading-xl);font-weight:700;color:var(--navy);}
.quiz-result-grade{font-size:var(--font-size-heading-m);font-weight:700;font-family:var(--font-heading);margin-bottom:6px;}
.quiz-result-sub{font-size:var(--font-size-body-m);color:var(--muted);margin-bottom:18px;}
.quiz-result-stats{display:flex;align-items:stretch;justify-content:center;gap:0;margin:0 0 24px;background:#f4f6fb;border-radius:var(--radius-xl);border:1.5px solid var(--border);overflow:hidden;}
.qr-stat{flex:1;text-align:center;padding:14px 10px;}
.qr-stat-val{font-size:var(--font-size-heading-m);font-weight:800;color:var(--navy);font-family:var(--font-heading);line-height:1;}
.qr-stat-lbl{font-size:var(--font-size-body-s);color:var(--muted);font-weight:500;margin-top:4px;}
.qr-stat-div{width:1px;background:var(--border);align-self:stretch;}
.quiz-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.quiz-review-section{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:24px;}
.quiz-review-section-header{padding:16px 22px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:8px;}
.quiz-review-section-header h4{font-family:var(--font-heading);font-size:var(--font-size-heading-s);font-weight:700;color:var(--navy);margin:0;}
.quiz-review-list{padding:14px 16px;text-align:left;}
.quiz-review-item{border-radius:var(--radius-xl);padding:16px 18px;margin-bottom:8px;border-left:3px solid transparent;}
.quiz-review-item:last-child{margin-bottom:0;}
.quiz-review-item.r-correct{background:#f0fdf4;border-left-color:#22c55e;}
.quiz-review-item.r-wrong{background:#fff5f5;border-left-color:#ef4444;}
.quiz-review-q{font-size:var(--font-size-body-s);font-weight:700;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:0.4px;}
.quiz-review-q-text{font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);margin-bottom:12px;line-height:1.55;}
.quiz-review-ans{font-size:var(--font-size-body-s);padding:5px 13px;border-radius:var(--radius-lg);display:inline-flex;align-items:center;gap:5px;font-weight:500;margin-bottom:4px;}
.quiz-review-ans.correct{background:#dcfce7;color:#15803d;}
.quiz-review-ans.wrong{background:#fee2e2;color:#b91c1c;}
/* Subject cards grid */
.quiz-subj-cards-grid{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.quiz-subj-card{border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:18px 22px;cursor:pointer;transition:border-color 0.18s,box-shadow 0.18s;background:white;display:flex;align-items:center;gap:16px;}
.quiz-subj-card:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(17,30,56,0.08);}
.quiz-subj-card .qs-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(17,30,56,0.07),rgba(17,30,56,0.03));display:flex;align-items:center;justify-content:center;font-size:var(--font-size-heading-l);flex-shrink:0;}
.quiz-subj-card .qs-info{flex:1;min-width:0;}
.quiz-subj-card .qs-name{font-size:var(--font-size-body-l);font-weight:700;color:var(--navy);line-height:1.3;}
.quiz-subj-card .qs-meta{font-size:var(--font-size-body-s);color:var(--muted);font-weight:500;margin-top:2px;}
.quiz-subj-card .qs-progress-row{display:flex;align-items:center;gap:10px;margin-top:10px;}
.quiz-subj-card .qs-progress-bar{flex:1;height:5px;background:#E0E0E0;border-radius:99px;overflow:hidden;}
.quiz-subj-card .qs-progress-fill{height:100%;background:linear-gradient(90deg,var(--navy),#0f62fe);border-radius:99px;}
.quiz-subj-card .qs-progress-text{font-size:var(--font-size-body-s);color:var(--muted);white-space:nowrap;}
.quiz-subj-card .qs-action{flex-shrink:0;margin-left:8px;}
.qs-start-btn{background:var(--gold);color:#ffffff;border:none;padding:10px 22px;font-size:var(--font-size-body-m);font-weight:700;transition:background 0.18s,box-shadow 0.18s,transform 0.1s;white-space:nowrap;}
.qs-start-btn:hover{background:#0353E9;color:#ffffff;box-shadow:0 4px 12px rgba(15,98,254,0.35);}
.qs-start-btn:active{background:#002D9C;color:#ffffff;box-shadow:0 2px 6px rgba(15,98,254,0.3);transform:scale(0.97);}
/* ── Note List 2-panel layout ── */
.quiz-sel-card--split{padding:0;overflow:hidden;}
/* Full-bleed override when step 2 is active */
.dash-content.qnl-full-content{padding:0!important;overflow:hidden!important;align-items:stretch!important;height:100%;}
.dash-content.qnl-full-content #dashViewQuiz{padding:0!important;max-width:none!important;width:100%!important;flex:1;min-height:0;display:flex!important;flex-direction:column;overflow:hidden;}
#dashViewQuiz.qnl-full .quiz-hero{display:none!important;}
#dashViewQuiz.qnl-full .quiz-greeting{display:none!important;}
#dashViewQuiz.qnl-full #quizPaneTake{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#dashViewQuiz.qnl-full .quiz-inner-row{flex:1;min-height:0;width:100%;margin:0;display:flex;flex-direction:column;overflow:hidden;gap:0;padding:0;max-width:none;}
#dashViewQuiz.qnl-full .quiz-wrap{max-width:none;width:100%;padding:0;margin:0;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#dashViewQuiz.qnl-full #quizSelector{flex:1;min-height:0;display:flex!important;flex-direction:column;overflow:hidden;}
#dashViewQuiz.qnl-full #quizStep2Card{border-radius:0;border:none;margin:0;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.qnl-left{overflow-y:auto;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color 0.2s;}
.qnl-left:hover{scrollbar-color:rgba(0,0,0,0.2) transparent;}
.qnl-left::-webkit-scrollbar{width:5px;}
.qnl-left::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;transition:background 0.2s;}
.qnl-left:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);}
.qnl-header{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1.5px solid var(--border);background:white;flex-shrink:0;}
.qnl-header h3{margin:0;font-family:var(--font-heading);font-size:var(--font-size-body-l);color:var(--navy);font-weight:700;flex:1;}
.qnl-perf-btn{margin-left:auto;padding:7px 16px;background:var(--sky);border:1.5px solid var(--border);border-radius:var(--radius-xl);font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);cursor:pointer;font-family:var(--font-body);transition:all 0.18s;white-space:nowrap;flex-shrink:0;}.qnl-perf-btn:hover{background:#e0e8f5;border-color:var(--navy);}
.qnl-back-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:var(--font-size-body-m);display:flex;align-items:center;gap:4px;font-family:var(--font-body);padding:0;flex-shrink:0;transition:color 0.15s;}.qnl-back-btn:hover{color:var(--navy);}
.qnl-body{display:flex;flex:1;overflow:hidden;min-height:0;}
.qnl-left{width:300px;min-width:300px;border-right:1.5px solid var(--border);background:white;min-height:0;}
.qnl-right{flex:1;padding:36px 40px;overflow-y:auto;background:#f5f7fb;min-height:0;}
.qnl-note-item{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.14s;position:relative;}
.qnl-note-item:hover{background:#f0f4fb;}
.qnl-note-item.active{background:#eef3ff;border-right:3px solid var(--navy);}
.qnl-note-item.active .qni-num{background:var(--navy);color:white;}
.qni-num{width:30px;height:30px;border-radius:50%;background:#e8eef6;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);flex-shrink:0;transition:all 0.15s;}
.qni-body{flex:1;min-width:0;}
.qni-title{font-size:var(--font-size-body-m);font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.qni-meta{font-size:var(--font-size-body-s);color:var(--muted);margin-top:3px;}
.qnl-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:14px;color:var(--muted);text-align:center;padding:20px;}
.qnl-placeholder svg{opacity:0.22;}
.qnl-placeholder p{font-size:var(--font-size-body-m);margin:0;line-height:1.6;}
/* Note detail view */
.qnl-detail-title{font-family:var(--font-heading);font-size:clamp(20px,2.8vw,32px);font-weight:800;color:var(--navy);margin-bottom:6px;line-height:1.3;}
.qnl-detail-subj{font-size:var(--font-size-body-s);color:var(--muted);margin-bottom:18px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;}
.qnl-brief{font-size:var(--font-size-body-m);color:#525252;line-height:1.75;margin-bottom:22px;padding:16px 18px;background:white;border-radius:var(--radius-xl);border:1px solid var(--border);}
.qnl-assign-card{background:#eef3ff;border-radius:var(--radius-xl);padding:18px 22px;margin-bottom:22px;}
.qnl-assign-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;}
.qnl-assign-label{font-size:var(--font-size-body-s);font-weight:700;color:#374151;margin-bottom:3px;text-transform:uppercase;letter-spacing:0.5px;}
.qnl-assign-value{font-size:var(--font-size-body-m);color:var(--ink);font-weight:500;}
.qnl-qcount-row{margin-bottom:22px;}
.qnl-qcount-label{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);margin-bottom:12px;}
.qnl-qcount-btns{display:flex;gap:10px;flex-wrap:wrap;}
.qnl-qcount-btns .quiz-count-btn{width:52px;height:52px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-body-m);}
.qnl-start-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:white;border:none;border-radius:var(--radius-full);font-family:var(--font-heading);font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;transition:all 0.22s;box-shadow:0 4px 16px rgba(15,98,254,0.32);}
.qnl-start-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,98,254,0.44);}
@media(max-width:768px){
  .qnl-left{width:100%;min-width:0;border-right:none;border-bottom:1.5px solid var(--border);max-height:220px;}
  .qnl-right{padding:20px;}
  .qnl-body{flex-direction:column;}
}
/* Question type badges */
.quiz-type-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--font-size-body-s);font-weight:700;letter-spacing:0.6px;padding:3px 9px;border-radius:20px;text-transform:uppercase;margin-bottom:10px;}
.qtb-mcq{background:#E8DAFF;color:#6929C4;}
.qtb-fitb{background:#A7F0BA;color:#0A4D1E;}
.qtb-short{background:#fff8ec;color:#FF832B;}
.qtb-rtc{background:#fce7f3;color:#9F1853;}
.qtb-truefalse{background:#D0E2FF;color:#0043CE;}
.qtb-fillblank{background:#defbe6;color:#044317;}
.qtb-matching{background:#fff8ec;color:#B45309;}
.qtb-correctsentence{background:#fce7f3;color:#740937;}
.qtb-transform{background:#e0f2fe;color:#0369a1;}
/* True/False */
.quiz-tf-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px;}
.quiz-tf-btn{padding:18px;border:1.5px solid var(--border);border-radius:var(--radius-xl);font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;background:var(--sky);color:var(--navy);transition:all 0.18s;font-family:var(--font-body);}
.quiz-tf-btn:hover:not([disabled]){border-color:var(--navy);background:#daeaf8;}
.quiz-tf-btn.correct{border-color:#24a148;background:#a7f0ba;color:#0E6027;}
.quiz-tf-btn.wrong{border-color:var(--red);background:#fff0f2;color:#A2191F;}
/* Fill in the Blank */
.quiz-fillblank-wrap{font-size:var(--font-size-body-l);line-height:2.4;color:var(--navy);margin-bottom:16px;padding:16px;background:var(--sky);border-radius:var(--radius-xl);}
.quiz-blank-input{border:none;border-bottom:2.5px solid var(--gold);padding:4px 10px;font-size:var(--font-size-body-l);font-family:var(--font-body);color:var(--navy);background:transparent;outline:none;min-width:130px;text-align:center;transition:border-color 0.18s;}
.quiz-blank-input.correct{border-bottom-color:#24a148;color:#0E6027;}
.quiz-blank-input.wrong{border-bottom-color:var(--red);color:#A2191F;}
.quiz-submit-btn{margin-top:4px;padding:11px 28px;background:var(--gold);color:white;border:none;border-radius:var(--radius-full);font-size:var(--font-size-body-m);font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background 0.18s;}
.quiz-submit-btn:hover{background:#0353E9;}
/* Matching */
.quiz-match-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--sky);border:1.5px solid var(--border);border-radius:var(--radius-xl);margin-bottom:8px;}
.quiz-match-left{font-weight:700;color:var(--gold);font-size:var(--font-size-body-m);flex:0 0 auto;min-width:90px;}
.quiz-match-select{flex:1;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:8px 10px;font-size:var(--font-size-body-m);font-family:var(--font-body);color:var(--navy);background:white;outline:none;cursor:pointer;}
.quiz-match-select.correct{border-color:#24a148;background:#a7f0ba;color:#0E6027;}
.quiz-match-select.wrong{border-color:var(--red);background:#fff0f2;color:#A2191F;}
/* Correct Sentence */
.quiz-cs-opt{display:block;width:100%;padding:13px 20px;background:var(--sky);border:1.5px solid var(--border);border-radius:var(--radius-xl);font-size:var(--font-size-body-m);color:var(--gold);cursor:pointer;transition:all 0.18s;text-align:center;font-family:var(--font-body);margin-bottom:10px;}
.quiz-cs-opt:hover:not([disabled]):not(.correct):not(.wrong){border-color:var(--navy);background:#daeaf8;color:var(--navy);}
.quiz-cs-opt.correct{border-color:#24a148;background:#a7f0ba;color:#0E6027;}
.quiz-cs-opt.wrong{border-color:var(--red);background:#fff0f2;color:#A2191F;}
/* Per-option explanations */
.quiz-opt-exp{display:block;font-size:12px;color:#6f6f6f;margin-top:5px;font-weight:400;line-height:1.4;text-align:left;}
.quiz-opt.correct .quiz-opt-exp{color:#0E6027;}
.quiz-opt.wrong .quiz-opt-exp{color:#A2191F;}
.quiz-cs-opt.correct .quiz-opt-exp{color:#0E6027;}
.quiz-cs-opt.wrong .quiz-opt-exp{color:#A2191F;}
/* Spelling note (fuzzy-matched fillblank) */
.quiz-spelling-note{font-size:var(--font-size-body-s);color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:var(--radius-lg);padding:7px 12px;margin-bottom:8px;line-height:1.5;}
/* RTC passage block */
.quiz-rtc-passage{background:#f4f4f4;border-left:3px solid var(--gold);padding:13px 15px;border-radius:0 var(--radius-xl) var(--radius-xl) 0;font-size:var(--font-size-body-m);line-height:1.75;color:var(--navy);margin-bottom:16px;font-style:italic;white-space:pre-wrap;}
.quiz-review-correct{font-size:var(--font-size-body-s);color:#15803d;font-weight:500;padding:5px 13px;background:#dcfce7;border-radius:var(--radius-lg);display:inline-flex;align-items:center;gap:5px;margin-top:4px;}
.quiz-review-explain{font-size:var(--font-size-body-s);color:var(--muted);margin-top:10px;line-height:1.6;padding-top:10px;border-top:1px solid rgba(0,0,0,0.07);}
/* Performance Dashboard */
#perfDash{display:none;}
.perf-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:24px;margin-bottom:18px;}
.perf-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--navy);margin-bottom:16px;}
.perf-subj-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.perf-subj-name{font-size:var(--font-size-body-m);font-weight:600;color:var(--ink);min-width:90px;}
.perf-bar-wrap{flex:1;background:#e8eef6;border-radius:var(--radius-lg);height:10px;overflow:hidden;}
.perf-bar{height:100%;border-radius:var(--radius-lg);transition:width 1s ease;}
.perf-bar-pct{font-size:var(--font-size-body-s);font-weight:700;color:var(--muted);min-width:38px;text-align:right;}
.perf-quiz-item{background:var(--sky);border:1px solid var(--border);border-radius:var(--radius-xl);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;}
.perf-quiz-meta{font-size:var(--font-size-body-s);color:var(--muted);}
.perf-quiz-score{font-size:var(--font-size-body-l);font-weight:700;font-family:var(--font-heading);}
.perf-empty{text-align:center;padding:32px;color:var(--muted);font-size:var(--font-size-body-m);}
.quiz-gen-loading{text-align:center;padding:48px 24px;}
.quiz-gen-spinner{width:44px;height:44px;border:4px solid var(--border);border-top-color:var(--navy);border-radius:var(--radius-full);animation:spin 0.8s linear infinite;margin:0 auto 16px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Teacher sidebar user menu ── */
.t-sb-user-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:white;border-radius:var(--radius-xl);box-shadow:0 8px 28px rgba(0,0,0,0.25);overflow:hidden;display:none;z-index:400;}
.t-sb-user-menu.open{display:block;}
.t-sb-user-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:11px 15px;border:none;background:none;cursor:pointer;font-size:var(--font-size-body-m);color:#161616;font-family:var(--font-body);transition:background 0.15s;text-align:left;font-weight:500;}
.t-sb-user-menu button:hover{background:#f4f4f4;}
.t-sb-user-menu .t-sb-menu-logout{color:#da1e28;border-top:1px solid #f0f0f0;}
/* ── Teacher view sections ── */
.teacher-view{display:none;}
.teacher-view.active{display:block;}
/* ── Grammar Lab Editor ── */
.tgl-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:8px;}
.tgl-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:18px;display:flex;gap:14px;align-items:flex-start;transition:box-shadow 0.15s;}
.tgl-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.09);}
.tgl-card-icon{width:48px;height:48px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tgl-card-body{flex:1;min-width:0;}
.tgl-card-title{font-weight:700;font-size:15px;color:var(--navy);margin-bottom:4px;}
.tgl-card-desc{font-size:12px;color:var(--muted);margin-bottom:6px;line-height:1.5;}
.tgl-card-meta{font-size:11px;color:#aaa;font-weight:600;}
.tgl-card-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.tgl-tabs{display:flex;gap:4px;background:#f0f0f0;border-radius:var(--radius-xl);padding:4px;}
.tgl-tab{flex:1;padding:8px 12px;border:none;border-radius:var(--radius-lg);background:transparent;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.15s;font-family:var(--font-body);}
.tgl-tab.active{background:white;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,0.1);}
.tgl-form-panel{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:20px;}
.tgl-form-row{display:flex;gap:12px;}
.tgl-form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.tgl-label{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:0.2px;}
.tgl-input{border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:8px 12px;font-size:13px;font-family:var(--font-body);color:var(--navy);background:white;outline:none;width:100%;box-sizing:border-box;transition:border-color 0.15s;}
.tgl-input:focus{border-color:var(--gold);}
textarea.tgl-input{resize:vertical;line-height:1.5;}
.tgl-btn-primary{padding:9px 18px;background:var(--gold);color:white;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background 0.15s;white-space:nowrap;}
.tgl-btn-primary:hover{background:#0353E9;}
.tgl-btn-ghost{padding:9px 18px;background:transparent;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.tgl-btn-ghost:hover{border-color:var(--navy);}
.tgl-btn-danger{padding:9px 18px;background:#fff0f2;color:#da1e28;border:1.5px solid #ffb3b8;border-radius:var(--radius-full);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.tgl-btn-danger:hover{background:#da1e28;color:white;}
.tgl-btn-sm{padding:5px 12px;background:#f4f4f4;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.tgl-btn-sm:hover{background:var(--gold);color:white;border-color:var(--gold);}
.tgl-btn-sm-danger{padding:5px 12px;background:#fff0f2;color:#da1e28;border:1.5px solid #ffb3b8;border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.tgl-btn-sm-danger:hover{background:#da1e28;color:white;}
.tgl-item-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);margin-bottom:8px;}
.tgl-type-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;}
.tgl-exset-card{border:1.5px solid var(--border);border-radius:var(--radius-2xl);margin-bottom:10px;overflow:hidden;background:white;}
.tgl-exset-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fafafa;border-bottom:1px solid transparent;}
.tgl-exset-card.open .tgl-exset-hd{border-bottom-color:var(--border);}
.tgl-q-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);}
.tgl-q-row:last-child{border-bottom:none;}
.tgl-topic-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);margin-bottom:8px;}
/* ── AI Prompt Editor ── */
.tap-subj-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.tap-subj-pill{padding:7px 16px;border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:13px;font-weight:600;color:var(--muted);background:white;cursor:pointer;transition:all 0.15s;font-family:var(--font-body);}
.tap-subj-pill:hover{border-color:var(--gold);color:var(--navy);}
.tap-subj-pill.active{background:var(--gold);color:white;border-color:var(--gold);}
.tap-option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.tap-option-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;}
.tap-option-card.has-custom{border-color:var(--gold);}
.tap-card-hd{display:flex;align-items:center;gap:6px;}
.tap-option-name{font-weight:700;font-size:14px;color:var(--navy);flex:1;min-width:0;}
.tap-custom-badge{font-size:10px;font-weight:700;background:rgba(15,98,254,0.12);color:var(--gold);padding:2px 7px;border-radius:var(--radius-full);letter-spacing:0.3px;white-space:nowrap;}
.tap-icon-btn{background:none;border:none;padding:4px;cursor:pointer;color:var(--muted);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;transition:color 0.15s,background 0.15s;flex-shrink:0;}
.tap-icon-btn:hover{color:var(--navy);background:#f0f0f0;}
.tap-icon-btn.danger:hover{color:#da1e28;background:#fff0f2;}
.tap-rename-row{display:flex;gap:6px;align-items:center;}
.tap-rename-input{flex:1;border:1.5px solid var(--gold);border-radius:var(--radius-lg);padding:6px 10px;font-size:13px;font-weight:700;font-family:var(--font-body);color:var(--navy);outline:none;background:white;}
.tap-option-hint{font-size:11px;color:var(--muted);line-height:1.5;}
.tap-textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;font-size:12.5px;font-family:var(--font-body);color:var(--navy);background:#fafafa;outline:none;resize:vertical;min-height:120px;line-height:1.6;transition:border-color 0.15s;}
.tap-textarea:focus{border-color:var(--gold);background:white;}
.tap-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tap-save-btn{padding:7px 16px;background:var(--gold);color:white;border:none;border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background 0.15s;}
.tap-save-btn:hover{background:#0353E9;}
.tap-reset-btn{padding:7px 14px;background:transparent;color:var(--muted);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;}
.tap-reset-btn:hover{border-color:#da1e28;color:#da1e28;}
.tap-save-status{font-size:12px;color:#10B981;font-weight:600;opacity:0;transition:opacity 0.3s;}
.tap-add-row{margin-top:16px;padding-top:14px;border-top:1.5px dashed var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.tap-add-input{border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:8px 12px;font-size:13px;font-family:var(--font-body);color:var(--navy);background:white;outline:none;min-width:200px;transition:border-color 0.15s;}
.tap-add-input:focus{border-color:var(--gold);}
.tap-add-btn{padding:8px 18px;background:var(--gold);color:white;border:none;border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background 0.15s;}
.tap-add-btn:hover{background:#0353E9;}
.tap-new-opt-btn{padding:8px 18px;background:white;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;}
.tap-new-opt-btn:hover{border-color:var(--gold);color:var(--gold);}
/* AI Prompts — built-in preview panel */
.tap-status-line{font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px;color:var(--muted);margin-top:-2px;}
.tap-status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;}
.tap-status-dot.default{background:#9ca3af;}
.tap-status-dot.custom{background:#10B981;}
.tap-builtin-section{border-top:1px solid #f0f1f3;padding-top:8px;}
.tap-builtin-toggle{background:none;border:none;padding:0;font-size:11.5px;font-weight:600;color:#6b7280;cursor:pointer;font-family:var(--font-body);display:inline-flex;align-items:center;gap:4px;transition:color 0.15s;line-height:1;}
.tap-builtin-toggle:hover{color:var(--navy);}
.tap-builtin-ta{background:#f5f6fa !important;color:#52555a !important;border-color:#e9eaec !important;cursor:default !important;min-height:80px;max-height:180px;overflow-y:auto;margin-top:8px;}
.tap-builtin-ta:focus{border-color:#e9eaec !important;background:#f5f6fa !important;}
.tap-section-lbl{font-size:10px;font-weight:700;color:#a0a5af;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:5px;}
/* ── Teacher Dashboard Refactor ── */
/* Page header */
.tdash-page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:14px;}
.tdash-page-hd-title{font-family:var(--font-heading);font-size:28px;font-weight:900;color:var(--navy);line-height:1.1;}
.tdash-page-hd-date{font-size:13px;color:var(--muted);margin-top:4px;font-weight:500;}
.tdash-page-hd-actions{display:flex;gap:10px;align-items:center;}
.tdash-upload-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;background:white;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;}
.tdash-upload-btn:hover{border-color:var(--navy);}
/* Body 2-column grid */
.tdash-body-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;margin-bottom:20px;align-items:stretch;}
.tdash-left-col{display:flex;flex-direction:column;gap:16px;}
/* Stat cards */
.tdash-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.tdash-stat-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;transition:box-shadow 0.18s;}
.tdash-stat-card:hover{box-shadow:0 4px 18px rgba(0,0,0,0.07);}
.tdash-stat-num{font-family:var(--font-heading);font-size:28px;font-weight:700;color:#2563eb;line-height:1.1;}
.tdash-stat-lbl{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0.2px;}
/* Chart card */
/* ── Exam Calendar ────────────────────────────────────────────────────────────── */
.tdash-cal-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:18px 20px;display:flex;flex-direction:column;gap:10px;}
.tdash-cal-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.tdash-cal-title{font-size:14px;font-weight:800;color:var(--navy);}
.tdash-cal-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.cal-nav-wrap{display:flex;align-items:center;gap:4px;}
.cal-nav-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);background:#fff;cursor:pointer;font-size:16px;color:var(--navy);line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;}
.cal-nav-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.cal-month-lbl{font-size:13px;font-weight:700;color:var(--navy);min-width:110px;text-align:center;}
.cal-today-btn{padding:5px 11px;border:1.5px solid var(--border);border-radius:20px;background:#fff;font-size:11px;font-weight:700;color:var(--navy);cursor:pointer;transition:all .15s;}
.cal-today-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.cal-ai-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;background:var(--navy);color:#fff;border:none;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s;font-family:var(--font-body);}
.cal-ai-btn:hover{background:var(--gold);}
.cal-week-hd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-week-hd div{text-align:center;font-size:10px;font-weight:700;color:var(--muted);padding:3px 0;text-transform:uppercase;letter-spacing:.04em;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day{min-height:68px;border-radius:9px;padding:5px 4px 4px;cursor:pointer;border:1.5px solid transparent;transition:background .12s,border-color .12s;background:#fafbfd;overflow:hidden;}
.cal-day:hover{background:#f0f4ff;border-color:#c7d4f5;}
.cal-day-other{opacity:.3;pointer-events:none;}
.cal-day-today{border-color:var(--gold)!important;}
.cal-day-has-evs{background:#f5f8ff;}
.cal-dn{font-size:11.5px;font-weight:700;color:var(--navy);width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
.cal-dn-today{background:var(--gold);color:#fff;border-radius:50%;}
.cal-chips{display:flex;flex-direction:column;gap:2px;}
.cal-chip{font-size:9.5px;font-weight:600;padding:1.5px 4px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;}
.cal-chip-more{font-size:9px;color:var(--muted);font-weight:500;padding:1px 3px;}
/* Calendar modals */
.cal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9998;display:none;backdrop-filter:blur(2px);}
.cal-overlay.open{display:block;}
.cal-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:20px;padding:24px;width:min(500px,94vw);z-index:9999;display:none;box-shadow:0 24px 64px rgba(0,0,0,.2);max-height:88vh;overflow-y:auto;}
.cal-modal.open{display:block;}
.cal-ai-modal{width:min(560px,94vw);}
.cal-modal-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.cal-modal-date{font-size:15px;font-weight:800;color:var(--navy);}
.cal-modal-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.cal-modal-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;padding:0;line-height:1;margin-top:-4px;}
.cal-modal-close:hover{color:var(--navy);}
.cal-day-events-list{margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.cal-del-hd{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.cal-mei{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;transition:border-color .15s;}
.cal-mei:hover{border-color:#c7d4f5;background:#f8faff;}
.cal-mei-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cal-mei-body{flex:1;min-width:0;}
.cal-mei-title{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-mei-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-mei-del{background:none;border:none;font-size:18px;color:#ccc;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;}
.cal-mei-del:hover{color:#da1e28;}
.cal-form{border-top:1.5px solid var(--border);padding-top:14px;}
.cal-form-title{font-size:12px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;}
.cal-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cal-form-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
.cal-form-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.cal-form-input{padding:8px 11px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-family:var(--font-body);color:var(--navy);outline:none;width:100%;box-sizing:border-box;transition:border-color .15s;}
.cal-form-input:focus{border-color:var(--gold);}
.cal-form-ta{resize:vertical;min-height:56px;}
.cal-color-row{display:flex;gap:7px;flex-wrap:wrap;}
.cal-color-swatch{width:24px;height:24px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s;}
.cal-color-swatch:hover{transform:scale(1.15);}
.cal-color-swatch.active{border-color:#fff;outline:2.5px solid var(--navy);outline-offset:1px;}
.cal-form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.cal-form-cancel{padding:8px 18px;border:1.5px solid var(--border);border-radius:20px;background:#fff;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;}
.cal-form-cancel:hover{border-color:var(--navy);color:var(--navy);}
.cal-form-save{display:flex;align-items:center;gap:6px;padding:8px 20px;background:var(--navy);color:#fff;border:none;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background .15s;}
.cal-form-save:hover{background:var(--gold);}
/* AI Import Modal */
.cal-ai-upload-zone{border:2px dashed var(--border);border-radius:14px;padding:28px 20px;text-align:center;cursor:pointer;transition:all .15s;margin-bottom:2px;}
.cal-ai-upload-zone:hover{border-color:var(--gold);background:#fffbf0;}
.cal-ai-upload-text{font-size:13px;font-weight:700;color:var(--navy);margin-top:8px;}
.cal-ai-upload-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.cal-ai-process-btn{width:100%;margin-top:10px;padding:10px;background:var(--gold);color:#fff;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background .15s;}
.cal-ai-process-btn:hover{background:#0353E9;}
.cal-ai-process-btn:disabled{opacity:.6;cursor:not-allowed;}
.cal-ai-preview{display:flex;flex-direction:column;gap:8px;margin-top:4px;max-height:300px;overflow-y:auto;}
.cal-ai-item{background:#f8faff;border:1.5px solid var(--border);border-radius:12px;padding:12px;}
.cal-ai-item-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-ai-item-date{font-size:12px;font-weight:800;color:var(--navy);background:#e8eeff;padding:2px 8px;border-radius:20px;}
.cal-ai-del-btn{background:none;border:none;font-size:18px;color:#ccc;cursor:pointer;line-height:1;}
.cal-ai-del-btn:hover{color:#da1e28;}
.cal-ai-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.cal-ai-field{padding:6px 9px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-family:var(--font-body);color:var(--navy);outline:none;width:100%;box-sizing:border-box;}
.cal-ai-field:focus{border-color:var(--gold);}
@media(max-width:600px){
  .cal-form-row,.cal-ai-fields{grid-template-columns:1fr;}
  .cal-day{min-height:52px;padding:4px 2px 2px;}
  .cal-dn{font-size:10px;width:18px;height:18px;}
  .cal-chip{font-size:8.5px;}
  .tdash-cal-hd{flex-direction:column;align-items:flex-start;}
  .tdash-cal-actions{width:100%;justify-content:space-between;}
}
/* Right panel (pill-tabbed card) */
.tdash-panel-card{background:white;border:1px solid #e0e0e0;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-self:start;max-height:340px;}
.tdash-pill-wrap{display:flex;justify-content:center;padding:16px 16px 0;flex-shrink:0;}
.tdash-pill-track{display:flex;background:rgba(0,0,0,0.10);border-radius:12px;padding:3px;width:100%;}
.tdash-pill-tab{flex:1;padding:6px 8px;border:none;background:transparent;font-size:12px;font-weight:600;color:rgba(0,0,0,0.55);cursor:pointer;font-family:var(--font-body);border-radius:8px;transition:all 0.18s;white-space:nowrap;}
.tdash-pill-tab.active{background:white;color:#161616;box-shadow:0 1px 4px rgba(0,0,0,0.12);}
.tdash-panel-body{flex:1;overflow-y:auto;min-height:0;}
.tdash-panel-body::-webkit-scrollbar{width:3px;}
.tdash-panel-body::-webkit-scrollbar-thumb{background:#d0d5de;border-radius:2px;}
.tdash-panel-body .s-row{padding:14px 18px;border-bottom:1px solid var(--border);}
.tdash-panel-body .s-row:last-child{border-bottom:none;}
/* Action bar (Add Student standalone) */
.tdash-action-bar{display:none;}
.tdash-add-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;background:var(--navy);color:white;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:opacity 0.15s;}
.tdash-add-btn:hover{opacity:0.88;}
/* Students table */
.tdash-table-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:18px;}
.tdash-table-hd{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--navy);}
.tdash-table-title{font-size:15px;font-weight:800;color:white;flex:1;letter-spacing:0.1px;}
.tdash-tabs{display:flex;gap:3px;background:rgba(255,255,255,0.12);border-radius:var(--radius-xl);padding:3px;}
.tdash-tab{padding:5px 16px;border:none;border-radius:var(--radius-lg);background:transparent;font-size:12px;font-weight:600;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.15s;font-family:var(--font-body);white-space:nowrap;}
.tdash-tab.active{background:white;color:var(--navy);}
.stud-search-wrap{position:relative;flex:1;max-width:360px;}
.stud-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#a0aab4;}
#studentsSearchInput{width:100%;padding:8px 12px 8px 33px;border:1.5px solid #e4e8ef;border-radius:20px;font-size:13px;outline:none;color:var(--navy);background:#f6f8fb;transition:border-color .2s,background .2s,box-shadow .2s;box-sizing:border-box;font-family:var(--font-body);}
#studentsSearchInput:focus{border-color:#0f62fe;background:white;box-shadow:0 0 0 3px rgba(15,98,254,.07);}
.stud-pw-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid #e4e8ef;border-radius:8px;background:white;font-size:12px;font-weight:600;color:#6f6f6f;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:var(--font-body);}
.stud-pw-btn:hover{border-color:#0f62fe;color:#0f62fe;}
.stud-pw-btn.pw-active{border-color:#0f62fe;color:#0f62fe;background:#eff5ff;}
.stud-tbl-wrap{overflow-x:hidden;}
.stud-tbl{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;}
/* Compat stubs kept for old code refs */
.tdash-two-cards{display:none;}
.tdash-compact-card{display:none;}
.tdash-compact-hd{display:none;}
.tdash-compact-body{flex:1;overflow-y:auto;min-height:0;}
.tdash-compact-body::-webkit-scrollbar{width:3px;}
.tdash-compact-body::-webkit-scrollbar-thumb{background:#d0d5de;border-radius:2px;}
.tdash-compact-body .s-row{padding:10px 14px;}
.tdash-compact-btn{display:none;}
/* Responsive */
@media(max-width:1000px){.tdash-body-grid{grid-template-columns:1fr;align-items:start;}.tdash-panel-card{height:auto;min-height:320px;}}
@media(max-width:540px){.tdash-stats-grid{grid-template-columns:repeat(2,1fr);}.tdash-table-hd{flex-wrap:wrap;gap:8px;}.tdash-modal-actions{flex-direction:column;}.tdash-modal-submit,.tdash-modal-cancel{width:100%;text-align:center;}}
.tdash-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);z-index:9100;display:flex;align-items:center;justify-content:center;padding:20px;animation:fdIn 0.15s ease;}
.tdash-modal-inner{background:white;border-radius:var(--radius-2xl);padding:28px;width:100%;max-width:460px;box-shadow:0 24px 64px rgba(0,0,0,0.28);position:relative;animation:slideUpIn 0.18s ease;}
@keyframes slideUpIn{from{transform:translateY(12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.tdash-modal-hd{display:flex;align-items:center;margin-bottom:6px;}
.tdash-modal-title{font-family:var(--font-heading);font-size:18px;font-weight:900;color:var(--navy);flex:1;}
.tdash-modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);padding:0 2px;line-height:1;transition:color 0.15s;}
.tdash-modal-close:hover{color:var(--navy);}
.tdash-modal-desc{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5;}
.tdash-modal-field{margin-bottom:14px;}
.tdash-modal-label{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:5px;display:block;letter-spacing:0.2px;}
.tdash-modal-input{width:100%;box-sizing:border-box;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px;font-size:14px;font-family:var(--font-body);color:var(--navy);outline:none;transition:border-color 0.15s;background:white;}
.tdash-modal-input:focus{border-color:var(--navy);}
.tdash-modal-actions{display:flex;gap:10px;margin-top:22px;}
.tdash-modal-submit{flex:1;padding:12px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;border:none;border-radius:var(--radius-full);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:opacity 0.15s;}
.tdash-modal-submit:hover{opacity:0.88;}
.tdash-modal-cancel{padding:12px 22px;background:transparent;color:var(--muted);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:border-color 0.15s;}
.tdash-modal-cancel:hover{border-color:var(--navy);color:var(--navy);}
/* Students table — matches db-sess-tbl quiz review style */
.stud-tbl-wrap{overflow-x:auto;border-radius:var(--radius-lg);}
.stud-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.stud-tbl thead tr{background:#F8F9FB;}
.stud-tbl th{padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;border-bottom:1.5px solid var(--border);white-space:nowrap;}
.stud-tbl td{padding:13px 16px;border-bottom:1px solid #F4F4F4;color:var(--navy);vertical-align:middle;}
.stud-tbl tr:last-child td{border-bottom:none;}
.stud-tbl tbody tr{transition:background 0.12s;}
.stud-tbl tbody tr:hover td{background:#F8FAFF;}
.stud-cell-main{display:flex;align-items:center;gap:10px;}
.stud-av{width:34px;height:34px;min-width:34px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy2));color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.stud-av.disabled{background:linear-gradient(135deg,#8D8D8D,#6f6f6f);}
.stud-nm{font-weight:600;color:#161616;line-height:1.3;font-size:13px;}
.stud-sid{font-size:11px;color:var(--muted);margin-top:2px;}
.stud-phone{font-size:11px;color:var(--muted);margin-top:1px;}
.stud-badge-wrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.stud-3dot{background:none;border:none;cursor:pointer;padding:5px 9px;font-size:20px;line-height:1;color:var(--muted);border-radius:6px;transition:background 0.12s;}
.stud-3dot:hover{background:#f0f0f0;color:var(--navy);}
.stud-menu{position:fixed;background:white;border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.13);padding:5px 0;min-width:165px;z-index:9999;display:none;}
.stud-menu.open{display:block;}
.stud-menu-item{display:block;width:100%;background:none;border:none;padding:9px 16px;font-size:13px;font-weight:500;text-align:left;cursor:pointer;font-family:var(--font-body);color:#161616;white-space:nowrap;transition:background 0.1s;}
.stud-menu-item:hover{background:#f4f4f4;}
.stud-menu-item.danger{color:#da1e28;}
.stud-menu-item.danger:hover{background:#fff0f2;}
.stud-menu-sep{height:1px;background:var(--border);margin:4px 0;}
.stud-pag-row{display:flex;align-items:center;gap:5px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap;background:#FAFAFA;}
.stud-pag-info{font-size:12px;color:var(--muted);margin-right:auto;}
.stud-pag-btn{padding:5px 11px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);color:var(--navy);transition:all 0.12s;}
.stud-pag-btn:hover:not([disabled]){background:#EEF3FF;border-color:#0f62fe;color:#0f62fe;}
.stud-pag-btn[disabled]{opacity:.4;cursor:default;}
.stud-pag-btn.cur{background:var(--navy);color:white;border-color:var(--navy);}
@media(max-width:1000px){.tdash-overview-row{grid-template-columns:1fr;}}
@media(max-width:540px){.tdash-stats-grid{grid-template-columns:repeat(2,1fr);}.tdash-table-hd{flex-wrap:wrap;gap:8px;}.tdash-modal-actions{flex-direction:column;}.tdash-modal-submit,.tdash-modal-cancel{width:100%;text-align:center;}}
.tgl-btn{padding:5px 12px;background:#f4f4f4;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all 0.15s;white-space:nowrap;}
.tgl-btn:hover{background:#e0e0e0;}
.tgl-btn-save{background:var(--gold);color:white;border-color:var(--gold);}
.tgl-btn-save:hover{background:#0353E9;}
.tgl-btn-edit{background:#e8f0fe;color:#0353E9;border-color:#c2d7ff;}
.tgl-btn-edit:hover{background:#0353E9;color:white;}
.tgl-btn-del{background:#fff0f2;color:#da1e28;border-color:#ffb3b8;}
.tgl-btn-del:hover{background:#da1e28;color:white;}
.tgl-type-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-md);background:#f0f0f0;color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;}
.tgl-textarea{min-height:72px;}
.tgl-ex-set{border:1.5px solid var(--border);border-radius:var(--radius-xl);margin-bottom:10px;overflow:hidden;background:white;}
.tgl-ex-set-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fafafa;cursor:pointer;}
.tgl-ex-set-body{padding:12px 16px;border-top:1px solid var(--border);}
/* ── Cleaner student row card ── */
.s-row-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:14px 16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:14px;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:box-shadow 0.15s,border-color 0.15s;}
.s-row-card:hover{border-color:#b8c8e8;box-shadow:0 4px 16px rgba(0,0,0,0.09);}
.s-row-card-av{width:42px;height:42px;border-radius:var(--radius-full);color:white;font-size:var(--font-size-body-l);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-heading);}
.s-row-card-info{flex:1;min-width:0;}
.s-row-card-name{font-weight:700;font-size:var(--font-size-body-m);color:#262626;margin-bottom:3px;}
.s-row-card-sub{font-size:var(--font-size-body-s);color:var(--muted);margin-bottom:4px;}
.s-row-card-meta{font-size:var(--font-size-body-s);color:#6f6f6f;display:flex;align-items:center;gap:4px;flex-wrap:wrap;row-gap:2px;}
.s-row-card-actions{display:flex;gap:5px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
/* ── Upgrade modal ── */
.upgrade-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9500;display:none;align-items:center;justify-content:center;padding:16px;}
.upgrade-modal.open{display:flex;}
.upgrade-box{background:white;border-radius:var(--radius-3xl);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.upgrade-hd{background:linear-gradient(135deg,#161616,#262626);padding:22px 24px;border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;}
.upgrade-hd h2{font-family:var(--font-heading);color:white;font-size:var(--font-size-heading-m);margin-bottom:4px;}
.upgrade-hd p{font-size:var(--font-size-body-m);color:rgba(255,255,255,0.7);}
.upgrade-body{padding:22px 24px;}
.plan-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:520px){.plan-cards{grid-template-columns:1fr;}}
.plan-card{border:2px solid var(--border);border-radius:var(--radius-2xl);padding:18px 14px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;}
.plan-card:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.1);}
.plan-card.recommended{border-color:var(--gold);background:linear-gradient(135deg,#fffbf0,#fff8e8);}
.plan-card-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--navy);font-size:var(--font-size-body-s);font-weight:800;padding:2px 10px;border-radius:var(--radius-3xl);white-space:nowrap;}
.plan-card-name{font-family:var(--font-heading);font-size:var(--font-size-body-l);color:var(--navy);font-weight:700;margin-bottom:4px;}
.plan-card-gens{font-size:var(--font-size-body-s);color:var(--muted);margin-bottom:10px;}
.plan-card-price{font-family:var(--font-heading);font-size:var(--font-size-heading-xl);color:var(--navy);font-weight:900;margin-bottom:4px;}
.plan-card-cost{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.4;}
.plan-card-btn{margin-top:12px;width:100%;padding:10px;background:var(--navy);color:white;border:none;border-radius:var(--radius-lg);font-family:var(--font-body);font-size:var(--font-size-body-m);font-weight:600;cursor:pointer;transition:background 0.18s;}
.plan-card-btn:hover{background:var(--navy2);}
/* ── Credit badge ── */
.credit-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(15,98,254,0.15);border:1px solid rgba(15,98,254,0.4);border-radius:var(--radius-3xl);padding:4px 12px;font-size:var(--font-size-body-s);color:var(--gold2);font-weight:700;cursor:pointer;}
.credit-badge.warn{background:rgba(218,30,40,0.12);border-color:rgba(218,30,40,0.4);color:#da1e28;}
/* ── Payment section ── */
.payment-section{background:white;border-radius:var(--radius-3xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.payment-hd{background:linear-gradient(135deg,#161616,#262626);padding:20px 24px;border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;display:flex;align-items:center;justify-content:space-between;}
.payment-hd h2{font-family:var(--font-heading);color:white;font-size:var(--font-size-heading-m);margin:0;}
.payment-body{padding:22px 24px;}
.pay-option{border:2px solid var(--border);border-radius:var(--radius-xl);padding:16px;margin-bottom:12px;cursor:pointer;transition:border-color 0.18s;}
.pay-option:hover,.pay-option.selected{border-color:var(--navy);}
.pay-option-title{font-weight:700;font-size:var(--font-size-body-m);color:var(--navy);margin-bottom:8px;}
/* ── Bank settings view ── */
.bank-settings-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:22px;margin-bottom:20px;}
.bank-settings-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:var(--navy);margin-bottom:14px;}
/* ── Dashboard streak+credits stats row ── */
.dash-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
@media(max-width:480px){.dash-stats-row{grid-template-columns:1fr 1fr;gap:8px;}}
/* ── Personal Notes Dictionary ── */
.notes-dict-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-3xl);padding:22px 24px;margin-bottom:20px;box-shadow:0 2px 16px rgba(0,0,0,0.05);}
.notes-dict-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.notes-dict-title{font-family:var(--font-heading);font-size:var(--font-size-body-l);font-weight:700;color:var(--navy);}
.notes-dict-sub{font-size:var(--font-size-body-s);color:var(--muted);margin-top:2px;line-height:1.5;}
.notes-dict-input-wrap{display:flex;align-items:center;gap:10px;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:11px 14px;background:#f4f4f4;transition:border-color 0.2s,background 0.2s;}
.notes-dict-input-wrap:focus-within{border-color:var(--navy);background:white;}
.notes-dict-input-wrap input{flex:1;border:none;background:none;outline:none;font-family:var(--font-body);font-size:var(--font-size-body-m);color:var(--ink);}
.notes-dict-input-wrap input::placeholder{color:var(--muted);}
.notes-dict-count{font-size:var(--font-size-body-s);color:var(--muted);margin:14px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.notes-dict-empty{text-align:center;padding:22px 0 8px;font-size:var(--font-size-body-m);color:var(--muted);line-height:1.75;}
.notes-dict-result{border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:14px 16px;margin-bottom:10px;background:#f4f4f4;transition:border-color 0.15s;}
.notes-dict-result:hover{border-color:#b8c8e8;}
.notes-dict-source{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);letter-spacing:0.3px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.notes-dict-badge{font-size:var(--font-size-body-s);background:var(--navy);color:white;padding:2px 7px;border-radius:var(--radius-lg);text-transform:uppercase;letter-spacing:0.5px;font-weight:700;flex-shrink:0;}
.notes-dict-snippet{font-size:var(--font-size-body-m);color:var(--ink);line-height:1.7;margin-bottom:6px;padding:6px 10px;border-left:2.5px solid var(--border);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:white;}
.notes-dict-snippet:last-of-type{margin-bottom:0;}
.notes-dict-snippet mark{background:rgba(120,169,255,0.38);color:var(--navy);border-radius:var(--radius-sm);padding:0 2px;font-weight:700;font-style:normal;}
/* ── AI Marker ── */
.marker-hero{background:linear-gradient(135deg,#f8f9ff 0%,#eef2ff 100%);border:none;border-radius:var(--radius-3xl);padding:24px 28px;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,0.06);}
.marker-upload-zone{border:2px dashed var(--border);border-radius:var(--radius-3xl);padding:38px 28px;text-align:center;background:white;cursor:pointer;transition:all 0.2s;margin-bottom:14px;}
.marker-upload-zone.drag-over .marker-upload-option{border-color:var(--navy);background:#f0f4ff;}
.marker-upload-option{border:none;border-radius:var(--radius-2xl);padding:28px 16px 22px;text-align:center;background:#f8f9ff;cursor:pointer;transition:all 0.22s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 10px rgba(0,0,0,0.04);}
.marker-upload-option:hover{background:white;transform:translateY(-3px);box-shadow:0 10px 32px rgba(15,98,254,0.12);}
.marker-upload-option:active{transform:translateY(0);}
.marker-upload-option-icon{width:56px;height:56px;border-radius:var(--radius-2xl);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.marker-upload-option-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);margin-bottom:4px;font-family:'Open Sans',sans-serif;}
.marker-upload-option-sub{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.5;}
/* legacy — kept so drag-over border still works on outer zone */
.marker-upload-zone{border-radius:var(--radius-3xl);padding:14px;background:rgba(17,30,56,0.015);border:2px dashed transparent;transition:border-color 0.2s;}
.marker-upload-zone.drag-over{border-color:var(--navy);background:#f0f4ff;}
.marker-preview{border-radius:var(--radius-2xl);overflow:hidden;margin-bottom:14px;position:relative;background:#0a0a0a;}
.marker-preview img{width:100%;max-height:320px;object-fit:contain;display:block;}
.marker-preview-remove{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:var(--radius-full);background:rgba(0,0,0,0.65);color:white;border:none;cursor:pointer;font-size:var(--font-size-body-l);display:flex;align-items:center;justify-content:center;line-height:1;}
.marker-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.marker-field label{display:block;font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;}
.marker-field select,.marker-field input[type=text]{width:100%;padding:11px 14px;border:none;border-radius:var(--radius-xl);font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-m);color:var(--ink);background:#f4f4f4;outline:none;transition:all 0.2s;box-sizing:border-box;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.marker-field select:focus,.marker-field input[type=text]:focus{background:white;box-shadow:0 0 0 2px rgba(15,98,254,0.25),0 2px 8px rgba(0,0,0,0.06);}
.marker-check-btn{width:100%;padding:16px;background:linear-gradient(135deg,#0F62FE 0%,#0043CE 100%);color:white;border:none;border-radius:var(--radius-2xl);font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-l);font-weight:700;cursor:pointer;transition:all 0.22s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:24px;letter-spacing:0.3px;box-shadow:0 4px 18px rgba(15,98,254,0.32);}
.marker-check-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 36px rgba(15,98,254,0.45);}
.marker-check-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none;}
.marker-result-card{background:white;border:none;border-radius:var(--radius-3xl);padding:24px 22px;margin-bottom:16px;box-shadow:0 4px 28px rgba(0,0,0,0.08);}
.marker-grade-row{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px;}
.marker-grade-circle{width:90px;height:90px;border-radius:var(--radius-full);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:'Open Sans',sans-serif;box-shadow:0 6px 24px rgba(0,0,0,0.18);}
.marker-grade-letter{font-size:var(--font-size-heading-xl);font-weight:900;line-height:1;}
.marker-grade-pct{font-size:var(--font-size-body-s);font-weight:700;opacity:0.9;margin-top:2px;}
.marker-grade-info{flex:1;min-width:0;}
.marker-grade-title{font-family:'Open Sans',sans-serif;font-size:var(--font-size-heading-m);font-weight:800;color:var(--navy);margin-bottom:5px;line-height:1.3;}
.marker-grade-msg{font-size:var(--font-size-body-m);color:var(--muted);line-height:1.65;}
.marker-section-title{font-size:var(--font-size-body-s);font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.marker-sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px;}
.marker-strengths-box{background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border:none;border-radius:var(--radius-xl);padding:14px 16px;box-shadow:0 2px 10px rgba(36,161,72,0.1);}
.marker-weaknesses-box{background:linear-gradient(135deg,#fff0f2 0%,#fee2e2 100%);border:none;border-radius:var(--radius-xl);padding:14px 16px;box-shadow:0 2px 10px rgba(218,30,40,0.08);}
.marker-sw-item{font-size:var(--font-size-body-s);line-height:1.65;display:flex;align-items:flex-start;gap:7px;color:inherit;margin-bottom:4px;}
.marker-sw-item:last-child{margin-bottom:0;}
.marker-mistake{background:#fff8f8;border:1.5px solid #ffc2c5;border-radius:var(--radius-xl);padding:12px 14px;margin-bottom:8px;}
.marker-mistake:last-child{margin-bottom:0;}
.marker-mistake-original{font-size:var(--font-size-body-s);color:#DA1E28;margin-bottom:5px;font-weight:600;display:flex;align-items:flex-start;gap:6px;}
.marker-mistake-correction{font-size:var(--font-size-body-s);color:#0E6027;margin-bottom:5px;display:flex;align-items:flex-start;gap:6px;}
.marker-mistake-reason{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.6;padding-left:18px;}
.marker-tip{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);}
.marker-tip:last-child{border-bottom:none;}
.marker-tip-num{width:22px;height:22px;border-radius:var(--radius-full);background:var(--navy);color:white;font-size:var(--font-size-body-s);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.marker-tip-text{font-size:var(--font-size-body-m);color:var(--ink);line-height:1.65;}
.marker-stats-card{background:white;border:none;border-radius:var(--radius-3xl);overflow:hidden;margin-bottom:0;box-shadow:0 2px 14px rgba(0,0,0,0.07);}
.marker-stat-row{margin-bottom:12px;}
.marker-stat-row:last-child{margin-bottom:0;}
.marker-stat-label{display:flex;justify-content:space-between;font-size:var(--font-size-body-s);font-weight:700;letter-spacing:0.3px;margin-bottom:5px;}
.marker-stat-bar-bg{height:8px;background:#eef1f7;border-radius:var(--radius-full);overflow:hidden;}
.marker-stat-bar{height:100%;border-radius:var(--radius-full);transition:width 1.1s cubic-bezier(0.4,0,0.2,1);}
.marker-score-item{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--border);transition:background 0.15s;cursor:pointer;}
.marker-score-item:last-child{border-bottom:none;}
.marker-score-item:hover{background:#f0f4ff;}
/* ── Academic Profile Card — clean card layout ── */
.ms-outer{background:white;border:none;border-radius:var(--radius-3xl);overflow:hidden;margin-bottom:20px;box-shadow:0 4px 24px rgba(0,0,0,0.08);}
.ms-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#fafbff 0%,#f4f7ff 100%);}
.ms-head-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;}
.ms-tag{font-size:var(--font-size-body-s);font-weight:700;padding:3px 12px;border-radius:var(--radius-full);}
.ms-stats-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border);}
.ms-chip{padding:16px 10px;text-align:center;border-right:1px solid var(--border);}
.ms-chip:last-child{border-right:none;}
.ms-chip-val{font-size:var(--font-size-heading-m);font-weight:800;font-family:var(--font-heading);line-height:1;}
.ms-chip-lbl{font-size:var(--font-size-body-s);color:var(--muted);font-weight:500;margin-top:4px;text-transform:uppercase;letter-spacing:0.4px;}
.ms-body{display:grid;grid-template-columns:220px 1fr;}
.ms-left{border-right:1px solid var(--border);padding:20px;}
.ms-right{padding:20px;}
.ms-card-title{font-size:var(--font-size-body-s);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:14px;}
.ms-big-score{font-size:48px;font-weight:900;font-family:var(--font-heading);line-height:1;margin-bottom:2px;}
.ms-score-label{font-size:var(--font-size-body-s);color:var(--muted);font-weight:500;}
.ms-info-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px solid var(--border);}
.ms-info-key{font-size:var(--font-size-body-s);color:var(--muted);font-weight:500;}
.ms-info-val{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);}
.ms-subj-box{border-radius:var(--radius-xl);padding:10px 12px;margin-top:8px;}
.ms-subj-best{background:#f0fdf4;border:1.5px solid #bbf7d0;}
.ms-subj-weak{background:#fff5f5;border:1.5px solid #fecdd3;}
.ms-subj-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.ms-subj-name{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);line-height:1.3;}
.ms-subj-avg{font-size:var(--font-size-body-s);font-weight:600;margin-top:1px;}
.ms-skill-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ms-skill-row:last-child{margin-bottom:0;}
.ms-skill-name{font-size:var(--font-size-body-s);font-weight:600;color:var(--navy);width:160px;flex-shrink:0;}
.ms-skill-bar-bg{flex:1;height:8px;background:#eef1f7;border-radius:var(--radius-full);overflow:hidden;}
.ms-skill-bar{height:100%;border-radius:var(--radius-full);transition:width 1.1s cubic-bezier(0.4,0,0.2,1);}
.ms-skill-score{font-size:var(--font-size-body-s);font-weight:700;width:28px;text-align:right;flex-shrink:0;}
@media(max-width:640px){.ms-body{grid-template-columns:1fr;}.ms-left{border-right:none;border-bottom:1.5px solid var(--border);}.ms-stats-strip{grid-template-columns:repeat(2,1fr);}.ms-chip:nth-child(2){border-right:none;}.ms-chip{border-bottom:1.5px solid var(--border);}.ms-chip:nth-child(3),.ms-chip:nth-child(4){border-bottom:none;}.ms-skill-name{width:110px;}}
/* ── Quiz Session Config Panel ── */
#quizConfigPanel{position:fixed;top:0;right:0;width:100%;max-width:440px;height:100%;background:#fff;z-index:9999;box-shadow:none;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);}
#quizConfigPanel.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(0,0,0,0.18);}
#quizConfigPanelOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.3s;}
#quizConfigPanelOverlay.open{opacity:1;pointer-events:auto;}
/* ── Quiz Performance Panel ── */
#quizPerfPanel{position:fixed;top:0;right:0;width:100%;max-width:520px;height:100%;background:#fff;z-index:9999;box-shadow:none;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);}
#quizPerfPanel.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(0,0,0,0.18);}
#quizPerfPanelOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.3s;}
#quizPerfPanelOverlay.open{opacity:1;pointer-events:auto;}
/* ── Study Material Results Panel ── */
#studyResultPanel{position:fixed;top:0;right:0;width:100%;max-width:560px;height:100%;background:#fff;z-index:9999;box-shadow:none;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);}
#studyResultPanel.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(0,0,0,0.18);}
#studyResultPanelOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.3s;}
#studyResultPanelOverlay.open{opacity:1;pointer-events:auto;}
.srp-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--navy);}
.srp-header-title{flex:1;font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-m);font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.srp-header-meta{font-size:var(--font-size-body-s);color:rgba(255,255,255,0.65);margin-top:1px;}
.srp-close{width:32px;height:32px;border-radius:var(--radius-full);background:rgba(255,255,255,0.12);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;flex-shrink:0;color:#fff;}
.srp-close:hover{background:rgba(255,255,255,0.22);}
.srp-actions{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:#f4f4f4;}
.srp-btn-pdf{flex:1;background:var(--gold);color:white;border:none;border-radius:var(--radius-lg);padding:10px 0;font-size:var(--font-size-body-m);font-weight:800;cursor:pointer;letter-spacing:.02em;}
.srp-btn-pdf:hover{background:#0353E9;}
.srp-btn-copy{flex:1;background:#fff;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 0;font-size:var(--font-size-body-m);font-weight:700;cursor:pointer;}
.srp-btn-copy:hover{background:#f4f4f4;}
.srp-body{flex:1;overflow-y:auto;padding:14px 14px 24px;}
/* ── History detail panel ── */
#markerHistoryPanel{position:fixed;top:0;right:0;width:100%;max-width:520px;height:100%;background:#fff;z-index:9999;box-shadow:none;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(.4,0,.2,1);}
#markerHistoryPanel.open{transform:translateX(0);box-shadow:-8px 0 40px rgba(0,0,0,0.18);}
#markerHistoryPanelOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.3s;}
#markerHistoryPanelOverlay.open{opacity:1;pointer-events:auto;}
.mhp-header{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:#fff;}
.mhp-header-title{flex:1;font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-l);font-weight:800;color:var(--navy);}
.mhp-close{width:32px;height:32px;border-radius:var(--radius-full);background:#f3f4f6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;flex-shrink:0;}
.mhp-close:hover{background:#e5e7eb;}
.mhp-body{flex:1;overflow-y:auto;padding:20px;}
.mhp-grade-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;}
.mhp-grade-circle{width:72px;height:72px;border-radius:var(--radius-3xl);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:'Open Sans',sans-serif;box-shadow:0 4px 16px rgba(0,0,0,0.18);}
.mhp-grade-letter{font-size:var(--font-size-heading-xl);font-weight:900;line-height:1;}
.mhp-grade-pct{font-size:var(--font-size-body-s);font-weight:700;opacity:0.9;}
.mhp-section{margin-bottom:18px;}
.mhp-section-title{font-size:var(--font-size-body-s);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.mhp-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--radius-lg);font-size:var(--font-size-body-s);font-weight:600;margin:3px 3px 3px 0;}
.mhp-mistake-card{background:#fff0f2;border:1px solid #ffc2c5;border-radius:var(--radius-xl);padding:12px 14px;margin-bottom:10px;font-size:var(--font-size-body-s);line-height:1.6;}
.mhp-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.mhp-bar-label{font-size:var(--font-size-body-s);color:var(--navy);font-weight:600;width:148px;flex-shrink:0;}
.mhp-bar-track{flex:1;height:8px;background:#e5e7eb;border-radius:var(--radius-full);overflow:hidden;}
.mhp-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.6s;}
.mhp-bar-val{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);width:32px;text-align:right;flex-shrink:0;}
.mhp-step{display:flex;gap:10px;margin-bottom:9px;font-size:var(--font-size-body-s);line-height:1.6;color:var(--navy);}
.mhp-step-num{width:20px;height:20px;border-radius:var(--radius-full);background:var(--navy);color:#fff;font-size:var(--font-size-body-s);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.marker-score-badge{width:44px;height:44px;border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:'Open Sans',sans-serif;box-shadow:0 3px 10px rgba(0,0,0,0.15);}
.marker-score-badge-letter{font-size:var(--font-size-heading-m);font-weight:900;line-height:1;}
.marker-score-badge-pct{font-size:var(--font-size-body-s);font-weight:700;opacity:0.9;}
.marker-score-info{flex:1;min-width:0;}
.marker-score-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.marker-score-meta{font-size:var(--font-size-body-s);color:var(--muted);margin-top:2px;}
/* submitted state card */
.marker-submitted-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:18px 20px;margin-bottom:14px;display:flex;align-items:center;gap:16px;}
.marker-submitted-tick{width:44px;height:44px;border-radius:var(--radius-full);background:linear-gradient(135deg,#42BE65,#24a148);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(16,185,129,0.3);}
.marker-submitted-info{flex:1;min-width:0;}
.marker-submitted-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);margin-bottom:2px;}
.marker-submitted-meta{font-size:var(--font-size-body-s);color:var(--muted);}
.marker-submitted-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.marker-submitted-new{padding:8px 14px;background:var(--navy);color:white;border:none;border-radius:var(--radius-lg);font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;white-space:nowrap;}
.marker-submitted-scroll{padding:8px 14px;background:none;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-lg);font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;white-space:nowrap;}
.marker-thumb-wrap{position:relative;flex-shrink:0;}
.marker-thumb-wrap img{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-xl);border:2px solid var(--border);display:block;}
.marker-thumb-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:var(--radius-full);background:var(--navy);color:white;border:none;cursor:pointer;font-size:var(--font-size-body-s);display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.marker-thumb-wrap:hover img{border-color:var(--navy);}
@keyframes markerSpin{to{transform:rotate(360deg)}}
.marker-spin{animation:markerSpin 0.9s linear infinite;}
/* ─────────────── */
.dash-stat-card{display:flex;align-items:center;gap:14px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:16px 18px;transition:all 0.2s;cursor:default;}
.dash-stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,0.09);}
.dash-stat-card.credits-card{cursor:pointer;}
.dash-stat-card.credits-card:hover{border-color:var(--gold);}
.dash-stat-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--radius-2xl);flex-shrink:0;}
.dash-stat-icon.streak-icon{background:rgba(255,131,43,0.12);color:#FF832B;}
.dash-stat-icon.streak-icon.active{background:rgba(218,30,40,0.12);color:#da1e28;}
.dash-stat-icon.credits-icon{background:rgba(15,98,254,0.12);color:#0f62fe;}
.dash-stat-icon.credits-icon.low{background:rgba(217,119,6,0.12);color:#C76100;}
.dash-stat-icon.credits-icon.empty{background:rgba(218,30,40,0.1);color:#da1e28;}
.dash-stat-info{flex:1;min-width:0;}
.dash-stat-num{font-size:var(--font-size-metric-m);font-weight:var(--font-weight-metric);color:var(--navy);font-family:var(--font-metric);line-height:var(--line-height-metric-m);}
.dash-stat-num.streak-active{background:linear-gradient(135deg,#FF832B,#da1e28);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.dash-stat-num.credits-gold{background:linear-gradient(135deg,#0f62fe,#0353E9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.dash-stat-lbl{font-size:var(--font-size-body-s);color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600;margin-top:2px;}
.dash-stat-sub{font-size:var(--font-size-body-s);color:var(--muted);margin-top:2px;}
/* ══════════════════════════════════════════════════════
   EXAM READINESS CARD
   ══════════════════════════════════════════════════════ */
.erc-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:28px;}
.erc-head{padding:16px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.erc-head-icon{width:34px;height:34px;border-radius:10px;background:rgba(36,161,72,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.erc-head-text{flex:1;min-width:0;}
.erc-head-title{font-size:14px;font-weight:700;color:var(--navy);line-height:1.2;}
.erc-head-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.erc-count-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;flex-shrink:0;}
.erc-count-badge.ready{background:#dcfce7;color:#15803d;}
.erc-count-badge.none{background:#f4f4f4;color:var(--muted);}

/* ready items */
.erc-body{padding:12px 16px 4px;}
.erc-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-xl);margin-bottom:9px;transition:all 0.15s;cursor:default;}
.erc-item.ready-item{border-color:#bbf7d0;background:#f9fffe;}
.erc-item.ready-item:hover{box-shadow:0 3px 14px rgba(21,128,61,0.1);transform:translateY(-1px);}
.erc-item.almost-item{border-color:#fde68a;background:#fffdf0;}
.erc-item.almost-item:hover{box-shadow:0 3px 14px rgba(234,179,8,0.1);}
.erc-item-left{flex:1;min-width:0;}
.erc-item-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.erc-subject-pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.2px;flex-shrink:0;}
.erc-topic-name{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.erc-ready-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;margin-left:auto;flex-shrink:0;}
.erc-ready-badge.ready{background:#dcfce7;color:#15803d;}
.erc-ready-badge.almost{background:#fef9c3;color:#854d0e;}
.erc-ready-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;flex-shrink:0;}
.erc-ready-dot.pulse{animation:erc-pulse 1.8s ease-in-out infinite;}
.erc-almost-dot{width:7px;height:7px;border-radius:50%;background:#ca8a04;flex-shrink:0;}
@keyframes erc-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(22,163,74,0.4);}50%{opacity:0.85;box-shadow:0 0 0 4px rgba(22,163,74,0);}}
.erc-item-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);flex-wrap:wrap;}
.erc-score-bar-wrap{height:5px;border-radius:99px;background:#e5e7eb;overflow:hidden;margin-top:7px;}
.erc-score-bar-fill{height:100%;border-radius:99px;transition:width 0.8s cubic-bezier(0.22,1,0.36,1);}
.erc-btn-exam{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;background:var(--navy);color:white;border:none;border-radius:var(--radius-lg);font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;flex-shrink:0;white-space:nowrap;}
.erc-btn-exam:hover{background:#0f2040;transform:translateY(-1px);box-shadow:0 4px 14px rgba(17,30,56,0.25);}
.erc-btn-quiz{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:transparent;color:var(--navy);border:1.5px solid var(--border);border-radius:var(--radius-lg);font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;flex-shrink:0;white-space:nowrap;}
.erc-btn-quiz:hover{border-color:var(--navy);background:#f8f9ff;}

/* section divider inside card */
.erc-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin:4px 0 9px;padding-top:4px;}

/* no-ready state */
.erc-empty{padding:20px 16px 16px;text-align:center;}
.erc-empty-icon{width:48px;height:48px;border-radius:var(--radius-xl);background:#f4f4f4;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;}
.erc-empty-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:5px;}
.erc-empty-sub{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px;}

/* recent quizzes mini grid (empty state) */
.erc-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
@media(max-width:480px){.erc-mini-grid{grid-template-columns:1fr 1fr;}}
.erc-mini-card{border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:10px 10px 9px;text-align:center;}
.erc-mini-subject{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.erc-mini-score{font-size:18px;font-weight:800;line-height:1.1;margin-bottom:6px;}
.erc-mini-btn{font-size:11px;font-weight:700;color:#0f62fe;background:rgba(15,98,254,0.08);border:none;border-radius:999px;padding:3px 10px;cursor:pointer;font-family:'Open Sans',sans-serif;transition:background 0.15s;}
.erc-mini-btn:hover{background:rgba(15,98,254,0.15);}

/* onboarding steps (never-quizzed state) */
.erc-steps{display:flex;align-items:center;gap:0;margin:4px 0 16px;flex-wrap:wrap;}
.erc-step{display:flex;align-items:center;gap:7px;flex:1;min-width:0;}
.erc-step-num{width:26px;height:26px;border-radius:50%;background:#f4f4f4;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--muted);flex-shrink:0;}
.erc-step-num.done{background:#dcfce7;border-color:#bbf7d0;color:#15803d;}
.erc-step-num.active{background:var(--navy);border-color:var(--navy);color:white;}
.erc-step-text{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.erc-step-text.active{color:var(--navy);}
.erc-step-arrow{font-size:16px;color:#d1d5db;flex-shrink:0;margin:0 4px;}

/* footer */
.erc-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.erc-footer-note{font-size:11px;color:var(--muted);}
.erc-view-all{font-size:12px;font-weight:700;color:#0f62fe;background:none;border:none;cursor:pointer;font-family:'Open Sans',sans-serif;padding:0;}
.erc-view-all:hover{text-decoration:underline;}

/* tooltip */
.erc-ready-badge[title]{cursor:default;}

/* ── end Exam Readiness Card ── */
   ══════════════════════════════════════════════════════════════════ */

/* ── Tab bar ── */
.examiner-tab-bar{display:flex;gap:4px;padding:5px;background:#eef0f4;border-radius:var(--radius-2xl);margin-bottom:24px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.07);}
.examiner-tab{flex:1;padding:10px 14px;border:none;border-radius:var(--radius-xl);background:transparent;font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-s);font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.examiner-tab.active{background:#fff;color:#0F62FE;box-shadow:0 2px 10px rgba(0,0,0,0.1);}

/* ── Mode selector ── */
.exam-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.exam-mode-card{border:none;border-radius:var(--radius-3xl);padding:20px 18px;cursor:pointer;transition:all 0.22s cubic-bezier(0.4,0,0.2,1);background:#fff;text-align:left;box-shadow:0 2px 10px rgba(0,0,0,0.06);position:relative;overflow:hidden;}
.exam-mode-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border);transition:background 0.22s;border-radius:3px 3px 0 0;}
.exam-mode-card:hover{box-shadow:0 8px 28px rgba(0,0,0,0.1);transform:translateY(-2px);}
.exam-mode-card:hover::after{background:linear-gradient(90deg,#0F62FE,#78A9FF);}
.exam-mode-card.active{box-shadow:0 6px 24px rgba(15,98,254,0.15);}
.exam-mode-card.active::after{background:linear-gradient(90deg,#0F62FE,#78A9FF);}
.exam-mode-icon{width:44px;height:44px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.exam-mode-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);margin-bottom:4px;font-family:'Open Sans',sans-serif;}
.exam-mode-sub{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.5;}
@media(max-width:520px){.exam-mode-grid{grid-template-columns:1fr;}}

/* ── Step bar ── */
.exam-step-bar{display:flex;align-items:flex-start;margin-bottom:32px;padding:8px 0 0;background:transparent;border:none;border-radius:0;position:relative;}
.exam-step-bar::before{content:'';position:absolute;top:26px;left:12.5%;right:12.5%;height:2px;background:var(--border);z-index:0;border-radius:2px;}
.exam-step-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 4px;font-size:11px;font-weight:700;color:var(--muted);text-align:center;border:none;position:relative;z-index:1;transition:color 0.25s;}
.exam-step-item:last-child{border:none;}
.exam-step-num{width:36px;height:36px;border-radius:var(--radius-full);background:white;border:2px solid var(--border);color:var(--muted);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.exam-step-item.active{color:#0F62FE;}
.exam-step-item.active .exam-step-num{background:linear-gradient(135deg,#0F62FE 0%,#0043CE 100%);border-color:transparent;color:white;box-shadow:0 4px 18px rgba(15,98,254,0.45);transform:scale(1.12);}
.exam-step-item.done{color:#24a148;}
.exam-step-item.done .exam-step-num{background:linear-gradient(135deg,#42BE65 0%,#24a148 100%);border-color:transparent;color:white;box-shadow:0 4px 12px rgba(36,161,72,0.3);}
@media(max-width:480px){.exam-step-item{font-size:10px;}.exam-step-num{width:28px;height:28px;font-size:11px;}.exam-step-bar::before{top:22px;}}

/* ── Resource cards ── */
.exam-resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px;}
@media(max-width:560px){.exam-resource-grid{grid-template-columns:1fr;}}
.exam-resource-card{border:none;border-radius:var(--radius-3xl);padding:18px 20px;background:white;cursor:pointer;transition:all 0.22s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(0,0,0,0.06),0 0 0 1.5px rgba(0,0,0,0.04);position:relative;overflow:hidden;}
.exam-resource-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background 0.22s;border-radius:4px 0 0 4px;}
.exam-resource-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.1),0 0 0 1.5px rgba(15,98,254,0.2);transform:translateY(-2px);}
.exam-resource-card:hover::before{background:#0F62FE;}
.exam-resource-card.selected{background:linear-gradient(135deg,#f0f6ff 0%,#e8f0fe 100%);box-shadow:0 8px 28px rgba(15,98,254,0.14),0 0 0 2px #0F62FE;}
.exam-resource-card.selected::before{background:#0F62FE;}
.exam-resource-subject{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:800;letter-spacing:0.3px;text-transform:uppercase;margin-bottom:8px;}
.exam-resource-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);margin-bottom:5px;line-height:1.35;font-family:'Open Sans',sans-serif;}
.exam-resource-meta{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.5;}
.exam-resource-badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.exam-resource-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:700;}
.exam-resource-select-btn{margin-top:12px;width:100%;padding:9px 0;border:none;border-radius:var(--radius-xl);background:#f4f4f4;font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-s);font-weight:800;color:var(--navy);cursor:pointer;transition:all 0.18s;}
.exam-resource-select-btn:hover,.exam-resource-card.selected .exam-resource-select-btn{background:linear-gradient(135deg,#0F62FE 0%,#0043CE 100%);color:white;box-shadow:0 4px 12px rgba(15,98,254,0.3);}
.exam-resource-empty{text-align:center;padding:40px 20px;background:white;border:none;border-radius:var(--radius-3xl);box-shadow:0 2px 10px rgba(0,0,0,0.05);}

/* ── Resource filter bar ── */
.exam-filter-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.exam-filter-input{flex:1;min-width:160px;padding:10px 16px;border:none;border-radius:var(--radius-xl);font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-s);color:var(--ink);outline:none;transition:all 0.18s;background:#f4f4f4;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.exam-filter-input:focus{background:white;box-shadow:0 0 0 2px rgba(15,98,254,0.25),0 2px 8px rgba(0,0,0,0.06);}
.exam-filter-select{padding:10px 12px;border:none;border-radius:var(--radius-xl);font-family:'Open Sans',sans-serif;font-size:var(--font-size-body-s);color:var(--ink);outline:none;background:#f4f4f4;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:all 0.18s;}
.exam-filter-select:focus{background:white;box-shadow:0 0 0 2px rgba(15,98,254,0.25);}

/* ── Selected resource preview ── */
.exam-resource-preview{background:white;border:none;border-radius:var(--radius-3xl);margin-bottom:16px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,0.07);}
.exam-resource-preview-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;cursor:pointer;background:linear-gradient(135deg,#fafbff 0%,#f8faff 100%);}
.exam-resource-preview-header:hover{background:linear-gradient(135deg,#f0f4ff 0%,#edf2ff 100%);}
.exam-resource-preview-info{flex:1;min-width:0;}
.exam-resource-preview-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);font-family:'Open Sans',sans-serif;}
.exam-resource-preview-meta{font-size:var(--font-size-body-s);color:var(--muted);margin-top:2px;}
.exam-resource-preview-body{padding:16px 18px;border-top:1px solid var(--border);}
.exam-qa-item{padding:12px 0;border-bottom:1px solid var(--border);}
.exam-qa-item:last-child{border-bottom:none;}
.exam-qa-q{font-size:var(--font-size-body-s);font-weight:800;color:var(--navy);margin-bottom:5px;display:flex;gap:8px;}
.exam-qa-q-num{width:22px;height:22px;border-radius:var(--radius-full);background:var(--navy);color:white;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.exam-qa-a{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.65;padding-left:30px;}

/* ── Readiness badge ── */
.exam-readiness{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:800;margin-bottom:10px;}
.exam-readiness.not-ready{background:#fff0f2;color:#da1e28;border:1.5px solid #ffc2c5;}
.exam-readiness.developing{background:#fff8ec;color:#C76100;border:1.5px solid #FFD89F;}
.exam-readiness.nearly-ready{background:#eff6ff;color:#1d4ed8;border:1.5px solid #bfdbfe;}
.exam-readiness.exam-ready{background:#f0fdf4;color:#15803d;border:1.5px solid #bbf7d0;}

/* ── Marks pill ── */
.exam-marks-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:var(--radius-full);background:#f4f4f4;border:1.5px solid var(--border);font-size:var(--font-size-body-s);font-weight:800;color:var(--navy);margin-bottom:10px;}

/* ── Q-by-Q review ── */
.exam-qreview-list{margin-top:4px;}
.exam-qreview-item{border:none;border-radius:var(--radius-2xl);margin-bottom:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.exam-qreview-item.correct{box-shadow:0 2px 12px rgba(36,161,72,0.12);}
.exam-qreview-item.partial{box-shadow:0 2px 12px rgba(199,97,0,0.1);}
.exam-qreview-item.incorrect{box-shadow:0 2px 12px rgba(218,30,40,0.1);}
.exam-qreview-header{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fafafa;cursor:pointer;}
.exam-qreview-item.correct .exam-qreview-header{background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);}
.exam-qreview-item.partial .exam-qreview-header{background:linear-gradient(135deg,#fffbf0 0%,#fefce8 100%);}
.exam-qreview-item.incorrect .exam-qreview-header{background:linear-gradient(135deg,#fff8f8 0%,#fef2f2 100%);}
.exam-qreview-status{width:22px;height:22px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.exam-qreview-item.correct .exam-qreview-status{background:#dcfce7;color:#15803d;}
.exam-qreview-item.partial .exam-qreview-status{background:#fef9c3;color:#854d0e;}
.exam-qreview-item.incorrect .exam-qreview-status{background:#fee2e2;color:#b91c1c;}
.exam-qreview-qtxt{flex:1;font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);line-height:1.4;}
.exam-qreview-marks{font-size:var(--font-size-body-s);font-weight:800;flex-shrink:0;}
.exam-qreview-item.correct .exam-qreview-marks{color:#15803d;}
.exam-qreview-item.partial .exam-qreview-marks{color:#C76100;}
.exam-qreview-item.incorrect .exam-qreview-marks{color:#da1e28;}
.exam-qreview-body{padding:12px 14px;border-top:1px solid var(--border);display:none;}
.exam-qreview-body.open{display:block;}
.exam-qreview-answer-row{display:flex;gap:8px;margin-bottom:8px;font-size:var(--font-size-body-s);line-height:1.6;}
.exam-qreview-answer-label{font-weight:800;flex-shrink:0;width:80px;}
.exam-qreview-feedback{font-size:var(--font-size-body-s);color:var(--muted);line-height:1.65;background:#f9fafb;border-radius:var(--radius-lg);padding:8px 10px;margin-top:4px;}

/* ── Topic mastery bars ── */
.exam-topic-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.exam-topic-row:last-child{margin-bottom:0;}
.exam-topic-name{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);width:140px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.exam-topic-bar-bg{flex:1;height:9px;background:#eef1f7;border-radius:var(--radius-full);overflow:hidden;}
.exam-topic-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 1s cubic-bezier(0.4,0,0.2,1);}
.exam-topic-pct{font-size:var(--font-size-body-s);font-weight:800;width:34px;text-align:right;flex-shrink:0;}
@media(max-width:480px){.exam-topic-name{width:90px;}}

/* ── Next steps ── */
.exam-nextsteps{display:flex;flex-direction:column;gap:8px;}
.exam-nextstep-btn{display:flex;align-items:center;gap:10px;padding:13px 16px;border:none;border-radius:var(--radius-xl);background:white;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);font-family:'Open Sans',sans-serif;text-align:left;width:100%;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.exam-nextstep-btn:hover{background:#f0f6ff;box-shadow:0 6px 20px rgba(15,98,254,0.12);transform:translateX(4px);}
.exam-nextstep-icon{width:32px;height:32px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.exam-nextstep-text{flex:1;font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);}

/* ── Stats dashboard ── */
.exam-stats-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
@media(max-width:600px){.exam-stats-chips{grid-template-columns:repeat(2,1fr);}}
.exam-stat-chip{background:white;border:none;border-radius:var(--radius-2xl);padding:16px 12px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.06);position:relative;overflow:hidden;}
.exam-stat-chip::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--chip-color,#0F62FE);border-radius:3px 3px 0 0;}
/* ── Stat chip trend badge ── */
.exam-stat-chip-trend{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700;margin-top:6px;padding:2px 8px;border-radius:var(--radius-full);}
/* ── Insight banner ── */
.exam-insight-banner{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:var(--radius-3xl);box-shadow:0 3px 16px rgba(0,0,0,0.07);}
.exam-insight-icon{width:40px;height:40px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,0.18);}
.exam-insight-text{flex:1;font-size:var(--font-size-body-s);color:var(--navy);line-height:1.65;}
.exam-insight-text strong{font-size:var(--font-size-body-m);font-weight:800;display:block;margin-bottom:4px;}
.exam-stat-chip-val{font-size:var(--font-size-heading-m);font-weight:900;font-family:var(--font-heading);line-height:1;margin-bottom:3px;}
.exam-stat-chip-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}

.exam-stats-section{background:white;border:none;border-radius:var(--radius-3xl);overflow:hidden;margin-bottom:16px;box-shadow:0 2px 14px rgba(0,0,0,0.06);}
.exam-stats-section-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fafbff 0%,#f8faff 100%);}
.exam-stats-section-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);}
.exam-stats-section-body{padding:18px 20px;}

/* ── Sparkline ── */
.exam-sparkline{display:flex;align-items:flex-end;gap:3px;height:94px;padding-top:6px;}
.exam-sparkline-bar{transition:height 0.75s cubic-bezier(0.34,1.2,0.64,1);cursor:default;position:relative;border-radius:4px 4px 0 0;width:100%;}
@media(hover:hover) and (pointer:fine){.exam-sparkline-bar:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--navy);color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:10;}}
/* ── Error visual rows ── */
.exam-error-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.exam-error-row:last-child{border-bottom:none;}
.exam-error-name{font-size:var(--font-size-body-s);color:var(--navy);font-weight:600;min-width:130px;flex-shrink:0;text-transform:capitalize;}
.exam-error-bar-bg{flex:1;height:7px;background:#f0f0f0;border-radius:var(--radius-full);overflow:hidden;}
.exam-error-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.9s cubic-bezier(0.4,0,0.2,1);}
.exam-error-count-num{font-size:var(--font-size-body-s);font-weight:800;width:34px;text-align:right;flex-shrink:0;}

/* ── History timeline ── */
.exam-history-item{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--radius-xl);margin-bottom:2px;transition:background 0.18s,box-shadow 0.18s;border-bottom:none;}
.exam-history-item:last-child{border-bottom:none;}
.exam-history-item:hover{background:#f8f9ff;box-shadow:0 2px 10px rgba(0,0,0,0.06);}
.exam-history-badge{width:46px;height:46px;border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:'Open Sans',sans-serif;box-shadow:0 3px 10px rgba(0,0,0,0.15);}
.exam-history-badge-grade{font-size:var(--font-size-body-l);font-weight:900;line-height:1;}
.exam-history-badge-pct{font-size:10px;font-weight:700;opacity:0.9;}
.exam-history-info{flex:1;min-width:0;}
.exam-history-title{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;}
.exam-history-meta{font-size:var(--font-size-body-s);color:var(--muted);margin-top:2px;}
.exam-history-mode-badge{font-size:10px;font-weight:800;padding:3px 10px;border-radius:var(--radius-full);flex-shrink:0;}

/* ── Subject accuracy bars ── */
.exam-subj-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.exam-subj-row:last-child{margin-bottom:0;}
.exam-subj-name{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);width:110px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.exam-subj-bar-bg{flex:1;height:12px;background:#eef1f7;border-radius:var(--radius-full);overflow:visible;position:relative;}
.exam-subj-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.9s cubic-bezier(0.4,0,0.2,1);}
.exam-subj-pct{font-size:var(--font-size-body-s);font-weight:800;width:32px;text-align:right;flex-shrink:0;}

/* ── Weak topics tags ── */
.exam-topic-tags{display:flex;flex-wrap:wrap;gap:7px;}
.exam-topic-tag{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;transition:all 0.2s;border:none;}
.exam-topic-tag.weak{background:linear-gradient(135deg,#fff0f2,#fee2e2);color:#da1e28;box-shadow:0 2px 8px rgba(218,30,40,0.12);}
.exam-topic-tag.weak:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(218,30,40,0.2);}
.exam-topic-tag.strong{background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#15803d;box-shadow:0 2px 8px rgba(36,161,72,0.12);}
.exam-topic-tag.strong:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(36,161,72,0.2);}
.exam-topic-tag.mid{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;box-shadow:0 2px 8px rgba(29,78,216,0.1);}
.exam-topic-tag.mid:hover{transform:translateY(-1px);}

/* ── Error table ── */
.exam-error-table{width:100%;border-collapse:collapse;}
.exam-error-table td,.exam-error-table th{padding:8px 10px;font-size:var(--font-size-body-s);text-align:left;border-bottom:1px solid var(--border);}
.exam-error-table th{font-weight:800;color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:0.5px;}
.exam-error-table tr:last-child td{border-bottom:none;}
.exam-error-count{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);background:#fff0f2;color:#da1e28;font-size:11px;font-weight:800;}

/* ── Mode B form ── */
.exam-b-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
@media(max-width:480px){.exam-b-grid{grid-template-columns:1fr;}}

/* ── Submitted confirm card ── */
.exam-submitted-card{background:white;border:none;border-radius:var(--radius-2xl);padding:16px 18px;margin-bottom:14px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 14px rgba(0,0,0,0.07);}
.exam-submitted-tick{width:42px;height:42px;border-radius:var(--radius-full);background:linear-gradient(135deg,#42BE65,#24a148);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(16,185,129,0.3);}
.exam-submitted-info{flex:1;min-width:0;}
.exam-submitted-title{font-size:var(--font-size-body-m);font-weight:800;color:var(--navy);margin-bottom:2px;}
.exam-submitted-meta{font-size:var(--font-size-body-s);color:var(--muted);}
.exam-submitted-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}

/* ── Loading spinner ── */
@keyframes examSpin{to{transform:rotate(360deg)}}
.exam-spin{animation:examSpin 0.9s linear infinite;}

/* ── Step bubble pulse (active step) ── */
@keyframes examStepPulse{0%,100%{box-shadow:0 4px 18px rgba(15,98,254,0.45);}50%{box-shadow:0 4px 24px rgba(15,98,254,0.65),0 0 0 6px rgba(15,98,254,0.08);}}
.exam-step-item.active .exam-step-num{animation:examStepPulse 2.2s ease-in-out infinite;}

/* ── Credits/Pro gate ── */
.exam-pro-gate{background:white;border:none;border-radius:var(--radius-3xl);padding:28px;text-align:center;margin-bottom:20px;box-shadow:0 4px 22px rgba(0,0,0,0.08);}
@media(max-width:520px){#examTopicsGrid{grid-template-columns:1fr;}}

/* ── Credit display ── */
.credits-badge-wrap{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.credits-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;cursor:pointer;transition:all 0.15s;}
.credits-chip-free{background:rgba(45,106,79,0.15);border:1px solid rgba(45,106,79,0.35);color:#24a148;}
.credits-chip-low{background:rgba(15,98,254,0.18);border:1px solid rgba(15,98,254,0.4);color:#0f62fe;}
.credits-chip-zero{background:rgba(218,30,40,0.15);border:1px solid rgba(218,30,40,0.35);color:#da1e28;animation:pulse 1.5s ease-in-out infinite;}
.credits-chip-paid{background:rgba(37,99,235,0.12);border:1px solid rgba(37,99,235,0.3);color:#0f62fe;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}
/* ── Payment method cards ── */
.pay-method-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
@media(max-width:480px){.pay-method-cards{grid-template-columns:1fr;}}
.pay-method-card{border:2px solid var(--border);border-radius:var(--radius-xl);padding:16px 14px;text-align:center;cursor:pointer;transition:all 0.2s;}
.pay-method-card:hover{border-color:var(--navy);transform:translateY(-2px);}
.pay-method-card.selected{border-color:var(--gold);background:linear-gradient(135deg,#fffbf0,#fff8e8);}
.pay-method-icon{font-size:var(--font-size-heading-xl);margin-bottom:8px;}
.pay-method-name{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);}
.pay-method-sub{font-size:var(--font-size-body-s);color:var(--muted);margin-top:3px;}
/* ── Payment proof section ── */
.pay-proof-box{background:#f7f9fc;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:16px;margin-bottom:14px;}
.pay-proof-label{font-size:var(--font-size-body-s);font-weight:700;color:var(--navy);letter-spacing:0.8px;text-transform:uppercase;margin-bottom:8px;}
/* ── Public users in teacher ── */
.pu-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;transition:background 0.15s;}
.pu-row:last-child{border-bottom:none;}
.pu-row:hover{background:#f8fafd;}
.pu-credits-badge{font-size:var(--font-size-body-s);font-weight:700;padding:2px 9px;border-radius:var(--radius-3xl);}
.pu-credits-free{background:#f4f4f4;color:#0E6027;border:1px solid #A7F0BA;}
.pu-credits-paid{background:#eff6ff;color:#0043CE;border:1px solid #bfdbfe;}
.pu-credits-zero{background:#fff0f2;color:#da1e28;border:1px solid #ffc2c5;}
/* ── Verification pending card ── */
.verify-pending-card{background:linear-gradient(135deg,#fff8ec,#fff8ec);border:1.5px solid #F1C21B;border-radius:var(--radius-2xl);padding:22px;text-align:center;margin-top:8px;display:none;}
.verify-pending-card h3{font-family:var(--font-heading);font-size:var(--font-size-heading-m);color:#FF832B;margin-bottom:6px;}
.verify-pending-card p{font-size:var(--font-size-body-m);color:#8A3FFC;line-height:1.6;}
/* ── Payment request approve row ── */
.pay-req-amt{font-size:var(--font-size-body-m);font-weight:700;color:var(--navy);}
.pay-req-plan{display:inline-flex;align-items:center;gap:5px;background:#eff6ff;color:#0043CE;border:1px solid #bfdbfe;border-radius:var(--radius-3xl);font-size:var(--font-size-body-s);font-weight:700;padding:2px 9px;}
/* ── Payments view (teacher) ── */
.payment-req-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap;}
.payment-req-row:last-child{border-bottom:none;}
/* ── Additional mobile responsive fixes ── */
@media(max-width:640px){
  .dash-greeting{flex-wrap:wrap;gap:10px;padding:16px 18px;}
  .login-card{padding:32px 20px;}
  .t-login-card{padding:28px 20px;}
  .teacher-wrap{padding:22px 16px 60px;}
  .step-card{padding:18px 16px;}
  .results-hd{padding:18px 16px;}
  .upload-zone{padding:20px 14px;}
}
@media(max-width:480px){
  .login-card{padding:24px 16px;}
  .t-login-card{padding:24px 16px;}
  .student-bar{padding:16px 16px;}
  .dash-stat-card{padding:12px 14px;gap:10px;}
}
/* ── Teacher Examiner Review ─────────────────── */
.ter-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.ter-stat-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:18px 20px;position:relative;overflow:hidden;}
.ter-stat-card-accent{position:absolute;top:0;left:0;width:4px;height:100%;border-radius:var(--radius-xl) 0 0 var(--radius-xl);}
.ter-stat-val{font-size:28px;font-weight:800;color:var(--navy);line-height:1;margin-bottom:4px;}
.ter-stat-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
.ter-stat-sub{font-size:11px;color:var(--muted);margin-top:5px;}
.ter-section-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.6px;text-transform:uppercase;margin:0 0 12px;}
.ter-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:11.5px;font-weight:700;white-space:nowrap;}
.ter-badge-ready{background:#dcfce7;color:#15803d;}
.ter-badge-ontrack{background:#dbeafe;color:#1d4ed8;}
.ter-badge-practice{background:#fef9c3;color:#ca8a04;}
.ter-badge-review{background:#ffedd5;color:#c2410c;}
.ter-badge-risk{background:#fee2e2;color:#dc2626;}
.ter-badge-inactive{background:#f3f4f6;color:#6b7280;}
.ter-badge-neverstarted{background:#ede9fe;color:#7c3aed;}
.ter-tbl tbody tr.ter-row-neverstarted td{background:#fdfcff;}
.ter-trend-up{color:#16A34A;font-size:11px;font-weight:700;}
.ter-trend-down{color:#DC2626;font-size:11px;font-weight:700;}
.ter-trend-stable{color:#D97706;font-size:11px;font-weight:700;}
.ter-bar-row-nodata .ter-bar-fill{background:#E5E7EB !important;}
.ter-bar-row-nodata .ter-bar-pct{color:#9CA3AF !important;font-style:italic;}
.ter-filters{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.ter-filter-sel{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:12px;font-family:inherit;background:white;color:var(--navy);cursor:pointer;}
.ter-filter-sel:focus{outline:none;border-color:var(--gold);}
.ter-search-inp{padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:13px;font-family:inherit;min-width:190px;margin-left:auto;}
.ter-search-inp:focus{outline:none;border-color:var(--gold);}
.ter-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px;}
.ter-chart-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:18px 20px;}
.ter-chart-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:6px;}
.ter-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12px;}
.ter-bar-label{width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--navy);font-weight:600;flex-shrink:0;cursor:pointer;}
.ter-bar-track{flex:1;background:#F0F0F0;border-radius:var(--radius-full);height:10px;overflow:hidden;cursor:pointer;}
.ter-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.5s ease;}
.ter-bar-pct{width:32px;text-align:right;font-weight:700;font-size:11px;color:var(--muted);}
/* ── Subject Quiz Performance vertical bar chart ── */
.sqp-card{background:white;border:1px solid #e0e0e0;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;}
.sqp-header{display:flex;align-items:center;justify-content:space-between;padding:0 22px;height:43px;border-bottom:1px solid #e0e0e0;flex-shrink:0;}
.sqp-title{font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;color:#161616;letter-spacing:-0.154px;}
.sqp-month{display:flex;align-items:center;gap:4px;font-family:'Open Sans',sans-serif;font-size:12px;font-weight:600;color:#0F2552;cursor:pointer;}
.sqp-body{position:relative;padding:18px 16px 54px 52px;flex:1;}
.sqp-y-axis{position:absolute;left:0;top:18px;width:48px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding-right:7px;pointer-events:none;}
.sqp-y-axis span{font-family:'Open Sans',sans-serif;font-size:9.75px;font-weight:600;color:rgba(0,0,0,0.5);}
.sqp-bars{display:flex;align-items:flex-end;gap:0;height:199px;position:relative;}
.sqp-col{display:flex;flex-direction:column;align-items:center;flex:1;height:199px;position:relative;}
.sqp-bar-wrap{position:relative;width:11.4px;height:199px;flex-shrink:0;}
.sqp-track{position:absolute;inset:0;background:#F2F7FF;border-radius:5.7px 5.7px 2px 2px;}
.sqp-fill{position:absolute;bottom:0;left:0;right:0;background:#4A7DE8;border-radius:5.7px 5.7px 2px 2px;transition:height 0.5s cubic-bezier(.4,0,.2,1);}
.sqp-x-label{font-family:'Open Sans',sans-serif;font-size:10px;color:#838383;white-space:nowrap;transform:rotate(-36.48deg);transform-origin:top center;margin-top:6px;line-height:1;}
.ter-roster-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;}
.ter-roster-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px;}
.ter-mode-switcher{display:inline-flex;background:#F1F5F9;border-radius:var(--radius-full);padding:3px;margin-bottom:18px;}
.ter-mode-btn{padding:7px 20px;border-radius:var(--radius-full);font-size:13px;font-weight:600;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all 0.18s;}
.ter-mode-btn:hover{color:var(--navy);}
.ter-mode-btn.active{background:var(--navy);color:white;box-shadow:0 1px 6px rgba(0,0,0,0.18);}
.ter-roster-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.ter-roster-tab{padding:5px 13px;border-radius:var(--radius-full);font-size:12px;font-weight:600;border:1.5px solid var(--border);background:white;color:var(--muted);cursor:pointer;transition:all 0.15s;}
.ter-roster-tab:hover{background:#F5F5F5;}
.ter-roster-tab.active{background:var(--navy);color:white;border-color:var(--navy);}
.ter-tbl{width:100%;border-collapse:collapse;}
.ter-tbl th{padding:9px 16px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.4px;background:#FAFAFA;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap;}
.ter-tbl th:hover{background:#F0F0F0;}
.ter-tbl td{padding:11px 16px;font-size:13px;border-bottom:1px solid #F5F5F5;vertical-align:middle;}
.ter-tbl tr:last-child td{border-bottom:none;}
.ter-tbl tbody tr:hover td{background:#FAFAFA;cursor:pointer;}
.ter-stu-name{font-weight:700;font-size:13px;color:var(--navy);}
.ter-stu-meta{font-size:11px;color:var(--muted);margin-top:1px;}
.ter-grade-num{font-size:16px;font-weight:800;}
.ter-grade-green{color:#16A34A;}
.ter-grade-amber{color:#D97706;}
.ter-grade-red{color:#DC2626;}
.ter-grade-bar-wrap{background:#F0F0F0;border-radius:var(--radius-full);height:5px;width:60px;margin-top:3px;overflow:hidden;display:inline-block;vertical-align:middle;}
.ter-grade-bar-fill{height:100%;border-radius:var(--radius-full);}
.ter-action-btn{padding:4px 10px;border-radius:var(--radius-lg);font-size:11px;font-weight:600;border:1.5px solid var(--border);background:white;cursor:pointer;color:var(--navy);}
.ter-action-btn:hover{background:#F0F0F0;}
.ter-queue-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;margin-bottom:20px;}
.ter-queue-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border);}
.ter-queue-item{padding:13px 18px;border-bottom:1px solid #F5F5F5;display:flex;align-items:flex-start;gap:12px;}
.ter-queue-item:last-child{border-bottom:none;}
.ter-queue-item:hover{background:#FAFAFA;}
.ter-queue-av{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,#DC2626,#B91C1C);color:white;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ter-queue-flag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--radius-full);font-size:10px;font-weight:700;}
.ter-flag-low{background:#FEE2E2;color:#DC2626;}
.ter-flag-repeat{background:#FFEDD5;color:#C2410C;}
.ter-flag-uncertain{background:#FEF9C3;color:#CA8A04;}
.ter-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1200;display:none;}
.ter-drawer-overlay.open{display:block;}
.ter-drawer{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:100vw;background:white;z-index:1201;transform:translateX(100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;display:flex;flex-direction:column;box-shadow:none;}
.ter-drawer.open{transform:translateX(0);box-shadow:-4px 0 32px rgba(0,0,0,0.12);}
/* Exam review drawer wired via sibling selector */
.ert-review-overlay.open + .ter-drawer{transform:translateX(0);}
.ter-drawer-hd{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px;position:sticky;top:0;background:white;z-index:2;}
/* ── Shared table action buttons (quiz + exam) ── */
.tbl-act-btn{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:700;cursor:pointer;font-family:'Open Sans',sans-serif;transition:all 0.15s;white-space:nowrap;border:1.5px solid transparent;}
.tbl-primary{background:#0F62FE;color:#fff;border-color:#0F62FE;}.tbl-primary:hover{background:#0353E9;border-color:#0353E9;}
.tbl-secondary{background:white;color:var(--navy);border-color:var(--navy);}.tbl-secondary:hover{background:#f4f4f4;}
.ter-drawer-av{width:46px;height:46px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--navy),#444);color:white;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ter-drawer-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;}
.ter-drawer-body{padding:18px 20px;flex:1;}
.ter-drawer-section{margin-bottom:20px;}
.ter-drawer-section-title{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.ter-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.ter-mini-stat{display:flex;flex-direction:column;align-items:center;background:#F9F9F9;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 6px;text-align:center;}
.ter-mini-stat-val{font-size:18px;font-weight:800;color:var(--navy);}
.ter-mini-stat-lbl{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:2px;}
.ter-attempt-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F0F0F0;font-size:12px;}
.ter-attempt-row:last-child{border-bottom:none;}
.ter-attempt-grade{width:38px;height:38px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
.ter-weak-chip{display:inline-flex;align-items:center;padding:3px 9px;background:#FEF2F2;color:#DC2626;border:1px solid #FCA5A5;border-radius:var(--radius-full);font-size:11px;font-weight:600;margin:2px;}
.ter-strong-chip{display:inline-flex;align-items:center;padding:3px 9px;background:#F0FDF4;color:#16A34A;border:1px solid #86EFAC;border-radius:var(--radius-full);font-size:11px;font-weight:600;margin:2px;}
.ter-empty{text-align:center;padding:36px 20px;color:var(--muted);font-size:13px;line-height:1.6;}
.ter-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;background:#DC2626;color:white;font-size:10px;font-weight:800;border-radius:var(--radius-full);margin-left:auto;padding:0 4px;}
@media(max-width:960px){.ter-stat-grid{grid-template-columns:1fr 1fr;}.ter-charts-row{grid-template-columns:1fr;}.ter-drawer{width:100vw;}}
@media(max-width:600px){.ter-stat-grid{grid-template-columns:1fr 1fr;}.ter-tbl th:nth-child(n+4),.ter-tbl td:nth-child(n+4){display:none;}.ter-search-inp{min-width:120px;margin-left:0;width:100%;}}
/* ── Quiz Review Table ─────────────────────────────────────────────────────── */
.qrt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.qrt-subtitle{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.4;}
.qrt-stats-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.qrt-stat{display:flex;flex-direction:column;align-items:center;padding:8px 14px;background:#F8F9FB;border-radius:var(--radius-lg);border:1.5px solid var(--border);min-width:68px;flex:1;}
.qrt-stat-val{font-size:17px;font-weight:800;color:var(--navy);line-height:1.2;}
.qrt-stat-lbl{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.45px;margin-top:2px;white-space:nowrap;}
.qrt-filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.qrt-search{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:12.5px;font-family:'Open Sans',sans-serif;color:var(--navy);background:#FAFAFA;outline:none;transition:border-color 0.18s;width:200px;max-width:100%;}
.qrt-search:focus{border-color:#0F62FE;background:white;}
.qrt-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:5px 13px;border-radius:999px;border:1.5px solid var(--border);background:white;color:var(--muted);cursor:pointer;transition:all 0.15s;line-height:1.3;white-space:nowrap;}
.qrt-pill:hover{border-color:#0F62FE;color:#0F62FE;}
.qrt-pill.active{background:#111827;border-color:#111827;color:white;}
.qrt-empty-cell{text-align:center;padding:40px 20px;}
.qrt-empty-icon{font-size:34px;opacity:0.28;display:block;margin-bottom:8px;}
.qrt-empty-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.qrt-empty-sub{font-size:12.5px;color:var(--muted);line-height:1.6;}
/* Inline header stats (reference style) */
.qrt-head-right{display:flex;align-items:center;gap:0;flex-wrap:nowrap;}
.qrt-head-stat{display:flex;flex-direction:column;align-items:center;padding:0 16px;border-right:1px solid var(--border);flex-shrink:0;}
.qrt-head-stat:last-of-type{border-right:none;margin-right:14px;}
.qrt-head-stat-val{font-size:17px;font-weight:800;color:var(--navy);line-height:1.1;}
.qrt-head-stat-lbl{font-size:10px;color:var(--muted);font-weight:500;margin-top:2px;white-space:nowrap;}
/* Play button */
.qrt-play-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid #bfdbfe;border-radius:50%;background:white;color:#2563eb;cursor:pointer;transition:all 0.15s;padding-left:2px;flex-shrink:0;}
.qrt-play-btn:hover{background:#eff6ff;border-color:#2563eb;}
/* Quiz status — reuses ert-status pill classes */
@media(max-width:760px){.qrt-tbl-hide{display:none;}.qrt-head-right{flex-wrap:wrap;gap:8px;}.qrt-head-stat{padding:0 10px;}.qrt-search{width:100%;}}

/* ── ERC new states: cleared / needs-reattempt ── */
.erc-count-badge.cleared{background:#dbeafe;color:#1d4ed8;}
.erc-item.cleared-item{border-color:#bfdbfe;background:#eff6ff;}
.erc-item.cleared-item:hover{box-shadow:0 3px 14px rgba(29,78,216,0.1);transform:translateY(-1px);}
.erc-item.reattempt-item{border-color:#fed7aa;background:#fff7ed;}
.erc-item.reattempt-item:hover{box-shadow:0 3px 14px rgba(234,88,12,0.1);}
.erc-ready-badge.cleared{background:#dbeafe;color:#1d4ed8;}
.erc-ready-badge.reattempt{background:#ffedd5;color:#9a3412;}
.erc-cleared-dot{width:7px;height:7px;border-radius:50%;background:#2563eb;flex-shrink:0;}
.erc-reattempt-dot{width:7px;height:7px;border-radius:50%;background:#ea580c;flex-shrink:0;}
.erc-btn-view{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:#eff6ff;color:#1d4ed8;border:1.5px solid #bfdbfe;border-radius:var(--radius-lg);font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;flex-shrink:0;white-space:nowrap;}
.erc-btn-view:hover{background:#dbeafe;border-color:#93c5fd;}
.erc-btn-reattempt{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:#fff7ed;color:#c2410c;border:1.5px solid #fed7aa;border-radius:var(--radius-lg);font-family:'Open Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;flex-shrink:0;white-space:nowrap;}
.erc-btn-reattempt:hover{background:#ffedd5;border-color:#fdba74;}

/* ── Exam Review Table (ERT) — mirrors Quiz Review Table styles ── */
.ert-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.ert-subtitle{font-size:12px;color:var(--muted);margin-top:3px;}
.ert-stats-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.ert-stat{background:#f8f9ff;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:9px 14px;text-align:center;flex:1;min-width:70px;}
.ert-stat-val{font-size:17px;font-weight:800;color:var(--navy);line-height:1;}
.ert-stat-lbl{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600;}
.ert-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.ert-pill{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:white;color:var(--muted);cursor:pointer;font-family:'Open Sans',sans-serif;transition:all 0.15s;}
.ert-pill.active{background:var(--navy);color:white;border-color:var(--navy);}
.ert-pill:hover:not(.active){background:#f8f9ff;border-color:var(--navy);color:var(--navy);}
.ert-search{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-lg);font-size:13px;font-family:'Open Sans',sans-serif;color:var(--navy);background:white;width:200px;transition:border-color 0.15s;outline:none;}
.ert-search:focus{border-color:var(--navy);}
.ert-score-val{font-size:13.5px;font-weight:800;letter-spacing:-0.2px;}
.ert-score-val.s-strong{color:#15803d;}.ert-score-val.s-passed{color:#1d4ed8;}.ert-score-val.s-practice{color:#d97706;}.ert-score-val.s-risk{color:#dc2626;}
.ert-grade{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:12px;font-weight:800;flex-shrink:0;}
.ert-grade.gA{background:#dcfce7;color:#15803d;}.ert-grade.gB{background:#dbeafe;color:#1d4ed8;}.ert-grade.gC{background:#e0f2fe;color:#0369a1;}.ert-grade.gD{background:#fef9c3;color:#854d0e;}.ert-grade.gF{background:#fee2e2;color:#dc2626;}
.ert-status{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.ert-status.s-cleared{background:#dbeafe;color:#1d4ed8;}.ert-status.s-passed{background:#dcfce7;color:#15803d;}.ert-status.s-reattempt{background:#ffedd5;color:#c2410c;}.ert-status.s-failed{background:#fee2e2;color:#dc2626;}
.ert-act{display:flex;gap:6px;flex-wrap:wrap;}
.ert-act-btn{padding:5px 11px;border-radius:var(--radius-lg);font-size:11.5px;font-weight:700;border:1.5px solid var(--border);background:white;color:var(--navy);cursor:pointer;font-family:'Open Sans',sans-serif;transition:all 0.15s;white-space:nowrap;}
.ert-act-btn:hover{border-color:var(--navy);background:#f8f9ff;}
.ert-act-btn.ert-primary{background:var(--navy);color:white;border-color:var(--navy);}
.ert-act-btn.ert-primary:hover{background:#0f2040;}
.ert-act-btn.ert-reattempt{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.ert-act-btn.ert-reattempt:hover{background:#ffedd5;}
.ert-empty-cell{padding:32px 16px;text-align:center;}
.ert-empty-icon{font-size:34px;opacity:0.28;display:block;margin-bottom:8px;}
.ert-empty-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.ert-empty-sub{font-size:12.5px;color:var(--muted);line-height:1.6;}
.ert-result-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;}
.ert-result-badge.cleared{background:#dbeafe;color:#1d4ed8;}.ert-result-badge.not-cleared{background:#fee2e2;color:#dc2626;}.ert-result-badge.retake{background:#ffedd5;color:#c2410c;}
@media(max-width:760px){.ert-tbl-hide{display:none;}.ert-stats-strip{gap:6px;}.ert-stat{min-width:56px;padding:7px 10px;}.ert-stat-val{font-size:15px;}.ert-search{width:100%;}}
/* Exam Review: keep Last Attempted column visible (override ert-tbl-hide at 760px) */
@media(max-width:760px){#dbExamReview .ert-tbl-hide{display:table-cell!important;}}

/* ════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE STYLES
   Breakpoints: 768 px (tablet/large phone) · 480 px (small phone)
   ════════════════════════════════════════════════════════════ */

/* ── Sidebar overlay handled in main CSS (line 866) ── */

@media(max-width:768px){

  /* ────────── HEADER ────────── */
  header{left:0!important;}
  /* Hamburger: shown per login state (ld-active / ld-teacher-active) — no !important override needed */

  /* ────────── DASHBOARD LAYOUT — RESTORE CORRECT SCROLL MODEL ────────── */
  /* dash-layout: fixed-height viewport clip (same as original) */
  .dash-layout{padding-left:0!important;height:calc(100vh - 58px);height:calc(100dvh - 58px);overflow:hidden;}
  /* dash-content: the ONLY scroll container for all normal views */
  .dash-content{padding:14px 0;overflow-y:auto;overflow-x:hidden;}

  /* Uniform content width: all dash-views match the quiz banner width */
  .dash-view{padding-left:clamp(12px,4vw,20px)!important;padding-right:clamp(12px,4vw,20px)!important;max-width:100%!important;box-sizing:border-box;}

  /* ────────── DASHBOARD HOME ────────── */
  .db-header{padding:14px 0 10px;flex-wrap:wrap;gap:8px;}
  .db-title{font-size:20px;}
  .db-subtitle{font-size:12px;}
  .db-upload-btn{padding:7px 12px;font-size:12px;gap:4px;}
  .db-go-quiz{padding:7px 12px;font-size:12px;gap:4px;}
  .db-stats-row{grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 10px;}
  .db-stat-chip{padding:14px 12px;gap:10px;}
  .db-stat-icon{width:38px;height:38px;border-radius:10px;}
  .db-stat-val{font-size:18px;}
  .db-stat-label{font-size:11px;}
  .db-subj-prog-card{min-width:130px;padding:13px 14px;}
  .db-subj-prog-pct{font-size:19px;}
  .db-bottom-row{grid-template-columns:1fr;gap:14px;}
  /* Session table — hide less critical columns */
  .db-sess-tbl-wrap{-webkit-overflow-scrolling:touch;}
  .db-sess-tbl th:nth-child(n+5),.db-sess-tbl td:nth-child(n+5){display:none;}
  .db-sess-tbl th,.db-sess-tbl td{padding:10px 10px;}
  .db-sess-act-btn{padding:5px 10px;font-size:11.5px;}

  /* ────────── QUIZ REVIEW TABLE ────────── */
  /* Quiz Review shows ALL columns on mobile — table scrolls horizontally */
  #dbQuizReview .db-sess-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #dbQuizReview .db-sess-tbl{min-width:660px;}
  #dbQuizReview .db-sess-tbl th,
  #dbQuizReview .db-sess-tbl td{display:table-cell!important;padding:10px 8px;}
  #dbQuizReview .qrt-tbl-hide{display:table-cell!important;}
  .ert-head{flex-direction:column;align-items:stretch;gap:8px;}
  .ert-search{width:100%;box-sizing:border-box;}
  .ert-stats-strip{flex-wrap:wrap;gap:6px;}
  .ert-stat{min-width:calc(50% - 6px);flex:1 1 calc(50% - 6px);}

  /* ────────── EXAM REVIEW TABLE ────────── */
  /* Exam Review shows ALL columns on mobile — table scrolls horizontally */
  #dbExamReview .db-sess-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #dbExamReview .db-sess-tbl{min-width:700px;}
  #dbExamReview .db-sess-tbl th,
  #dbExamReview .db-sess-tbl td{display:table-cell!important;padding:10px 8px;}
  #dbExamReview .ert-tbl-hide{display:table-cell!important;}
  /* Previous Sessions shows ALL columns on mobile — table scrolls horizontally */
  #dbSessTblWrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #dbSessTbl{min-width:580px;}
  #dbSessTbl th,#dbSessTbl td{display:table-cell!important;padding:10px 8px;}

  /* ────────── QUIZ FULL-BLEED SESSION PICKER (qnl-full) ────────── */
  /* dash-content.qnl-full-content: override desktop overflow:hidden so it scrolls on mobile */
  .dash-content.qnl-full-content{overflow-y:auto!important;overflow-x:hidden!important;height:100%!important;padding:0!important;align-items:stretch!important;}
  /* Break the inner overflow:hidden / flex chain so content flows at natural height into dash-content */
  .dash-content.qnl-full-content #dashViewQuiz{overflow:visible!important;height:auto!important;flex:none!important;min-height:0;padding:0!important;max-width:100%!important;width:100%!important;}
  #dashViewQuiz.qnl-full #quizPaneTake{overflow:visible!important;height:auto!important;flex:none!important;}
  #dashViewQuiz.qnl-full .quiz-inner-row{overflow:visible!important;height:auto!important;flex:none!important;padding:0!important;gap:0;}
  #dashViewQuiz.qnl-full .quiz-wrap{overflow:visible!important;height:auto!important;flex:none!important;padding:0!important;max-width:100%!important;}
  #dashViewQuiz.qnl-full #quizSelector{overflow:visible!important;height:auto!important;flex:none!important;}
  #dashViewQuiz.qnl-full #quizStep2Card{overflow:visible!important;height:auto!important;flex:none!important;border-radius:0;}
  /* Sticky header inside the session picker */
  #dashViewQuiz.qnl-full .qnl-header{position:sticky;top:0;z-index:10;background:white;}

  /* ── Mobile note-picker: single-panel slide pattern ────────────── */
  /* Default state: show only the note list (left panel), hide detail (right) */
  .qnl-body{flex-direction:column!important;overflow:visible!important;height:auto!important;}
  .qnl-left{width:100%!important;min-width:0!important;max-height:none!important;border-right:none!important;border-bottom:none;overflow-y:visible!important;}
  .qnl-right{display:none!important;padding:20px 16px!important;overflow:visible!important;min-height:0;height:auto!important;}
  /* Detail state (has-detail on qnl-body): hide list, show detail */
  .qnl-body.has-detail .qnl-left{display:none!important;}
  .qnl-body.has-detail .qnl-right{display:block!important;}
  /* Placeholder: compact on mobile since we hide it via has-detail pattern */
  .qnl-placeholder{height:auto!important;min-height:140px;}

  .qnl-header{padding:12px 16px;}
  /* Quiz subject cards step 1 */
  .quiz-sel-card{padding:16px 14px;}
  /* Quiz question taking */
  .quiz-taking-inner{padding:20px 16px 40px;}
  .quiz-q-card{padding:18px 16px;}
  .quiz-q-text{font-size:15px;}
  /* Matching question: stack vertically on mobile */
  .quiz-match-row{flex-direction:column;align-items:stretch;gap:8px;}
  .quiz-match-left{min-width:0;white-space:normal;}
  .quiz-match-select{width:100%;font-size:15px;}
  .quiz-match-arrow{display:none;}
  .quiz-count-btn{width:46px;height:46px;font-size:14px;}
  .qnl-start-btn{padding:13px;}

  /* ────────── TEACHER DASHBOARD ────────── */
  /* Restore original model: layout clips, content scrolls */
  .teacher-dash-layout{padding-left:0!important;height:calc(100vh - 58px);height:calc(100dvh - 58px);overflow:hidden;}
  .teacher-dash-content{padding:14px 0;overflow-y:auto;overflow-x:hidden;}
  .teacher-content-wrap{padding:0 clamp(12px,4vw,16px);}
  /* Teacher Students Review */
  .ter-stat-grid{grid-template-columns:1fr 1fr;}
  .ter-charts-row{grid-template-columns:1fr;}
  .ter-mode-switcher{width:100%;justify-content:stretch;}
  .ter-mode-btn{flex:1;}
  /* Teacher roster filters */
  .ter-filters{flex-direction:column;align-items:stretch;}
  .ter-filter-sel,.ter-search-inp{width:100%;box-sizing:border-box;}
  /* Teacher table: hide non-essential columns */
  .ter-tbl th:nth-child(n+5),.ter-tbl td:nth-child(n+5){display:none;}
  /* Drawers full width on mobile */
  .ter-drawer,#ertReviewDrawer{width:100vw!important;max-width:100vw;}

  /* ────────── QUIZ ─────────────────────────────────────────────── */
  /* Hide quiz perf sidebar on mobile (3 stats cards stacked above subject grid
     causes excessive scrolling; same data is available on the Dashboard view) */
  .quiz-perf-sidebar{display:none!important;}

  /* Fix quiz view horizontal overflow — remove double-padded inner wrappers */
  .quiz-inner-row{padding-left:0!important;padding-right:0!important;}
  .quiz-wrap{padding-left:0!important;padding-right:0!important;padding-bottom:40px!important;}
  /* Greeting card — prevent long name from overflowing */
  .quiz-greeting{padding:12px 14px;gap:12px;}
  .qg-text{min-width:0;flex:1;overflow:hidden;}
  .qg-name{font-size:var(--font-size-body-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .qg-quote{font-size:var(--font-size-body-s);}
  /* Subject cards — compact layout for narrow screens */
  .quiz-subj-card{padding:12px 14px;gap:10px;}
  .quiz-subj-card .qs-icon{width:38px;height:38px;font-size:var(--font-size-body-l);border-radius:10px;}
  .quiz-subj-card .qs-action{margin-left:4px;}
  .qs-start-btn{padding:8px 14px;font-size:13px;border-radius:var(--radius-xl);}
  /* My Performance stats tab — reuse exam stats layout (already responsive) */
  .quiz-stats-tab-wrap{padding:0;}

  /* ────────── STUDY / AI ASSIST ────────── */
  .ms-body{grid-template-columns:1fr;}
  .ms-left{border-right:none;border-bottom:1.5px solid var(--border);}
  .ms-stats-strip{grid-template-columns:repeat(2,1fr);}
  .ms-chip:nth-child(2){border-right:none;}
  .ms-chip{border-bottom:1.5px solid var(--border);}
  .ms-chip:nth-child(3),.ms-chip:nth-child(4){border-bottom:none;}

  /* ────────── RESOURCES ────────── */
  .res-grid{grid-template-columns:1fr 1fr;}
  .res-filter-bar{flex-direction:column;gap:8px;}
  .res-search,.res-filter-select{width:100%;box-sizing:border-box;}
  .res-container{padding:0 16px 60px;}

  /* ────────── EXAM BUILDER ────────── */
  .exam-mode-grid{grid-template-columns:1fr;}
  .exam-resource-grid{grid-template-columns:1fr;}
  .exam-b-grid{grid-template-columns:1fr;}
  #examTopicsGrid{grid-template-columns:1fr;}
  .exam-stats-chips{grid-template-columns:repeat(2,1fr);}

  /* ────────── GENERAL MODALS / DRAWERS ────────── */
  .modal-card,.plan-modal-content,.upm-card{margin:0 12px;width:calc(100% - 24px);max-width:calc(100vw - 24px);box-sizing:border-box;}

  /* ────────── TABLE TOUCH UX ────────── */
  /* Table wrappers: horizontal scroll with touch support */
  .db-sess-tbl-wrap,.ert-tbl-wrap,.qrt-tbl-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%;touch-action:pan-x pan-y;}
  /* qsi-card (wraps quiz/exam review tables) must not clip horizontal scroll */
  .qsi-card{overflow:visible;}

  /* ────────── BUTTONS — touch target ────────── */
  .tbl-act-btn{padding:7px 12px;font-size:11.5px;}
  .ert-act{flex-wrap:wrap;gap:4px;}

  /* ────────── EXAM READINESS CARDS ────────── */
  .erc-grid{grid-template-columns:1fr 1fr;}
  .erc-mini-grid{grid-template-columns:1fr 1fr;}

  /* ────────── PUBLIC RESOURCES / LANDING ────────── */
  .res-hero h1{font-size:clamp(26px,6vw,40px);}
  .pub-res-cta-box{padding:28px 20px;margin:32px 0 0;}
}

@media(max-width:480px){

  /* ────────── SMALLEST PHONES ────────── */
  .db-header{gap:6px;}
  /* Show upload button as icon-only on tiny screens instead of hiding it */
  .db-upload-btn{font-size:0;gap:0;padding:8px;min-width:36px;justify-content:center;}
  .db-upload-btn svg{flex-shrink:0;}
  .db-stats-row{gap:8px;}
  .db-stat-chip{padding:12px 10px;gap:8px;}
  .db-stat-val{font-size:16px;}
  .db-stat-icon{width:34px;height:34px;border-radius:8px;}
  .db-subj-prog-card{min-width:110px;padding:11px 12px;}
  .db-subj-prog-pct{font-size:17px;}

  /* ────────── QUIZ ────────── */
  .quiz-taking-inner{padding:16px 12px 32px;}
  .quiz-q-text{font-size:14px;}

  /* ────────── STATS STRIPS ────────── */
  .ert-stats-strip{gap:5px;}
  .ert-stat{min-width:calc(50% - 5px);}

  /* ────────── RESOURCES ────────── */
  .res-grid{grid-template-columns:1fr;}
  .res-type-pills{flex-wrap:wrap;gap:6px;}
  .res-pill{font-size:11.5px;padding:5px 12px;}

  /* ────────── TEACHER ────────── */
  .ter-stat-grid{grid-template-columns:1fr;}
  .ter-tbl th:nth-child(n+4),.ter-tbl td:nth-child(n+4){display:none;}

  /* ────────── TABLES ────────── */
  .db-sess-tbl th,.db-sess-tbl td{padding:9px 8px;font-size:12px;}
  .db-sess-tbl th:nth-child(n+4),.db-sess-tbl td:nth-child(n+4){display:none;}
  /* Quiz Review: keep all columns visible even on tiny screens */
  #dbQuizReview .db-sess-tbl th,
  #dbQuizReview .db-sess-tbl td{display:table-cell!important;padding:8px 7px;font-size:11.5px;}
  #dbQuizReview .qrt-tbl-hide{display:table-cell!important;}
  /* Exam Review: keep all columns visible on tiny screens */
  #dbExamReview .db-sess-tbl th,
  #dbExamReview .db-sess-tbl td{display:table-cell!important;padding:8px 7px;font-size:11.5px;}
  #dbExamReview .ert-tbl-hide{display:table-cell!important;}
  /* Previous Sessions: keep all columns visible on tiny screens */
  #dbSessTbl th,#dbSessTbl td{display:table-cell!important;padding:8px 6px;font-size:11.5px;}

  /* ────────── MODALS ────────── */
  .modal-card,.plan-modal-content,.upm-card{margin:0;width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;position:fixed;bottom:0;left:0;right:0;max-height:90dvh;overflow-y:auto;}
}
/* Grammar Lab pages — hidden until navigated to */
#grammarLabPage,#grammarTopicPage{display:none!important;}
/* Override: show when gl-visible class is added by JS */

/* ── Study Feature ── */
#dashViewStudy{display:none;}
#dashViewStudy.active{display:block;}
.study-screen{display:none;}
.study-screen.active{display:block;}

/* Breadcrumb */
.study-breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap;}
.study-breadcrumb a{color:var(--navy);font-weight:600;cursor:pointer;text-decoration:none;}
.study-breadcrumb a:hover{color:var(--gold);}
.study-breadcrumb span{color:var(--muted);}

/* Study hero banner */
.study-hero{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#60a5fa 100%);border-radius:20px;padding:30px 36px;margin-bottom:28px;color:white;position:relative;overflow:hidden;}
.study-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,0.07);}
.study-hero::after{content:'';position:absolute;bottom:-70px;right:80px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,0.05);}
.study-hero-emoji{font-size:32px;margin-bottom:10px;position:relative;}
.study-hero h1{font-family:'Open Sans',sans-serif;font-size:21px;font-weight:800;margin:0 0 5px;position:relative;}
.study-hero p{font-size:13px;opacity:0.82;margin:0;position:relative;}

/* Subject cards v2 */
.study-subj-card{background:white;border:1.5px solid var(--border);border-radius:18px;cursor:pointer;overflow:hidden;transition:box-shadow 0.18s,transform 0.16s;}
.study-subj-card:hover{box-shadow:0 10px 32px rgba(0,0,0,0.13);transform:translateY(-4px);}
.study-subj-card-banner{height:90px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;overflow:hidden;}
.study-subj-card-banner::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.08);}
.study-subj-card-body{padding:16px 18px 20px;}
.study-subj-card-name{font-weight:700;font-size:15px;color:var(--navy);margin-bottom:3px;}
.study-subj-card-desc{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5;}
.study-subj-prog-bar{background:#f1f5f9;border-radius:100px;height:5px;overflow:hidden;margin-bottom:6px;}
.study-subj-prog-fill{height:100%;border-radius:100px;transition:width 0.5s ease;}
.study-subj-prog-label{font-size:11px;color:var(--muted);}
.study-subj-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid #f1f5f9;}
.study-subj-card-units{font-size:11px;font-weight:600;color:var(--muted);}
.study-subj-card-arrow{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#2563eb;}

/* Level cards v2 */
.study-lv-card{background:white;border:1.5px solid var(--border);border-radius:16px;padding:16px 20px;cursor:pointer;transition:box-shadow 0.18s,border-color 0.18s,transform 0.15s;display:flex;align-items:center;gap:16px;}
.study-lv-card:hover{box-shadow:0 6px 22px rgba(0,0,0,0.10);border-color:#3b82f6;transform:translateY(-2px);}
.study-lv-card-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.study-lv-card-icon span{font-size:17px;font-weight:800;color:white;}
.study-lv-card-body{flex:1;min-width:0;}
.study-lv-card-title{font-weight:700;font-size:14px;color:var(--navy);margin-bottom:2px;}
.study-lv-card-meta{font-size:11px;color:var(--muted);margin-bottom:8px;}
.study-lv-prog-bar{background:#f1f5f9;border-radius:100px;height:4px;overflow:hidden;margin-bottom:4px;}
.study-lv-prog-fill{height:100%;border-radius:100px;}
.study-lv-prog-label{font-size:10px;color:var(--muted);}
.study-lv-card-arrow{color:#94a3b8;flex-shrink:0;}

/* Subject cards (legacy — keep for fallback) */
.study-subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:8px;}
.study-subject-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-2xl);padding:28px 22px;cursor:pointer;transition:box-shadow 0.18s,transform 0.15s;display:flex;flex-direction:column;gap:12px;}
.study-subject-card:hover{box-shadow:0 6px 24px rgba(0,0,0,0.09);transform:translateY(-2px);}
.study-subject-icon{width:44px;height:44px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--gold),#78A9FF);display:flex;align-items:center;justify-content:center;font-size:20px;}
.study-subject-name{font-family:var(--font-heading);font-size:16px;font-weight:700;color:var(--navy);}
.study-subject-meta{font-size:12px;color:var(--muted);}

/* Level cards */
.study-level-title{font-weight:700;font-size:15px;color:var(--navy);margin-bottom:2px;}
.study-level-meta{font-size:12px;color:var(--muted);}
.study-level-arrow{color:#ccc;flex-shrink:0;}

/* Units list */
.study-units-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.study-unit-row{background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);padding:14px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:box-shadow 0.15s,border-color 0.15s;}
.study-unit-row:hover{box-shadow:0 3px 14px rgba(0,0,0,0.07);border-color:var(--gold);}
.study-unit-num{min-width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#78A9FF);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;flex-shrink:0;}
.study-unit-info{flex:1;min-width:0;}
.study-unit-title{font-weight:600;font-size:14px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.study-unit-pills{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap;}
.study-unit-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--radius-full);background:#F4F4F4;color:var(--muted);}
.study-unit-pill.has-content{background:#EEF4FF;color:var(--gold);}
.study-unit-arrow{color:var(--muted);font-size:16px;flex-shrink:0;}

/* Units screen level header card */
.study-units-hdr{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);border-radius:18px;padding:24px 28px;margin-bottom:22px;color:white;position:relative;overflow:hidden;}
.study-units-hdr::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.07);}
.study-units-hdr::after{content:'';position:absolute;bottom:-50px;right:60px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,0.05);}
.study-units-hdr-breadcrumb{font-size:11px;opacity:0.65;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px;position:relative;}
.study-units-hdr-title{font-family:'Open Sans',sans-serif;font-size:22px;font-weight:800;margin:0 0 18px;position:relative;}
.study-units-hdr-row{display:flex;align-items:center;gap:20px;position:relative;}
.study-units-hdr-prog{flex:1;}
.study-units-hdr-prog-bar{background:rgba(255,255,255,0.22);border-radius:100px;height:7px;overflow:hidden;margin-bottom:5px;}
.study-units-hdr-prog-fill{background:white;height:100%;border-radius:100px;transition:width 0.4s ease;}
.study-units-hdr-prog-lbl{font-size:11px;opacity:0.75;}
.study-units-hdr-score{text-align:right;flex-shrink:0;}
.study-units-hdr-score-val{font-size:24px;font-weight:800;line-height:1;}
.study-units-hdr-score-lbl{font-size:10px;opacity:0.65;margin-top:2px;}

/* Unit card v2 */
.study-unit-card{background:white;border:1.5px solid var(--border);border-radius:14px;padding:14px 18px 14px 22px;cursor:pointer;transition:box-shadow 0.15s,transform 0.14s,border-color 0.15s;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
.study-unit-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#e2e8f0;border-radius:14px 0 0 14px;}
.study-unit-card.ucard-done::before{background:#10b981;}
.study-unit-card.ucard-partial::before{background:#f59e0b;}
.study-unit-card:hover{box-shadow:0 6px 22px rgba(0,0,0,0.09);transform:translateY(-2px);border-color:#93c5fd;}
.study-unit-card-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.study-unit-card.ucard-done .study-unit-card-num{background:linear-gradient(135deg,#10b981,#059669);}
.study-unit-card.ucard-partial .study-unit-card-num{background:linear-gradient(135deg,#f59e0b,#d97706);}
.study-unit-card-body{flex:1;min-width:0;}
.study-unit-card-title{font-weight:600;font-size:14px;color:var(--navy);margin-bottom:1px;}
.study-unit-card-sub{font-size:11px;color:var(--muted);margin-bottom:6px;}
.study-unit-card-tags{display:flex;gap:5px;flex-wrap:wrap;}
.study-unit-card-tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;background:#f1f5f9;color:#64748b;}
.study-unit-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.study-unit-card-score{font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.study-unit-card-score.done{color:#059669;background:#f0fdf4;border:1.5px solid #6ee7b7;}
.study-unit-card-score.partial{color:#d97706;background:#fffbeb;border:1.5px solid #fcd34d;}
.study-unit-mini-bar{width:56px;background:#f1f5f9;border-radius:100px;height:3px;overflow:hidden;}
.study-unit-mini-fill{height:100%;border-radius:100px;}

/* Unit detail header */
.study-unit-detail-hdr{background:white;border:1.5px solid #e2e8f0;border-radius:18px;padding:22px 26px;margin-bottom:24px;display:flex;align-items:flex-start;gap:18px;}
.study-unit-detail-badge{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:white;flex-shrink:0;font-family:'Open Sans',sans-serif;}
.study-unit-detail-info{flex:1;min-width:0;}
.study-unit-detail-title{font-family:'Open Sans',sans-serif;font-size:22px;font-weight:800;color:#0f172a;margin-bottom:5px;line-height:1.2;}
.study-unit-detail-sub{font-size:14px;color:#64748b;line-height:1.5;}

/* Tab bar - pill style */
.study-tab-bar{display:flex;background:#f1f5f9;border-radius:12px;padding:4px;margin-bottom:26px;gap:4px;}
.study-tab-btn{flex:1;padding:10px 18px;font-size:14px;font-weight:600;color:#64748b;background:none;border:none;border-radius:9px;cursor:pointer;font-family:var(--font-body);transition:all 0.18s;border-bottom:none;}
.study-tab-btn.active{background:white;color:#1e3a8a;box-shadow:0 2px 8px rgba(0,0,0,0.09);}
.study-tab-btn:hover:not(.active){color:#334155;background:rgba(255,255,255,0.5);}
.study-tab-pane{display:none;}
.study-tab-pane.active{display:block;}

/* Learn tab */
.study-intro-box{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-left:4px solid #3b82f6;border-radius:0 14px 14px 0;padding:18px 22px;margin-bottom:24px;font-size:16px;color:#1e3a5f;line-height:1.75;font-weight:500;}
.study-rules-grid{display:flex;flex-direction:column;gap:16px;}
.study-rule-card{background:white;border:1.5px solid #e2e8f0;border-radius:16px;padding:22px 24px 22px 28px;position:relative;overflow:hidden;transition:box-shadow 0.15s,border-color 0.15s;}
.study-rule-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#3b82f6,#1d4ed8);border-radius:16px 0 0 16px;}
.study-rule-card:hover{box-shadow:0 4px 18px rgba(59,130,246,0.09);border-color:#bfdbfe;}
.study-rule-title{font-family:'Open Sans',sans-serif;font-weight:700;font-size:17px;color:#0f172a;margin-bottom:8px;}
.study-rule-explanation{font-size:15.5px;color:#334155;line-height:1.75;margin-bottom:14px;}
.study-rule-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.study-rule-example{display:inline-flex;align-items:center;gap:5px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:5px 12px;font-size:13.5px;}
.study-rule-example .ex-from{font-weight:600;color:#0f172a;}
.study-rule-example .ex-arrow{color:#94a3b8;font-size:12px;}
.study-rule-example .ex-to{font-weight:700;color:#2563eb;}
.study-note-box{background:#fffbeb;border:1.5px solid #fcd34d;border-radius:14px;padding:16px 20px;margin-top:20px;display:flex;gap:12px;align-items:flex-start;}
.study-note-box-icon{font-size:18px;flex-shrink:0;}
.study-note-box-text{font-size:15px;color:#78350f;line-height:1.65;}

/* Practice tab */
.study-exercise-card{background:white;border:1.5px solid #e2e8f0;border-radius:16px;padding:22px 24px;margin-bottom:16px;}
.study-exercise-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.study-exercise-title{font-family:'Open Sans',sans-serif;font-weight:700;font-size:16px;color:#0f172a;}
.study-exercise-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#3b82f6;background:#eff6ff;padding:3px 10px;border-radius:20px;}
.study-exercise-instruction{font-size:15px;color:#475569;margin-bottom:16px;line-height:1.6;font-style:italic;background:#f8fafc;border-radius:10px;padding:12px 16px;}
.study-q-row{padding:12px 0;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:8px;}
.study-q-row:last-child{border-bottom:none;padding-bottom:0;}
.study-q-text{font-size:15.5px;color:#1e293b;font-weight:500;line-height:1.6;}
.study-answer-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#2563eb;cursor:pointer;font-weight:600;padding:6px 14px;border:1.5px solid #bfdbfe;border-radius:20px;background:#eff6ff;transition:all 0.15s;width:fit-content;}
.study-answer-toggle:hover{background:#dbeafe;border-color:#93c5fd;}
.study-no-practice{padding:32px;text-align:center;color:var(--muted);font-size:13px;background:white;border:1.5px solid var(--border);border-radius:var(--radius-xl);}

/* Action buttons */
.study-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.study-action-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:var(--radius-full);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);border:none;transition:all 0.18s;}
.study-action-quiz{background:var(--navy);color:white;}
.study-action-quiz:hover{opacity:0.88;}
.study-action-exam{background:white;color:var(--navy);border:1.5px solid var(--border);}
.study-action-exam:hover{border-color:var(--navy);background:#F4F4F4;}

/* Page title row */
.study-page-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.study-page-hd h2{font-family:var(--font-heading);font-size:20px;font-weight:800;color:var(--navy);margin:0;}

@media(max-width:600px){
  .study-subjects-grid{grid-template-columns:1fr 1fr;}
  .study-tab-btn{padding:8px 14px;font-size:12px;}
  .study-actions{flex-direction:column;}
  .study-action-btn{justify-content:center;}
}

/* Study unit quiz modal */
.sq-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.52);z-index:9500;align-items:center;justify-content:center;padding:16px;}
.sq-overlay.open{display:flex;}
.sq-box{background:#fff;border-radius:var(--radius-2xl);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.18);}
.sq-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sq-title{font-family:var(--font-heading);font-size:15px;font-weight:800;color:var(--navy);}
.sq-close{width:30px;height:30px;border-radius:50%;border:none;background:#F4F4F4;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted);transition:background 0.15s;}
.sq-close:hover{background:#E8E8E8;}
.sq-progress-wrap{padding:14px 22px 0;flex-shrink:0;}
.sq-progress-bar{height:5px;border-radius:3px;background:#EEF2FF;overflow:hidden;margin-bottom:6px;}
.sq-progress-fill{height:100%;background:var(--gold);border-radius:3px;transition:width 0.3s ease;}
.sq-progress-label{font-size:11px;color:var(--muted);font-weight:600;}
.sq-body{flex:1;overflow-y:auto;padding:22px;}
.sq-ex-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;}
.sq-instruction{font-size:13px;color:#555;margin-bottom:16px;line-height:1.5;}
.sq-q-text{font-size:16px;font-weight:600;color:var(--navy);line-height:1.5;margin-bottom:16px;}
.sq-input{width:100%;box-sizing:border-box;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:15px;font-family:var(--font-body);color:var(--navy);outline:none;transition:border-color 0.15s;}
.sq-input:focus{border-color:var(--gold);}
.sq-input.correct{border-color:#22C55E;background:#F0FDF4;}
.sq-input.wrong{border-color:#EF4444;background:#FEF2F2;}
.sq-feedback{margin-top:12px;padding:10px 14px;border-radius:var(--radius-md);font-size:13px;font-weight:600;display:none;}
.sq-feedback.correct{display:block;background:#F0FDF4;color:#166534;}
.sq-feedback.wrong{display:block;background:#FEF2F2;color:#991B1B;}
.sq-feedback.open{display:block;background:#F0F4FF;color:#1E40AF;}
.sq-footer{padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0;display:flex;justify-content:flex-end;}
.sq-btn{padding:9px 22px;border-radius:var(--radius-full);font-size:14px;font-weight:700;border:none;cursor:pointer;font-family:var(--font-body);}
.sq-btn-primary{background:var(--navy);color:#fff;}
.sq-btn-primary:hover{background:#2D2D2D;}
/* Result screen */
.sq-result{text-align:center;padding:24px 0 8px;}
.sq-result-score{font-size:48px;font-weight:800;color:var(--navy);font-family:var(--font-heading);line-height:1;}
.sq-result-label{font-size:15px;color:var(--muted);margin-top:8px;margin-bottom:20px;}
.sq-result-msg{font-size:16px;font-weight:600;color:var(--navy);margin-bottom:24px;}
/* Score badge on unit page */
.study-score-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:700;background:#EEF2FF;color:var(--gold);border:1.5px solid #C7D7FF;}

#grammarLabPage.gl-visible,#grammarTopicPage.gl-visible{display:block!important;}

/* ══════════════════════════════════════════════════════
   PUBLIC NAV — MOBILE HAMBURGER & DRAWER
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   PUBLIC NAV — MOBILE HAMBURGER
══════════════════════════════════════════════════════ */
.pub-hamburger{display:none;width:38px;height:38px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.2);border-radius:10px;color:white;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.18s;}
.pub-hamburger:hover{background:rgba(255,255,255,0.15);}
.ld-active .pub-hamburger,.ld-teacher-active .pub-hamburger{display:none!important;}

#pubNavDrawer{display:none;position:fixed;top:58px;left:0;right:0;background:#161616;border-bottom:1px solid rgba(15,98,254,0.3);z-index:199;padding:8px 0 16px;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
#pubNavDrawer.open{display:block;animation:pubNavSlide 0.18s ease;}
@keyframes pubNavSlide{from{transform:translateY(-6px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.pub-nav-item{display:block;width:100%;padding:15px 24px;color:rgba(255,255,255,0.82);font-size:16px;font-weight:500;background:none;border:none;text-align:left;cursor:pointer;transition:color 0.15s,background 0.15s;letter-spacing:0.1px;}
.pub-nav-item:hover{color:white;background:rgba(255,255,255,0.06);}
.pub-nav-item.gl-nav-link{color:#78A9FF;font-weight:600;}
.pub-nav-item.gl-nav-link:hover{background:rgba(120,169,255,0.1);}
.pub-nav-divider{height:1px;background:rgba(255,255,255,0.08);margin:6px 16px;}
.pub-nav-start-btn{display:block;margin:12px 16px 0;padding:13px 24px;background:#0F62FE;color:white;border:none;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer;text-align:center;width:calc(100% - 32px);transition:background 0.18s;}
.pub-nav-start-btn:hover{background:#0353E9;}

@media(max-width:900px){.pub-hamburger{display:flex;}}

/* ══════════════════════════════════════════════════════
   HERO — MOBILE REDESIGN (single column, logo first)
══════════════════════════════════════════════════════ */
@media(max-width:640px){
  .hero-inner{display:flex!important;flex-direction:column!important;align-items:center!important;padding:40px 22px 52px!important;gap:0!important;min-height:auto!important;}
  .hero-right{order:-1;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin-bottom:30px;}
  .hero-visual-card{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;width:auto!important;}
  .hero-visual-logo{width:148px!important;height:148px!important;margin:0 auto!important;border:3px solid rgba(15,98,254,0.55)!important;box-shadow:0 0 40px rgba(15,98,254,0.45),0 0 80px rgba(15,98,254,0.15)!important;}
  .hero-visual-name{font-size:15px!important;margin-top:12px!important;text-align:center;}
  .hero-visual-sub{font-size:10px!important;letter-spacing:2px!important;text-align:center;}
  .hero-left{width:100%;text-align:center;}
  .hero-powered{justify-content:center!important;flex-wrap:wrap;gap:6px!important;margin-bottom:20px!important;}
  .hero-powered-lbl{font-size:10px!important;letter-spacing:1.5px!important;margin-right:0!important;width:100%;text-align:center;margin-bottom:2px;}
  .hero-ai-badge{padding:5px 13px!important;font-size:12px!important;gap:5px!important;}
  .hero-ai-badge svg{width:13px!important;height:13px!important;}
  .hero-left h1{font-size:34px!important;margin-bottom:14px!important;line-height:1.1!important;}
  .hero-left>p{font-size:15px!important;line-height:1.75!important;margin-bottom:28px!important;max-width:100%!important;}
  .hero-btns{flex-direction:column!important;gap:11px!important;margin-bottom:26px!important;}
  .btn-hero-p,.btn-hero-s{width:100%!important;padding:15px 24px!important;font-size:16px!important;text-align:center;box-sizing:border-box;}
  .hero-social-proof{justify-content:center!important;}
}