/* AbiLearn — Design System v55 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ─── TOKENS ─────────────────────────────────── */
:root {
  --ink:        #1A1035;
  --accent:     #5B47DE;
  --accent-h:   #4A38CF;
  --accent-bg:  #E8E2FF;

  --bg:         #F5F3FF;
  --surface:    #FFFFFF;
  --surface-2:  #F0EDFF;

  --text:       #1A1035;
  --text-2:     #3D3568;
  --muted:      #6B6398;

  --border:     #DDD8F8;
  --border-2:   #C5C0EC;

  --shadow-sm:  0 1px 3px rgba(26,16,53,.06);
  --shadow:     0 3px 10px rgba(26,16,53,.08);
  --shadow-lg:  0 8px 24px rgba(26,16,53,.10);

  --maths:      #DC2626;
  --maths-l:    #FEF2F2;
  --science:    #0284C7;
  --science-l:  #E0F2FE;
  --english:    #C2720D;
  --english-l:  #FEF3E2;
  --social:     #059669;
  --social-l:   #ECFDF5;
  --correct:    #059669;
  --correct-l:  #ECFDF5;
  --wrong:      #DC2626;
  --wrong-l:    #FEF2F2;

  --badge-2m-bg: #DCFCE7; --badge-2m-txt: #16A34A;
  --badge-3m-bg: #FEF3C7; --badge-3m-txt: #D97706;
  --badge-5m-bg: #FEE2E2; --badge-5m-txt: #DC2626;

  --radius-sm:  5px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  --ease:       cubic-bezier(.4,0,.2,1);
  --dur:        200ms;
  --transition: all var(--dur) var(--ease);

  /* Legacy aliases kept for JS-generated HTML */
  --purple-600: var(--accent);
  --purple-700: var(--accent-h);
  --purple-500: #6B5EE6;
  --purple-400: #8B7FF0;
  --purple-300: #B0A6F8;
  --purple-100: var(--accent-bg);
  --purple-50:  #F5F3FF;
  --dark:       #0B0720;
  --card-bg:    var(--surface);
  --card:       var(--surface);
  --neon:       var(--accent);
  --shadow-glow: none;
  --nav-h: 64px;
}

/* ─── DARK MODE ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #E4EAF6;
    --accent:     #6B79E8;
    --accent-h:   #7D8BEF;
    --accent-bg:  #1A2050;

    --bg:         #0C1220;
    --surface:    #131D30;
    --surface-2:  #1A2540;

    --text:       #E4EAF6;
    --text-2:     #A8B4CC;
    --muted:      #6B7A96;

    --border:     #1E2D45;
    --border-2:   #28394F;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.25);
    --shadow:     0 3px 10px rgba(0,0,0,.30);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.35);

    --maths-l:    #1A0A0A;
    --science-l:  #041420;
    --english-l:  #1A0F04;
    --social-l:   #041A10;
    --correct-l:  #041A10;
    --wrong-l:    #1A0A0A;

    --badge-2m-bg: #14532D; --badge-2m-txt: #86EFAC;
    --badge-3m-bg: #451A03; --badge-3m-txt: #FDE68A;
    --badge-5m-bg: #450A0A; --badge-5m-txt: #FCA5A5;

    --card-bg: var(--surface);
    --card:    var(--surface);
    --purple-50:  #141E38;
    --purple-100: var(--accent-bg);
    --dark:       #050C18;
  }
}
:root[data-theme="dark"] {
  --ink:        #E4EAF6;
  --accent:     #6B79E8;
  --accent-h:   #7D8BEF;
  --accent-bg:  #1A2050;
  --bg:         #0C1220;
  --surface:    #131D30;
  --surface-2:  #1A2540;
  --text:       #E4EAF6;
  --text-2:     #A8B4CC;
  --muted:      #6B7A96;
  --border:     #1E2D45;
  --border-2:   #28394F;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.25);
  --shadow:     0 3px 10px rgba(0,0,0,.30);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.35);
  --maths-l:    #1A0A0A;
  --science-l:  #041420;
  --english-l:  #1A0F04;
  --social-l:   #041A10;
  --correct-l:  #041A10;
  --wrong-l:    #1A0A0A;
  --badge-2m-bg: #14532D; --badge-2m-txt: #86EFAC;
  --badge-3m-bg: #451A03; --badge-3m-txt: #FDE68A;
  --badge-5m-bg: #450A0A; --badge-5m-txt: #FCA5A5;
  --card-bg: var(--surface);
  --card:    var(--surface);
  --purple-50:  #141E38;
  --purple-100: var(--accent-bg);
  --dark:       #050C18;
}

/* ─── RESET ───────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior:smooth; overflow-x:hidden;
  width:100%; height:100%;
  /* iOS Safari viewport fill */
  -webkit-text-size-adjust:100%;
  font-size:106.25%;
  /* Remove 300ms tap delay globally */
  touch-action:manipulation;
}
body {
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.65; font-size:16px;
  min-height:100dvh; min-height:-webkit-fill-available;
  width:100%; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
/* GPU hint for zoomable/interactive images */
img, canvas { will-change: auto; }
.app-tile-subject-img, .pdf-img-view, .pdf-canvas, [data-zoomable] { will-change: transform; }
/* Instant touch response — no 300ms delay, no tap flash */
button, a, [role="button"], .tab-btn, .chapter-header, .pdf-card, .card, .mcq-option, .mcq-opt, label,
.search-result-item, .progress-chapter-card, .map-item, .qbp-item, .lt-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* Base press feedback — catches any link/button not covered by a specific :active rule */
a:active:not(.app-subject-tile):not(.app-tool-card):not(.subject-card) {
  opacity: .75 !important;
  transition: opacity 55ms !important;
}
button:not(:disabled):active:not(.tab-btn):not(.mcq-opt):not(.chapter-header) {
  opacity: .75 !important;
  transition: opacity 55ms !important;
}
button { font-family:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:none; }

/* ─── SKIP NAV ────────────────────────────────── */
.skip-nav {
  position:absolute; top:-100%; left:1rem; z-index:10001;
  background:var(--accent); color:#fff;
  padding:.5rem 1.25rem; border-radius:0 0 8px 8px;
  font-size:.9rem; font-weight:600; text-decoration:none;
  transition:top .18s ease; white-space:nowrap;
}
.skip-nav:focus,.skip-nav:focus-visible { top:0; }

/* ─── NAVBAR ──────────────────────────────────── */
.navbar {
  height:64px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; position:sticky; top:0; z-index:1000;
  transition:transform .3s ease;
}
.logo { display:flex; align-items:center; gap:.65rem; }
.logo-img { width:40px; height:40px; object-fit:cover; border-radius:8px; }
.logo-text { font-size:1.35rem; font-weight:800; color:var(--text); letter-spacing:-.3px; }
.logo-text span { color:var(--accent); }

.nav-links { display:flex; gap:.1rem; list-style:none; align-items:center; }
.nav-links > li { position:relative; }
.nav-links a {
  color:var(--muted); padding:.42rem .8rem; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:500;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  display:flex; align-items:center; gap:.3rem;
}
.nav-links a:hover { color:var(--text); background:var(--surface-2); }
.nav-links a.active { color:var(--accent); font-weight:600; }

.nav-dropdown-toggle {
  background:none; border:none; color:var(--muted);
  padding:.42rem .8rem; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:500;
  display:flex; align-items:center; gap:.35rem;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  cursor:pointer; font-family:inherit;
}
.nav-dropdown-toggle:hover,
.nav-dropdown:hover .nav-dropdown-toggle { color:var(--text); background:var(--surface-2); }
.dropdown-arrow { font-size:.6rem; transition:transform .2s; }
.nav-dropdown:hover .dropdown-arrow { transform:rotate(180deg); }

.dropdown-menu {
  position:absolute; top:calc(100% + 6px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); min-width:220px; padding:.35rem;
  opacity:0; pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease);
  box-shadow:var(--shadow-lg); z-index:200;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.dd-open .dropdown-menu {
  opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .85rem; border-radius:var(--radius-sm);
  color:var(--text); font-size:.875rem;
  transition:background var(--dur) var(--ease);
}
.dropdown-menu a:hover { background:var(--surface-2); }

/* Subject color chips in dropdown — replace emoji with dot */
.sub-icon {
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:0; flex-shrink:0; position:relative;
}
.sub-icon::after {
  content:''; width:10px; height:10px; border-radius:50%; position:absolute;
}
.sub-icon.maths   { background:var(--maths-l); }
.sub-icon.maths::after   { background:var(--maths); }
.sub-icon.science { background:var(--science-l); }
.sub-icon.science::after { background:var(--science); }
.sub-icon.english { background:var(--english-l); }
.sub-icon.english::after { background:var(--english); }
.sub-icon.social  { background:var(--social-l); }
.sub-icon.social::after  { background:var(--social); }

.nav-right { display:flex; align-items:center; gap:.65rem; }

.search-bar { position:relative; }
.search-bar input {
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); padding:.4rem .9rem .4rem 1.9rem;
  border-radius:var(--radius); font-size:1rem;
  width:196px; transition:width var(--dur) var(--ease),border-color var(--dur) var(--ease);
  outline:none; font-family:inherit;
}
.search-bar input::placeholder { color:var(--muted); }
.search-bar input:focus { width:236px; border-color:var(--accent); background:var(--surface); }
.search-icon {
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--muted); font-size:.78rem;
}
.search-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); max-height:280px; overflow-y:auto;
  display:none; z-index:200; box-shadow:var(--shadow-lg);
}
.search-results.show { display:block; }
.search-result-item {
  padding:.65rem 1rem; cursor:pointer; border-bottom:1px solid var(--border);
  transition:background var(--dur) var(--ease);
}
.search-result-item:last-child { border-bottom:none; }
.search-result-item:hover { background:var(--surface-2); }
.result-subject {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent); margin-bottom:.1rem;
}
.result-title { font-size:.85rem; color:var(--text); font-weight:500; }

.btn-login {
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:.55rem 1rem; border-radius:var(--radius); font-size:.83rem; font-weight:600;
  min-height:44px; display:inline-flex; align-items:center;
  transition:var(--transition);
}
.btn-login:hover { border-color:var(--accent); color:var(--accent); }
.btn-signup {
  background:var(--accent); border:none; color:white;
  padding:.55rem 1.1rem; border-radius:var(--radius); font-size:.83rem; font-weight:600;
  min-height:44px; display:inline-flex; align-items:center;
  transition:background var(--dur) var(--ease);
}
.btn-signup:hover { background:var(--accent-h); }

.hamburger {
  display:none; background:none; border:none;
  padding:.65rem; flex-direction:column; gap:5px; cursor:pointer; flex-shrink:0;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.hamburger span { display:block; width:20px; height:1.5px; background:var(--text); border-radius:2px; transition:.2s ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

.mobile-menu { display:none; position:fixed; inset:0; top:calc(54px + env(safe-area-inset-top,0px)); z-index:998; background:rgba(0,0,0,.4); }
.mobile-menu.open { display:block; }
.mobile-menu-inner {
  background:var(--surface); max-width:280px; width:85%; height:100%;
  padding:1.25rem 1rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:.125rem;
  animation:mmSlideIn .2s ease; border-right:1px solid var(--border);
}
@keyframes mmSlideIn { from{transform:translateX(-100%)} to{transform:translateX(0)} }
.mobile-nav-link {
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem .9rem; font-size:.9rem; font-weight:600; color:var(--text);
  text-decoration:none; border-radius:var(--radius); border:none;
  background:none; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  min-height:44px; transition:background .15s;
}
.mobile-nav-link:hover { background:var(--surface-2); }
.mobile-sub-link { padding-left:2.2rem; font-size:.84rem; font-weight:500; color:var(--muted); }
.mobile-nav-section {
  font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; padding:.85rem .9rem .2rem;
}
.mobile-menu-actions {
  margin-top:auto; padding-top:1rem; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:.5rem;
}
.mobile-menu-actions .btn-login,
.mobile-menu-actions .btn-signup { width:100%; justify-content:center; text-align:center; }

/* ─── HERO BAND (full-screen) ─────────────────── */
.hero {
  background:#180F3A;
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  padding:clamp(2.5rem,6vh,4rem) 0;
}
.hero-blobs,.blob,.blob-1,.blob-2,.blob-3 { display:none !important; }

.hero-grid {
  max-width:1200px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
  position:relative; z-index:1;
  padding:0 clamp(1rem,4vw,2.5rem);
}
.hero-left { max-width:600px; }
.hero-right { display:flex; align-items:center; justify-content:flex-end; }

/* ── Eyebrow ── */
.hero-badge {
  display:inline-block;
  font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.32); margin-bottom:.9rem;
  background:none; border:none; padding:0;
}

/* ── Headline ── */
.hero h1 {
  font-size:clamp(2.4rem,4.6vw,4.5rem);
  font-weight:900; line-height:1.08;
  color:#fff; margin-bottom:1.2rem;
  letter-spacing:-.025em; text-wrap:balance;
}
.hero h1 .highlight {
  color:#C4B5FF;
  background:none !important;
  -webkit-background-clip:unset !important;
  -webkit-text-fill-color:unset !important;
  background-clip:unset !important;
}

/* ── Body text ── */
.hero p {
  font-size:clamp(.9rem,1.5vw,1.05rem);
  color:rgba(255,255,255,.52);
  max-width:460px; margin-bottom:2rem; line-height:1.8;
}

/* ── CTAs ── */
.hero-cta { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:1.65rem; }

/* ── Value row ── */
.hero-value-row {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.3rem .55rem; font-size:.73rem; color:rgba(255,255,255,.27); font-weight:500;
}
.hvr-dot { color:rgba(255,255,255,.12); }

/* ── Hero product visual ── */
.hero-product {
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:1.35rem;
  width:100%; max-width:360px;
}
.hprod-header {
  padding-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:.9rem;
}
.hprod-subject {
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:.42rem; margin-bottom:.5rem;
  color:rgba(255,255,255,.42);
}
.hprod-subj-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.hprod-ch-name {
  font-size:.88rem; font-weight:700; color:#E4EAF6;
  line-height:1.3; margin-bottom:.72rem;
}
.hprod-progress-row { display:flex; align-items:center; gap:.6rem; }
.hprod-pbar {
  flex:1; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden;
}
.hprod-pfill { height:100%; border-radius:2px; }
.hprod-pfill.maths-fill { background:#EF4444; }
.hprod-pct { font-size:.68rem; font-weight:700; min-width:24px; text-align:right; }
.hprod-pct.maths-color { color:#F87171; }
.hprod-resources { margin-bottom:.82rem; }
.hprod-res {
  display:flex; align-items:center; gap:.62rem;
  padding:.48rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.hprod-res:last-child { border-bottom:none; }
.hprod-res-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.18);
}
.hprod-res.done .hprod-res-dot { background:#34D399; border-color:#34D399; }
.hprod-res.active .hprod-res-dot { border-color:#A5B4FC; }
.hprod-res-body { flex:1; min-width:0; }
.hprod-res-name { font-size:.8rem; font-weight:600; color:#D1D9EE; }
.hprod-res-meta { font-size:.67rem; color:rgba(255,255,255,.28); margin-top:.06rem; }
.hprod-res-badge {
  font-size:.62rem; font-weight:700; padding:.12rem .48rem;
  border-radius:4px; white-space:nowrap; flex-shrink:0; min-width:30px; text-align:center;
}
.hprod-res-badge.done { background:rgba(52,211,153,.14); color:#6EE7B7; }
.hprod-res-badge.next { background:rgba(165,180,252,.14); color:#A5B4FC; }
.hprod-footer {
  padding-top:.82rem; border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between;
}
.hprod-continue { font-size:.79rem; font-weight:700; color:#93C5FD; }
.hprod-next-ch { font-size:.67rem; color:rgba(255,255,255,.22); }


/* ─── CONTAINERS & SECTIONS ───────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem); }
.section { padding:clamp(2.5rem,5vw,4.5rem) 0; }
.section-head { margin-bottom:clamp(1.25rem,3vw,2rem); }
.section-label {
  display:block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent); margin-bottom:.5rem;
}
.section-title {
  font-size:clamp(1.3rem,2.5vw,1.65rem); font-weight:800; color:var(--text); letter-spacing:-.3px;
  padding-left:.85rem; border-left:2px solid var(--accent);
  line-height:1.2; text-wrap:balance;
}
.section-sub { color:var(--muted); margin-top:.55rem; font-size:.88rem; max-width:560px; line-height:1.7; }

/* ─── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  border:none; border-radius:var(--radius); cursor:pointer;
  font-family:inherit; font-weight:600; transition:var(--transition);
  text-decoration:none; white-space:nowrap;
  min-height:44px;
}
.btn-sm  { padding:.38rem 1rem;    font-size:.82rem; }
.btn-md  { padding:.52rem 1.2rem;  font-size:.88rem; }
.btn-lg  { padding:.62rem 1.45rem; font-size:.9rem; }
.btn-xl  { padding:.72rem 1.7rem;  font-size:.95rem; }
.btn-primary { background:var(--accent); color:white; box-shadow:none; }
.btn-primary:hover { background:var(--accent-h); transform:none; box-shadow:none; }
.btn-primary:active,.btn-glass:active,.btn-outline-purple:active,.btn-white:active { transform:scale(.94) !important; opacity:.82 !important; transition-duration:80ms !important; }
.btn-glass { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:white; }
.btn-glass:hover { background:rgba(255,255,255,.18); }
.btn-outline-purple { background:transparent; border:1.5px solid var(--accent); color:var(--accent); }
.btn-outline-purple:hover { background:var(--accent); color:white; }
.btn-white { background:white; color:var(--accent); }
.btn-white:hover { background:var(--accent-bg); }
.btn-secondary { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); }
.btn-secondary:hover { border-color:var(--border-2); color:var(--text); }
.btn:disabled { opacity:.4; cursor:not-allowed; }

/* ─── SUBJECT CARDS ───────────────────────────── */
.subjects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (min-width:1100px) { .subjects-grid { grid-template-columns:repeat(4,1fr); } }
.subject-card {
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
  display:block; position:relative; overflow:hidden;
}
/* Thin subject color bar at top */
.subject-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; opacity:1;
  box-shadow:none !important; /* override old inset shadow */
}
.subject-card.maths::before   { background:var(--maths); }
.subject-card.science::before { background:var(--science); }
.subject-card.english::before { background:var(--english); }
.subject-card.social::before  { background:var(--social); }
.subject-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-2); }
.subject-card:active { transform:scale(.95) !important; opacity:.82 !important; transition-duration:80ms !important; }

.card-top { padding:1.5rem 1.5rem .85rem; }
.card-icon-wrap {
  width:32px; height:32px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:0; margin-bottom:.85rem; position:relative;
  box-shadow:none !important;
}
.card-icon-wrap::after { content:''; width:13px; height:13px; border-radius:3px; position:absolute; }
.subject-card.maths   .card-icon-wrap { background:var(--maths-l); }
.subject-card.maths   .card-icon-wrap::after { background:var(--maths); }
.subject-card.science .card-icon-wrap { background:var(--science-l); }
.subject-card.science .card-icon-wrap::after { background:var(--science); }
.subject-card.english .card-icon-wrap { background:var(--english-l); }
.subject-card.english .card-icon-wrap::after { background:var(--english); }
.subject-card.social  .card-icon-wrap { background:var(--social-l); }
.subject-card.social  .card-icon-wrap::after { background:var(--social); }

.card-title { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.card-desc  { font-size:.8rem; color:var(--muted); line-height:1.55; }
.card-meta  { padding:0 1.5rem .85rem; display:flex; gap:.6rem; }
.meta-pill {
  font-size:.7rem; font-weight:600; padding:.2rem .6rem;
  border-radius:4px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--border);
}
.card-progress { padding:0 1.5rem .85rem; }
.progress-row { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-bottom:.3rem; }
.progress-track { height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
.progress-fill  { height:100%; border-radius:2px; transition:width .8s var(--ease); }
.subject-card.maths   .progress-fill { background:var(--maths); }
.subject-card.science .progress-fill { background:var(--science); }
.subject-card.english .progress-fill { background:var(--english); }
.subject-card.social  .progress-fill { background:var(--social); }
.card-footer {
  padding:.82rem 1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.continue-btn {
  background:none; border:none; font-size:.82rem; font-weight:600;
  transition:transform var(--dur) var(--ease);
  display:flex; align-items:center; gap:.3rem; padding:0;
}
.subject-card.maths   .continue-btn { color:var(--maths); }
.subject-card.science .continue-btn { color:var(--science); }
.subject-card.english .continue-btn { color:var(--english); }
.subject-card.social  .continue-btn { color:var(--social); }
.subject-card:hover .continue-btn { transform:translateX(3px); }
.card-chapters { font-size:.74rem; color:var(--muted); }

/* ─── SUBJECT CARDS (NEW scard-* layout) ─────── */
.scard-top {
  padding:1.25rem 1.25rem .7rem;
  display:flex; align-items:flex-start; gap:.75rem;
}
.scard-top .card-icon-wrap { margin:0; flex-shrink:0; }
.scard-name { font-size:.98rem; font-weight:700; color:var(--text); }
.scard-count { font-size:.71rem; color:var(--muted); margin-top:.1rem; }
.scard-chips {
  padding:0 1.25rem .7rem;
  display:flex; flex-wrap:wrap; gap:.32rem;
}
.scard-chip {
  padding:.16rem .52rem; border-radius:4px; font-size:.66rem; font-weight:600;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
}
.scard-chapters {
  padding:0 1.25rem .7rem; display:flex; flex-direction:column; gap:.3rem;
}
.scard-ch { display:flex; align-items:center; gap:.5rem; }
.scard-ch-num {
  width:20px; height:20px; border-radius:4px; font-size:.62rem; font-weight:800;
  color:white; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; line-height:1;
}
.scard-ch-title {
  font-size:.77rem; color:var(--text-2); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scard-ch-dot {
  width:7px; height:7px; border-radius:50%;
  border:1.5px solid var(--border-2); flex-shrink:0;
}
.scard-ch.done .scard-ch-dot { background:var(--correct); border-color:var(--correct); }
.scard-more { font-size:.69rem; color:var(--muted); padding-left:1.5rem; }
.scard-footer { padding:.82rem 1.25rem; border-top:1px solid var(--border); }
.scard-pbar-row {
  display:flex; justify-content:space-between; font-size:.68rem;
  color:var(--muted); margin-bottom:.28rem;
}
.scard-ptrack {
  height:3px; background:var(--surface-2); border-radius:2px; overflow:hidden;
}
.scard-pfill { height:100%; border-radius:2px; transition:width .8s var(--ease); }
.subject-card.maths   .scard-pfill { background:var(--maths); }
.subject-card.science .scard-pfill { background:var(--science); }
.subject-card.english .scard-pfill { background:var(--english); }
.subject-card.social  .scard-pfill { background:var(--social); }

/* ─── WHY SECTION ─────────────────────────────── */
.trust-section { background:transparent; border:none; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.why-card {
  display:flex; align-items:flex-start; gap:1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.25rem 1.4rem; transition:border-color var(--dur) var(--ease);
  box-shadow:none; transform:none;
}
.why-card:hover { border-color:var(--accent); box-shadow:none; transform:none; }
.why-icon {
  width:34px; height:34px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0; position:relative;
}
.why-icon::after { content:''; width:11px; height:11px; border-radius:2px; background:currentColor; }
.why-title { font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.3rem; }
.why-desc  { font-size:.82rem; color:var(--muted); line-height:1.6; }
.cbse-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:white;
  padding:.38rem 1.1rem; border-radius:var(--radius);
  font-size:.82rem; font-weight:600; box-shadow:none;
}

/* ─── TIPS GRID ───────────────────────────────── */
.tips-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.tip-card {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:1.25rem; border:1px solid var(--border);
  box-shadow:none;
  transition:border-color var(--dur) var(--ease);
}
.tip-card:hover { border-color:var(--accent); transform:none; box-shadow:none; }
.tip-icon { height:24px; display:flex; align-items:center; margin-bottom:.65rem; font-size:0; }
.tip-icon::before { content:''; width:22px; height:3px; background:var(--accent); border-radius:2px; }
.tip-card h4 { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:.3rem; }
.tip-card p  { font-size:.8rem; color:var(--muted); line-height:1.6; }

/* ─── SUBJECT PAGE HEADER ─────────────────────── */
.subject-header { padding:2rem; color:white; position:relative; overflow:hidden; }
.subject-header::before { display:none; }
.subject-header.maths   { background:var(--maths); }
.subject-header.science { background:var(--science); }
.subject-header.english { background:var(--english); }
.subject-header.social  { background:var(--social); }
.subject-header-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; position:relative; z-index:1;
}
.subject-header-icon {
  width:48px; height:48px; background:rgba(255,255,255,.2);
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0; /* keep emoji but at readable size */
  border:none;
}
.subject-breadcrumb { font-size:.78rem; opacity:.7; display:flex; align-items:center; gap:.35rem; margin-bottom:.3rem; }
.subject-breadcrumb a { color:inherit; }
.subject-breadcrumb a:hover { opacity:1; }
.subject-header h1 { font-size:1.7rem; font-weight:800; letter-spacing:-.3px; }
.subject-header p  { font-size:.87rem; opacity:.8; margin-top:.18rem; }

/* ─── TABS ────────────────────────────────────── */
.tabs-bar {
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:calc(64px + env(safe-area-inset-top,0px)); z-index:99;
  box-shadow:none;
}
.tabs-scroll {
  max-width:1200px; margin:0 auto; padding:0 1.5rem;
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
}
.tabs-scroll::-webkit-scrollbar { display:none; }
.tab-btn {
  background:none; border:none; border-bottom:2px solid transparent;
  padding:.82rem 1rem; font-size:.84rem; font-weight:600;
  color:var(--muted); cursor:pointer;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  white-space:nowrap; font-family:inherit; letter-spacing:.01em;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  min-height:44px; display:inline-flex; align-items:center;
}
.tab-btn:hover { color:var(--text); }
.tab-btn:active { transform:scale(.93) !important; opacity:.78 !important; transition-duration:70ms !important; }
.tab-btn.active               { color:var(--accent);  border-bottom-color:transparent; }
.tab-btn.active.maths-t       { color:var(--maths);   border-bottom-color:transparent; }
.tab-btn.active.science-t     { color:var(--science); border-bottom-color:transparent; }
.tab-btn.active.english-t     { color:var(--english); border-bottom-color:transparent; }
.tab-btn.active.social-t      { color:var(--social);  border-bottom-color:transparent; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ─── FORMULA SHEET ───────────────────────────── */
.formula-sheet { display:flex; flex-direction:column; gap:1.1rem; }
.formula-chapter-block {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem; box-shadow:none; border:1px solid var(--border);
}
.formula-chapter-title {
  font-size:.93rem; font-weight:700; color:var(--text);
  margin-bottom:.8rem; display:flex; align-items:center; gap:.6rem; justify-content:space-between;
}
.formula-num {
  width:24px; height:24px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; color:white; flex-shrink:0;
}
.formula-grid { display:flex; flex-direction:column; gap:.4rem; }
.formula-pill {
  background:var(--surface-2); border-left:2px solid var(--accent);
  padding:.52rem 1rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:'Courier New',monospace; font-size:.85rem; color:var(--text);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}

/* ─── NOTES ───────────────────────────────────── */
.notes-grid { display:flex; flex-direction:column; gap:1.1rem; }
.notes-block {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem; box-shadow:none; border:1px solid var(--border);
}
.notes-chapter-title { font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.8rem; display:flex; align-items:center; gap:.6rem; }
.notes-list { list-style:none; display:flex; flex-direction:column; gap:.38rem; }
.notes-list li {
  padding:.48rem 1rem .48rem 1.3rem; background:var(--surface-2);
  border-radius:var(--radius-sm); font-size:.85rem; line-height:1.6;
  position:relative; border-left:2px solid var(--accent);
}

/* ─── MCQ CARDS ───────────────────────────────── */
.mcq-grid { display:flex; flex-direction:column; gap:1rem; }
.mcq-card {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem; box-shadow:none; border:1px solid var(--border);
}
.mcq-chapter-label {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:.45rem;
}
.mcq-q { font-size:.92rem; font-weight:600; color:var(--text); margin-bottom:.8rem; line-height:1.55; }
.mcq-opts { display:flex; flex-direction:column; gap:.32rem; }
.mcq-opt {
  padding:.65rem .9rem; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; font-size:.88rem; min-height:44px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
  background:var(--surface); display:flex; align-items:center; gap:.6rem;
  font-family:inherit; text-align:left; width:100%;
}
.mcq-opt:hover:not(.disabled) { border-color:var(--accent); background:var(--accent-bg); }
.mcq-opt:active:not(.disabled) { transform:scale(.97) !important; background:var(--accent-bg) !important; border-color:var(--accent) !important; transition-duration:60ms !important; }
.mcq-opt.correct { border-color:var(--correct); background:var(--correct-l); color:#065F46; }
.mcq-opt.wrong   { border-color:var(--wrong);   background:var(--wrong-l);   color:#991B1B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mcq-opt.correct { color:#6EE7B7; }
  :root:not([data-theme="light"]) .mcq-opt.wrong   { color:#FCA5A5; }
}
:root[data-theme="dark"] .mcq-opt.correct { color:#6EE7B7; }
:root[data-theme="dark"] .mcq-opt.wrong   { color:#FCA5A5; }
.mcq-opt.disabled { cursor:default; pointer-events:none; }
.opt-letter {
  width:22px; height:22px; border-radius:50%;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; flex-shrink:0; color:var(--muted);
}
.mcq-opt.correct .opt-letter { background:var(--correct); color:white; }
.mcq-opt.wrong   .opt-letter { background:var(--wrong);   color:white; }
.mcq-feedback {
  margin-top:.55rem; padding:.48rem .85rem;
  border-radius:var(--radius-sm); font-size:.82rem; display:none; font-weight:500;
}
.mcq-feedback.show    { display:block; }
.mcq-feedback.correct { background:var(--correct-l); color:#065F46; border:1px solid #10B981; }
.mcq-feedback.wrong   { background:var(--wrong-l);   color:#991B1B; border:1px solid #EF4444; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mcq-feedback.correct { color:#6EE7B7; border-color:#065F46; }
  :root:not([data-theme="light"]) .mcq-feedback.wrong   { color:#FCA5A5; border-color:#991B1B; }
}
:root[data-theme="dark"] .mcq-feedback.correct { color:#6EE7B7; border-color:#065F46; }
:root[data-theme="dark"] .mcq-feedback.wrong   { color:#FCA5A5; border-color:#991B1B; }

/* ─── CHAPTER ACCORDION ───────────────────────── */
.chapters-list { display:flex; flex-direction:column; gap:.65rem; }
.chapter-item {
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden;
  transition:border-color var(--dur) var(--ease); box-shadow:none;
}
.chapter-item:hover { box-shadow:none; border-color:var(--border-2); }
.chapter-header {
  display:flex; align-items:center; padding:1rem 1.35rem;
  cursor:pointer; gap:.85rem;
  transition:background var(--dur) var(--ease); user-select:none;
}
.chapter-header:hover { background:var(--surface-2); }
.chapter-header:active { background:var(--surface-2) !important; opacity:.82 !important; transition-duration:60ms !important; }
.chapter-num {
  width:28px; height:28px; border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.76rem; color:white; flex-shrink:0;
}
.nm-maths,.nm-ff { background:var(--maths); }
.nm-fp    { background:var(--accent); }
.nm-science { background:var(--science); }
.nm-english { background:var(--english); }
.nm-social  { background:var(--social); }
.chapter-info { flex:1; min-width:0; }
.chapter-title { font-size:.9rem; font-weight:700; color:var(--text); }
.chapter-sub   { font-size:.74rem; color:var(--muted); margin-top:.08rem; }
.chapter-done-btn {
  background:none; border:1.5px solid var(--border); border-radius:50%;
  width:44px; height:44px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:transparent; transition:var(--transition); flex-shrink:0;
}
.chapter-done-btn.done { background:var(--correct); border-color:var(--correct); color:white; }
.chapter-toggle { color:var(--muted); font-size:.72rem; transition:transform .2s; flex-shrink:0; }
.chapter-item.open .chapter-toggle { transform:rotate(180deg); }
.chapter-body {
  max-height:0; overflow:hidden;
  transition:max-height .4s var(--ease),padding .3s; padding:0 1.35rem;
}
.chapter-item.open .chapter-body { max-height:3000px; padding:0 1.35rem 1.35rem; }
.chapter-content { border-top:1px solid var(--border); padding-top:1.1rem; }
.kp-section,.fm-section,.mcq-section { margin-bottom:1.1rem; }
.kp-section h4,.fm-section h4,.mcq-section h4 {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin-bottom:.5rem; font-weight:700;
}
.kp-list { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.kp-list li {
  padding:.43rem .9rem .43rem 1.25rem; background:var(--surface-2);
  border-radius:var(--radius-sm); font-size:.83rem; position:relative; line-height:1.55;
  border-left:2px solid var(--accent);
}
.fm-pill {
  background:var(--surface-2); border-left:2px solid var(--accent);
  padding:.48rem .9rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-family:'Courier New',monospace; font-size:.83rem; margin-bottom:.3rem; color:var(--text);
}

/* ─── COMING SOON ─────────────────────────────── */
.coming-soon {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:3.5rem 2rem; text-align:center; border:1.5px dashed var(--border); box-shadow:none;
}
.coming-soon .cs-icon { font-size:0; margin-bottom:1rem; display:block; }
.coming-soon .cs-icon::before { content:'—'; font-size:1.5rem; color:var(--border-2); display:block; }
.coming-soon h3 { font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.45rem; }
.coming-soon p  { color:var(--muted); font-size:.87rem; max-width:380px; margin:0 auto 1.25rem; }

/* ─── MOST IMPORTANT ──────────────────────────── */
.mi-chapter-block {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; margin-bottom:.85rem;
}
.mi-chapter-hdr {
  display:flex; align-items:center; gap:.6rem;
  padding:.68rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--border);
}
.mi-ch-num {
  width:24px; height:24px; border-radius:5px;
  background:var(--science); color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; flex-shrink:0;
}
.mi-ch-title { font-size:.9rem; font-weight:700; color:var(--text); }
.mi-items { display:flex; flex-direction:column; }
.mi-item {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.68rem 1rem; border-bottom:1px solid var(--border);
  font-size:.86rem; line-height:1.6;
}
.mi-item:last-child { border-bottom:none; }
.mi-tag {
  font-size:.63rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.17rem .5rem; border-radius:4px; white-space:nowrap; flex-shrink:0; margin-top:3px;
}
.mi-text { color:var(--text); flex:1; }
.mi-text strong { font-weight:700; }

/* ─── TOPIC CARDS / SUMMARY ───────────────────── */
.important-topics { display:flex; flex-direction:column; gap:.85rem; }
.topic-card {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:1.1rem 1.4rem; border:1px solid var(--border); box-shadow:none;
  display:flex; align-items:flex-start; gap:.9rem;
}
.topic-badge {
  background:var(--accent); color:white; border-radius:var(--radius-sm);
  padding:.23rem .6rem; font-size:.7rem; font-weight:700; white-space:nowrap; flex-shrink:0;
}
.topic-text { font-size:.87rem; color:var(--text); line-height:1.6; }
.summary-grid { display:flex; flex-direction:column; gap:.75rem; }
.summary-card { background:var(--surface); border-radius:var(--radius-lg); padding:1.1rem 1.4rem; border:1px solid var(--border); }
.summary-card-title { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:.6rem; display:flex; align-items:center; gap:.6rem; }
.summary-points { display:flex; flex-direction:column; gap:.3rem; }
.summary-point { font-size:.82rem; color:var(--muted); padding-left:1rem; position:relative; line-height:1.5; }
.summary-point::before { content:'–'; position:absolute; left:0; color:var(--accent); }

/* ─── ENGLISH ─────────────────────────────────── */
.english-reader-tabs { display:flex; gap:.5rem; margin-bottom:1.25rem; }
.reader-tab-btn {
  padding:.43rem 1.1rem; border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface); font-size:.82rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:var(--transition); font-family:inherit;
  min-height:44px; display:inline-flex; align-items:center;
}
.reader-tab-btn.active { border-color:var(--english); color:var(--english); background:var(--english-l); }
.reader-tab-btn:active:not(.active) { transform:scale(.93) !important; opacity:.78 !important; transition-duration:60ms !important; }
.skill-card {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:1.5rem; border:1px solid var(--border); margin-bottom:.85rem;
}
.skill-card h3 { font-size:1rem; font-weight:700; margin-bottom:.6rem; color:var(--text); }
.skill-card p  { font-size:.87rem; color:var(--muted); line-height:1.65; }

/* ─── PDF CARDS ───────────────────────────────── */
.pdf-cards-grid { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.75rem; }
.pdf-card {
  display:flex; align-items:center; gap:.85rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.78rem 1rem; transition:border-color var(--dur) var(--ease);
  border-left:3px solid transparent;
}
.pdf-card:hover { border-left-color:var(--accent); border-color:var(--border-2); box-shadow:none; }
.pdf-card:active { transform:scale(.97) !important; opacity:.85 !important; transition-duration:60ms !important; }
.pdf-card-icon { display:none; }
.pdf-card-info { flex:1; min-width:0; }
.pdf-card-title { font-weight:600; font-size:.9rem; color:var(--text); margin-bottom:.1rem; }
.pdf-card-desc  { font-size:.75rem; color:var(--muted); }
.pdf-open-btn {
  background:transparent; color:var(--accent); border:1.5px solid var(--accent);
  padding:.55rem .85rem; border-radius:var(--radius-sm);
  font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
  transition:var(--transition); flex-shrink:0;
}
.pdf-open-btn:hover { background:var(--accent); color:white; }
.pdf-tick { font-size:.82rem; }
.pdf-done-circle {
  background:none; border:1.5px solid var(--border); border-radius:50%;
  width:44px; height:44px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:transparent; transition:var(--transition);
}
.pdf-done-circle.done { background:var(--correct); border-color:var(--correct); color:white; }
.pdf-empty-state {
  text-align:center; padding:2.5rem 1rem; background:var(--surface-2);
  border-radius:var(--radius-lg); border:1.5px dashed var(--border); margin-bottom:1.75rem;
}

/* ─── MCQ MODAL ───────────────────────────────── */
#mcqModal { display:none; position:fixed; inset:0; z-index:9998; }
#mcqModal.open { display:block; }
.mcq-modal-box { position:fixed; inset:0; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
.mcq-modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.72rem 1rem;
  background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0;
}
.mcq-modal-title-wrap { display:flex; flex-direction:column; min-width:0; }
.mcq-modal-title { font-weight:700; font-size:.95rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcq-modal-meta { font-size:.75rem; color:var(--muted); }
.mcq-score-pill {
  background:var(--accent); color:white;
  font-size:.75rem; font-weight:700; padding:.2rem .65rem; border-radius:4px; white-space:nowrap;
}
.mcq-modal-close {
  background:transparent; border:1px solid var(--border); color:var(--text);
  width:44px; height:44px; border-radius:50%; font-size:.95rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease); flex-shrink:0;
}
.mcq-modal-close:hover { background:var(--surface-2); }
.mcq-modal-body { flex:1; overflow-y:auto; padding:1rem; }

/* ─── QBANK MODAL ─────────────────────────────── */
#qbankModal,#mathsQBankModal,#socialQBankModal { display:none; position:fixed; inset:0; z-index:9998; }
#qbankModal.open,#mathsQBankModal.open,#socialQBankModal.open { display:block; }
/* ─── QBANK TABS ──────────────────────────────── */
.qbank-tabs { display:flex; gap:.5rem; margin-bottom:1.1rem; }
.qbank-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.65rem .4rem; border-radius:var(--radius);
  border:1.5px solid var(--border); background:var(--surface);
  font-family:inherit; cursor:pointer; transition:border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.qbank-tab-label { font-size:.78rem; font-weight:700; color:var(--muted); line-height:1; }
.qbank-tab-count { font-size:.65rem; font-weight:600; color:var(--muted); opacity:.65; line-height:1; }
.qbank-tab:hover:not(.active) { background:var(--surface-2); }
.qbank-tab:hover:not(.active) .qbank-tab-label { color:var(--text); }
.qbank-tab.active { border-color:var(--accent); background:rgba(91,71,222,.07); }
.qbank-tab.active .qbank-tab-label { color:var(--accent); }
.qbank-tab.active .qbank-tab-count { color:var(--accent); opacity:.75; }
.qbank-tab.active-2m { border-color:var(--badge-2m-txt); background:var(--badge-2m-bg); }
.qbank-tab.active-2m .qbank-tab-label { color:var(--badge-2m-txt); }
.qbank-tab.active-2m .qbank-tab-count { color:var(--badge-2m-txt); }
.qbank-tab.active-3m { border-color:var(--badge-3m-txt); background:var(--badge-3m-bg); }
.qbank-tab.active-3m .qbank-tab-label { color:var(--badge-3m-txt); }
.qbank-tab.active-3m .qbank-tab-count { color:var(--badge-3m-txt); }
.qbank-tab.active-5m { border-color:var(--badge-5m-txt); background:var(--badge-5m-bg); }
.qbank-tab.active-5m .qbank-tab-label { color:var(--badge-5m-txt); }
.qbank-tab.active-5m .qbank-tab-count { color:var(--badge-5m-txt); }
/* Section header below tabs */
.qbank-section-hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.8rem; padding-bottom:.55rem; border-bottom:1.5px solid var(--border);
}
.qbank-badge {
  font-size:.68rem; font-weight:800; letter-spacing:.05em;
  padding:.22rem .65rem; border-radius:4px; text-transform:uppercase;
}
.qbank-badge-2m { background:var(--badge-2m-bg); color:var(--badge-2m-txt); }
.qbank-badge-3m { background:var(--badge-3m-bg); color:var(--badge-3m-txt); }
.qbank-badge-5m { background:var(--badge-5m-bg); color:var(--badge-5m-txt); }
.qbank-count { font-size:.74rem; color:var(--muted); font-weight:600; }
/* Question list */
.qbank-list { display:flex; flex-direction:column; gap:.45rem; }
.qb-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.88rem 1rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color .15s;
}
.qb-item:hover { border-color:rgba(91,71,222,.22); }
.qb-num {
  flex-shrink:0; width:1.8rem; height:1.8rem; border-radius:50%;
  background:rgba(91,71,222,.09); color:var(--accent);
  font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center;
  line-height:1; margin-top:.1rem;
}
.qb-text { flex:1; font-size:.875rem; line-height:1.68; color:var(--text); margin:0; }
/* Desktop: larger font for question bank */
@media (min-width:1025px) {
  .qb-text { font-size:1.02rem; line-height:1.72; }
  .qb-num { width:2.1rem; height:2.1rem; font-size:.78rem; }
  .qbank-tab-label { font-size:.92rem; }
  .qbank-tab-count { font-size:.76rem; }
  .qbank-tabs { gap:.65rem; margin-bottom:1.3rem; }
  .qbank-tab { padding:.75rem .6rem; }
}

/* ─── ENGLISH NOTES (Grammar / Reading / Writing) ─── */
.eng-stack { display:flex; flex-direction:column; gap:.65rem; }
.eng-sub { color:var(--muted); font-size:.84rem; margin-bottom:1.1rem; }
.eng-acc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.eng-acc summary {
  padding:.9rem 1rem; font-size:.93rem; font-weight:700; color:var(--text);
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.eng-acc summary::-webkit-details-marker { display:none; }
.eng-acc summary::after { content:'›'; font-size:1.1rem; color:var(--muted); transform:rotate(90deg); transition:transform .2s; flex-shrink:0; }
.eng-acc[open] summary::after { transform:rotate(270deg); }
.eng-acc[open] summary { border-bottom:1px solid var(--border); color:var(--accent); }
.eng-acc-body { padding:1rem 1rem 1.1rem; overflow-x:auto; }
.eng-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.eng-table { width:100%; border-collapse:collapse; font-size:.82rem; min-width:320px; }
.eng-table th, .eng-table td { padding:.42rem .65rem; border:1px solid var(--border); vertical-align:top; }
.eng-table th { background:rgba(91,71,222,.07); font-weight:700; text-align:left; }
.eng-table tr:nth-child(even) td { background:rgba(91,71,222,.025); }
.eng-note { background:rgba(91,71,222,.06); padding:.65rem .88rem; border-radius:var(--radius-sm); border-left:3px solid var(--accent); font-size:.83rem; margin-top:.9rem; line-height:1.6; }
.eng-rule { background:rgba(245,158,11,.07); padding:.65rem .88rem; border-radius:var(--radius-sm); border-left:3px solid #F59E0B; font-size:.83rem; margin-top:.75rem; line-height:1.6; }
.eng-eg { background:rgba(4,120,87,.07); padding:.65rem .88rem; border-radius:var(--radius-sm); border-left:3px solid #059669; font-size:.83rem; margin-top:.75rem; line-height:1.6; font-style:italic; }
.eng-h3 { font-size:.88rem; font-weight:800; color:var(--text); margin:.9rem 0 .35rem; letter-spacing:.01em; }
.eng-h3:first-child { margin-top:0; }
.eng-list { padding-left:1.1rem; margin:.3rem 0; font-size:.84rem; line-height:1.7; }
.eng-format-box { font-family:monospace; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.75rem 1rem; font-size:.82rem; line-height:1.8; margin-top:.65rem; white-space:pre-wrap; }
.eng-badge { display:inline-block; font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.15rem .5rem; border-radius:3px; margin-right:.3rem; vertical-align:middle; }
.eng-badge-blue { background:rgba(59,130,246,.1); color:#2563EB; }
.eng-badge-green { background:rgba(4,120,87,.1); color:#059669; }
.eng-badge-orange { background:rgba(245,158,11,.1); color:#D97706; }
.eng-badge-red { background:rgba(220,38,38,.1); color:#DC2626; }
@media (min-width:1025px) {
  .eng-acc summary { font-size:1.02rem; padding:1rem 1.15rem; }
  .eng-table th, .eng-table td { padding:.5rem .75rem; font-size:.9rem; }
  .eng-note, .eng-rule, .eng-eg { font-size:.92rem; }
  .eng-list { font-size:.92rem; }
  .eng-format-box { font-size:.9rem; }
}

/* ─── PDF MODALS ──────────────────────────────── */
#pdfModal { display:none; position:fixed; inset:0; z-index:9999; overflow:hidden; }
#pdfModal.open { display:block; }
.pdf-modal-box { position:fixed; inset:0; background:#1A1A1A; overflow:hidden; animation: pdfModalIn .22s cubic-bezier(.2,.8,.4,1) both; }
@keyframes pdfModalIn {
  from { opacity:0; transform:scale(.97); }
  to   { opacity:1; transform:none; }
}

.pdf-modal-body { position:absolute; inset:0; overflow:auto; padding:.5rem; box-sizing:border-box; touch-action:pan-x pan-y; overscroll-behavior:contain; }
.pdf-modal-body canvas {
  border-radius:3px;
  image-rendering: auto;
}
.pdf-img-view {
  border-radius:0; display:block; margin:0 auto;
  image-rendering: auto;
  max-width:none;
  transition: width .2s ease, height .2s ease;
}
.pdf-float-close {
  position:fixed;
  top:calc(.9rem + env(safe-area-inset-top, 0px));
  left:calc(.9rem + env(safe-area-inset-left, 0px));
  z-index:10001;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  cursor:pointer; background:rgba(0,0,0,.55); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  transition:background .15s; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.pdf-float-close:hover { background:rgba(0,0,0,.82); }
.pdf-float-close:active { transform:scale(.86) !important; opacity:.75 !important; transition-duration:60ms !important; }


/* Transient zoom level indicator — appears on pinch/scroll zoom, auto-hides */
.pdf-zoom-badge {
  position:fixed;
  bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left:50%; transform:translateX(-50%);
  z-index:10001; pointer-events:none;
  padding:.32rem .88rem; border-radius:20px;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
  color:#fff; font-size:.78rem; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  opacity:0; transition:opacity .28s ease;
}
.pdf-zoom-badge.visible { opacity:1; }
.pdf-loading { display:flex; align-items:center; justify-content:center; height:100%; color:rgba(255,255,255,.7); font-size:1rem; }
.pdf-error { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:rgba(255,255,255,.8); text-align:center; gap:1rem; font-size:.95rem; }
.pdf-fallback-link { color:#7ab4ff; text-decoration:underline; font-size:.88rem; }

/* Secure PDF viewer */
.secure-pdf-viewer { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.5rem; }
.pdf-viewer-topbar { background:var(--ink); padding:.68rem 1.25rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.pdf-viewer-info { display:flex; align-items:center; gap:.6rem; flex:1; }
.pdf-lock-badge { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:white; padding:.17rem .6rem; border-radius:4px; font-size:.7rem; font-weight:700; white-space:nowrap; }
.pdf-doc-title { color:white; font-weight:600; font-size:.88rem; }
.pdf-viewer-desc { color:rgba(255,255,255,.5); font-size:.76rem; width:100%; }
.pdf-canvas-wrap { background:#E8E8E8; min-height:400px; display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; -webkit-user-select:none; position:relative; }
.pdf-canvas { display:block; max-width:100%; pointer-events:none; }
.pdf-loading-msg { position:absolute; color:var(--muted); font-size:.88rem; display:flex; align-items:center; gap:.5rem; }
.pdf-spinner { animation:spin 1.1s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.pdf-nav-bar { background:var(--surface-2); border-top:1px solid var(--border); padding:.52rem 1.25rem; display:flex; align-items:center; gap:.75rem; }
.pdf-nav-btn { background:var(--accent); color:white; border:none; padding:.55rem .82rem; border-radius:var(--radius-sm); font-size:.78rem; font-weight:600; cursor:pointer; min-height:44px; transition:background var(--dur) var(--ease); font-family:inherit; }
.pdf-nav-btn:hover { background:var(--accent-h); transform:none; }
.pdf-nav-btn:active { transform:scale(.93) !important; opacity:.82 !important; transition-duration:70ms !important; }
.pdf-page-info { font-size:.82rem; font-weight:600; color:var(--text); flex:1; }
.pdf-protected-note { font-size:.7rem; color:var(--muted); display:flex; align-items:center; gap:.25rem; margin-left:auto; }
.pdf-upload-placeholder { background:var(--surface-2); border:1.5px dashed var(--border); border-radius:var(--radius-lg); padding:2rem; text-align:center; margin-bottom:1.5rem; }
.pdf-placeholder-icon { font-size:0; margin-bottom:.75rem; }
.pdf-placeholder-icon::before { content:'—'; font-size:1.5rem; color:var(--border-2); display:block; }
.pdf-placeholder-title { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.pdf-placeholder-desc { color:var(--muted); font-size:.86rem; max-width:340px; margin:0 auto; }
@media print { .secure-pdf-viewer { display:none !important; } }

/* ─── MAPS ────────────────────────────────────── */
.maps-section { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:none; }
.maps-header { background:var(--social); padding:1.6rem 2rem; color:white; }
.maps-header h3 { font-size:1.3rem; font-weight:800; }
.maps-header p  { opacity:.8; margin-top:.3rem; font-size:.87rem; }
.maps-list { padding:1.1rem; display:flex; flex-direction:column; gap:.6rem; }
.map-item { padding:.85rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; gap:.75rem; transition:border-color var(--dur) var(--ease); }
.map-item:hover { background:var(--surface-2); border-color:var(--social); }
.map-item:active { transform:scale(.97) !important; opacity:.82 !important; transition-duration:60ms !important; }
.map-icon { font-size:1.4rem; }
.map-name { font-size:.88rem; font-weight:600; color:var(--text); }
.map-sub  { font-size:.73rem; color:var(--muted); margin-top:.08rem; }

/* ─── TEST MODE ───────────────────────────────── */
.pdf-test-btn {
  background:transparent; border:1.5px solid var(--accent); color:var(--accent);
  padding:.3rem .8rem; border-radius:var(--radius-sm); min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; flex-shrink:0;
}
.pdf-test-btn:hover { background:var(--accent); color:white; }
#testModal { display:none; position:fixed; inset:0; z-index:9998; }
#testModal.open { display:block; }
.test-timer {
  font-size:.93rem; font-weight:800; color:var(--accent);
  padding:.2rem .65rem; background:var(--surface-2); border-radius:5px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.test-timer.warning { color:var(--wrong); background:var(--wrong-l); }

/* ─── FOOTER ──────────────────────────────────── */
footer {
  background:#1A1035; color:rgba(255,255,255,.48);
  padding:2.5rem 0 1.5rem; margin-top:3rem;
}
.footer-grid {
  max-width:1200px; margin:0 auto;
  padding:0 clamp(1rem,4vw,2.5rem);
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2rem; margin-bottom:1.75rem;
}
.footer-brand .logo-text { font-size:1.1rem; color:#fff; }
.footer-brand .logo-text span { color:#7A87E8; }
.footer-brand p { font-size:.8rem; color:rgba(255,255,255,.35); margin:.5rem 0 .85rem; line-height:1.65; max-width:220px; }
.social-links { display:flex; gap:.45rem; }
.social-link {
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease);
  color:rgba(255,255,255,.5); text-decoration:none;
}
.social-link:hover { background:var(--accent); color:white; }
.footer-col h4 { font-size:.72rem; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:.38rem; }
.footer-col ul li a { font-size:.79rem; color:rgba(255,255,255,.38); transition:color var(--dur) var(--ease); }
.footer-col ul li a:hover { color:rgba(255,255,255,.78); }
.footer-bottom {
  max-width:1200px; margin:0 auto;
  padding:.95rem clamp(1rem,4vw,2.5rem) 0;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.65rem;
  font-size:.74rem;
}
.footer-badge {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.42); padding:.2rem .65rem; border-radius:4px;
  font-size:.67rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}

/* ─── NAV USER WIDGET ─────────────────────────── */
.nav-user-widget { position:relative; }
.nav-user-btn {
  display:flex; align-items:center; gap:.5rem;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:.24rem .6rem .24rem .28rem;
  cursor:pointer; transition:var(--transition); color:var(--text); font-family:inherit;
}
.nav-user-btn:hover { border-color:var(--accent); }
.nav-avatar {
  width:27px; height:27px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.nav-avatar img { width:100%; height:100%; object-fit:cover; }
.nav-avatar-initials { font-size:.68rem; font-weight:800; color:white; }
.nav-user-name { font-size:.82rem; font-weight:600; color:var(--text); max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-user-chevron { opacity:.38; flex-shrink:0; color:var(--muted); }
.user-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); min-width:228px;
  box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  z-index:200; overflow:hidden;
}
.user-dropdown.open { opacity:1; pointer-events:all; transform:translateY(0); }
.user-dropdown-header {
  display:flex; align-items:center; gap:.75rem;
  padding:.88rem 1rem; border-bottom:1px solid var(--border); background:var(--surface-2);
}
.ud-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:white;
}
.ud-name  { font-size:.87rem; font-weight:700; color:var(--text); }
.ud-email { font-size:.7rem; color:var(--muted); margin-top:.05rem; }
.ud-grade-badge {
  display:inline-block; margin-top:.28rem;
  background:var(--accent-bg); color:var(--accent);
  padding:.1rem .42rem; border-radius:4px; font-size:.64rem; font-weight:700;
}
.user-dropdown-links { padding:.28rem; }
.user-dropdown-links a {
  display:flex; align-items:center; gap:.6rem;
  padding:.52rem .72rem; border-radius:var(--radius-sm);
  font-size:.84rem; color:var(--text); font-weight:500;
  transition:background var(--dur) var(--ease);
}
.user-dropdown-links a svg { opacity:.48; flex-shrink:0; }
.user-dropdown-links a:hover { background:var(--surface-2); }
.ud-divider { height:1px; background:var(--border); margin:.18rem .42rem; }
.ud-logout { color:var(--wrong) !important; }
.ud-logout:hover { background:var(--wrong-l) !important; }
.fs-btn {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid var(--border); color:var(--muted); cursor:pointer;
  transition:var(--transition); flex-shrink:0;
}
.fs-btn:hover { background:var(--surface-2); color:var(--text); }

/* ─── AUTH TOAST ──────────────────────────────── */
.auth-toast {
  position:fixed; bottom:calc(2rem + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%) translateY(14px);
  background:#1A1035; color:white;
  padding:.62rem 1.35rem; border-radius:var(--radius);
  font-size:.87rem; font-weight:600; box-shadow:var(--shadow-lg);
  z-index:3000; opacity:0; transition:all .3s var(--ease); white-space:nowrap;
}
.auth-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── DASHBOARD / SETTINGS PANEL ─────────────── */
.panel-overlay {
  position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.panel-overlay.open { opacity:1; pointer-events:all; }
.panel-box {
  background:var(--surface); border-radius:var(--radius-xl);
  width:min(95vw,455px); max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  transform:translateY(14px); transition:transform .22s ease;
}
.panel-overlay.open .panel-box { transform:translateY(0); }
.panel-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem 1.35rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); z-index:1;
}
.panel-title { font-size:1rem; font-weight:800; color:var(--text); }
.panel-close {
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--surface-2); font-size:.92rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease);
}
.panel-close:hover { background:var(--border); }
.panel-body { padding:1.1rem 1.35rem; }
.panel-section { margin-bottom:1.3rem; }
.panel-section-title { font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.62rem; }
.dash-user-row { display:flex; align-items:center; gap:.88rem; background:var(--surface-2); border-radius:var(--radius); padding:.88rem; margin-bottom:1.05rem; }
.dash-avatar { width:46px; height:46px; border-radius:50%; background:var(--accent); color:white; display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:800; flex-shrink:0; }
.dash-user-info .dash-name  { font-weight:800; font-size:.92rem; color:var(--text); }
.dash-user-info .dash-grade { font-size:.76rem; color:var(--muted); margin-top:.1rem; }
.dash-progress-row { display:flex; align-items:center; justify-content:space-between; padding:.52rem 0; border-bottom:1px solid var(--border); }
.dash-progress-row:last-child { border-bottom:none; }
.dash-subject-name { font-size:.86rem; font-weight:600; color:var(--text); }
.dash-count { font-size:.74rem; color:var(--muted); }
.dash-bar-wrap { width:78px; height:5px; background:var(--border); border-radius:99px; overflow:hidden; }
.dash-bar-fill { height:100%; border-radius:99px; background:var(--accent); transition:width .6s ease; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:.68rem 0; border-bottom:1px solid var(--border); }
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:.87rem; font-weight:600; color:var(--text); }
.settings-row-value { font-size:.8rem; color:var(--muted); }
.settings-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.3rem .78rem; font-size:.78rem; font-weight:600; cursor:pointer; transition:var(--transition); color:var(--text); min-height:44px; display:inline-flex; align-items:center; }
.settings-btn:hover { background:var(--surface-2); }
.settings-btn.danger { border-color:#FCA5A5; color:var(--wrong); }
.settings-btn.danger:hover { background:var(--wrong-l); }

/* ─── QUESTION GENERATOR ──────────────────────── */
.qgen-wrap { max-width:800px; margin:0 auto; }
.qgen-controls { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.05rem 1.35rem; }
.qgen-filters { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.qgen-filter { background:var(--surface-2); border:1.5px solid var(--border); color:var(--muted); padding:.26rem .78rem; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600; cursor:pointer; transition:var(--transition); min-height:44px; display:inline-flex; align-items:center; }
.qgen-filter.active { background:var(--accent); border-color:var(--accent); color:white; }
.qgen-ch-sel { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--text); padding:.26rem .6rem; font-size:1rem; cursor:pointer; font-family:inherit; }
.qgen-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.05rem 1.35rem; margin-bottom:.82rem; transition:border-color var(--dur) var(--ease); }
.qgen-card:hover { border-color:var(--accent); }
.qgen-card-top { display:flex; align-items:center; gap:.6rem; margin-bottom:.62rem; flex-wrap:wrap; }
.qgen-mark-badge { font-size:.72rem; font-weight:700; padding:.17rem .58rem; border-radius:4px; }
.qgen-ch-badge { font-size:.72rem; color:var(--muted); background:var(--surface-2); padding:.17rem .58rem; border-radius:4px; border:1px solid var(--border); }
.qgen-q { font-size:.92rem; font-weight:600; color:var(--text); line-height:1.6; margin-bottom:.62rem; }
.qgen-ans-btn { background:transparent; border:1.5px solid var(--accent); color:var(--accent); padding:.26rem .82rem; border-radius:var(--radius-sm); font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--transition); min-height:44px; display:inline-flex; align-items:center; }
.qgen-ans-btn:hover { background:var(--accent); color:white; }
.qgen-ans { background:var(--surface-2); border-left:2px solid var(--accent); padding:.82rem 1rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-top:.62rem; font-size:.87rem; color:var(--text); line-height:1.7; white-space:pre-wrap; }

/* ─── MASTERY / KNOWLEDGE MAP ─────────────────── */
.mastery-badge {
  display:inline-flex; align-items:center;
  font-size:.64rem; font-weight:700;
  padding:.14rem .52rem; border-radius:4px;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.mastery-badge.not_started { background:var(--surface-2); color:var(--muted); }
.mastery-badge.learning    { background:#FEF3C7; color:#D97706; }
.mastery-badge.developing  { background:#DBEAFE; color:#1D4ED8; }
.mastery-badge.proficient  { background:#D1FAE5; color:#059669; }
.mastery-badge.mastered    { background:var(--accent); color:white; }
.chapter-mastery-badge { flex-shrink:0; }

.progress-summary-strip {
  display:flex; justify-content:space-around;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:.95rem .5rem;
  margin-bottom:1.05rem; flex-wrap:wrap; gap:.5rem;
}
.progress-summary-stat { text-align:center; min-width:58px; }
.pss-num { font-size:1.45rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.pss-lbl { font-size:.7rem; color:var(--muted); margin-top:.18rem; font-weight:600; }
.progress-overall { background:var(--surface-2); border-radius:var(--radius); padding:.88rem 1.1rem; margin-bottom:1.05rem; }
.progress-overall-label { font-size:.87rem; color:var(--text); }
.progress-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:.72rem; }
.progress-chapter-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:.88rem 1.05rem; transition:var(--transition);
}
.progress-chapter-card:hover { border-color:var(--accent); }
.progress-chapter-card:active { transform:scale(.97) !important; opacity:.82 !important; transition-duration:60ms !important; }
.progress-chapter-card.due-for-revision { border-color:#F59E0B; }
.progress-ch-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.42rem; }
.progress-ch-name { font-size:.84rem; font-weight:700; color:var(--text); flex:1; min-width:0; }
.revision-due-badge { font-size:.7rem; color:#B45309; background:#FEF3C7; border-radius:4px; padding:.1rem .48rem; margin-bottom:.32rem; display:inline-block; }
.progress-bar-wrap { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:.38rem; }
.progress-bar-fill { height:100%; border-radius:2px; transition:width .6s ease; }
.progress-ch-stats { font-size:.72rem; color:var(--muted); display:flex; gap:.5rem; flex-wrap:wrap; }
.progress-tick-pips { display:flex; flex-wrap:wrap; gap:.28rem; margin:.32rem 0 .1rem; }
.progress-tick-pip {
  font-size:.68rem; font-weight:600; padding:.1rem .44rem;
  border-radius:4px; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--border); line-height:1.5;
}
.progress-tick-pip.done {
  background:var(--badge-2m-bg); color:var(--badge-2m-txt); border-color:transparent;
}

/* MCQ session summary */
.mcq-session-summary {
  background:var(--accent-bg); border:1.5px solid var(--accent);
  border-radius:var(--radius-lg); padding:1.75rem 1.5rem; margin-top:1.25rem; text-align:center;
}
.summary-score-big { font-size:2.6rem; font-weight:900; color:var(--accent); line-height:1; }
.summary-accuracy  { font-size:.9rem; color:var(--muted); margin:.32rem 0 0; }
.summary-message   { font-size:.92rem; font-weight:600; color:var(--text); margin-top:.18rem; }

/* ─── MISTAKE BANK ────────────────────────────── */
.mistake-card { background:var(--surface); border:1.5px solid #FCA5A5; border-radius:var(--radius); padding:.95rem 1.1rem; margin-bottom:.72rem; }
.mistake-card-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.mistake-subject-tag { font-size:.66rem; font-weight:800; padding:.17rem .58rem; border-radius:4px; text-transform:uppercase; letter-spacing:.04em; }
.mistake-count { font-size:.75rem; color:var(--muted); }
.mistake-q { font-size:.87rem; font-weight:600; color:var(--text); margin-bottom:.5rem; line-height:1.55; }
.mistake-answers { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.mistake-wrong   { background:var(--wrong-l);   color:var(--wrong);   padding:.22rem .68rem; border-radius:4px; font-size:.8rem; font-weight:600; }
.mistake-correct { background:var(--correct-l); color:var(--correct); padding:.22rem .68rem; border-radius:4px; font-size:.8rem; font-weight:600; }
.mistake-resolve-btn {
  background:transparent; border:1.5px solid var(--border); color:var(--muted);
  padding:.26rem .82rem; border-radius:var(--radius-sm); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:var(--transition); min-height:44px;
  display:inline-flex; align-items:center;
}
.mistake-resolve-btn:hover { border-color:var(--correct); color:var(--correct); background:var(--correct-l); }
.mistake-subject-section { margin-bottom:1.75rem; }
.mistake-subject-heading { font-size:.9rem; font-weight:800; margin-bottom:.72rem; display:flex; align-items:center; gap:.5rem; }
.mistakes-empty { text-align:center; padding:3rem 1rem; color:var(--muted); }
.mistakes-empty-icon { font-size:0; margin-bottom:.6rem; display:block; }
.mistakes-empty-icon::before { content:'—'; font-size:2rem; color:var(--border-2); display:block; }
.dash-action-link {
  display:flex; align-items:center; gap:.6rem;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:.68rem 1rem;
  color:var(--text); font-size:.84rem; font-weight:600;
  text-decoration:none; transition:border-color var(--dur) var(--ease);
}
.dash-action-link:hover { border-color:var(--accent); }

/* ─── EXAM DASHBOARD ──────────────────────────── */
.dash-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem 1.35rem; margin-bottom:1.05rem; }
.dash-card-title { font-size:.93rem; font-weight:800; color:var(--text); margin-bottom:.85rem; }
.dash-card-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.85rem; flex-wrap:wrap; }
.dash-card-header .dash-card-title { margin-bottom:0; }
.dash-top-grid { display:grid; grid-template-columns:200px 1fr; gap:1.05rem; margin-bottom:1.05rem; }
@media (max-width:680px) { .dash-top-grid { grid-template-columns:1fr; } }
.dash-ring-card { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.4rem 1rem; }
.dash-ring-wrap { display:flex; flex-direction:column; align-items:center; }
.dash-ring-svg { display:block; }
.dash-ring-title { font-size:.82rem; font-weight:700; color:var(--muted); margin-top:.62rem; }
.dash-ring-label { font-size:.87rem; font-weight:800; margin-top:.17rem; }
.dash-subject-row { margin-bottom:.82rem; padding-bottom:.82rem; border-bottom:1px solid var(--border); }
.dash-subject-row:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.dash-subj-info  { display:flex; align-items:center; gap:.42rem; margin-bottom:.28rem; }
.dash-subj-icon  { font-size:.92rem; }
.dash-subj-name  { font-size:.86rem; font-weight:800; text-decoration:none; }
.dash-subj-name:hover { text-decoration:none; }
.dash-subj-right { display:flex; align-items:center; gap:.52rem; }
.dash-subj-bar   { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.dash-subj-fill  { height:100%; border-radius:3px; transition:width .8s ease; }
.dash-subj-pct   { font-size:.8rem; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.dash-subj-detail { display:flex; gap:.32rem; flex-wrap:wrap; margin-top:.28rem; }
.dash-subj-chip  { font-size:.67rem; font-weight:700; padding:.1rem .48rem; border-radius:4px; }
.dash-plan-count { font-size:.74rem; font-weight:700; color:var(--muted); background:var(--surface-2); padding:.1rem .52rem; border-radius:4px; }
.dash-plan-count-warn { color:#B45309; background:#FEF3C7; }
.dash-plan-item {
  display:flex; align-items:center; gap:.72rem;
  padding:.68rem .42rem; border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--text); transition:background .15s; border-radius:var(--radius-sm); cursor:pointer;
}
.dash-plan-item:last-child { border-bottom:none; }
.dash-plan-item:hover { background:var(--surface-2); }
.dash-plan-left  { flex-shrink:0; }
.dash-plan-type  { font-size:.68rem; font-weight:800; padding:.17rem .58rem; border-radius:4px; white-space:nowrap; }
.dash-plan-mid   { flex:1; min-width:0; }
.dash-plan-title { font-size:.86rem; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-plan-sub   { font-size:.73rem; color:var(--muted); margin-top:.1rem; }
.dash-plan-right { flex-shrink:0; }
.dash-revision-item { display:flex; align-items:center; gap:.68rem; padding:.62rem .42rem; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); transition:background .15s; border-radius:var(--radius-sm); }
.dash-revision-item:last-child { border-bottom:none; }
.dash-revision-item:hover { background:var(--surface-2); }
.dash-revision-info  { flex:1; min-width:0; }
.dash-revision-title { font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-revision-meta  { display:flex; align-items:center; gap:.32rem; margin-top:.18rem; flex-wrap:wrap; }
.dash-overdue-tag    { font-size:.68rem; font-weight:700; color:#92400E; background:#FEF3C7; padding:.1rem .42rem; border-radius:4px; }
.dash-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.62rem; margin-bottom:1.05rem; }
@media (max-width:680px) { .dash-stats-grid { grid-template-columns:repeat(2,1fr); } }
.dash-stat-tile { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:.88rem; text-align:center; }
.dash-stat-val { font-size:1.32rem; font-weight:900; color:var(--text); line-height:1; }
.dash-stat-lbl { font-size:.68rem; color:var(--muted); margin-top:.26rem; font-weight:600; }
.dash-stat-highlight { color:var(--accent); font-weight:900; }

/* ─── SCROLL REVEAL ───────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease),transform .5s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
.reveal-d4 { transition-delay:.32s; }

/* ─── REDUCED MOTION ──────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}

/* ─── PWA / SAFE AREA ─────────────────────────── */
@supports (padding-top:env(safe-area-inset-top)) {
  .navbar {
    padding-top:env(safe-area-inset-top,0px);
    height:calc(64px + env(safe-area-inset-top,0px));
    padding-left:calc(2rem + env(safe-area-inset-left,0px));
    padding-right:calc(2rem + env(safe-area-inset-right,0px));
  }
  footer { padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px)); }
}
@media all and (display-mode:standalone),all and (display-mode:fullscreen) {
  body { min-height:100dvh; }
}

/* ─── RESPONSIVE ──────────────────────────────── */
@media (min-width:1400px) {
  /* hero h1 fluid clamp already handles large screens */
  .subjects-grid { grid-template-columns:repeat(4,1fr); }
  .tips-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; padding:0 clamp(1rem,4vw,2rem); }
  .hero-right { display:none; }
  .hero-left { max-width:100%; }
  .footer-grid { grid-template-columns:2fr 1fr 1fr; gap:1.5rem; }
  .footer-brand { grid-column:1/-1; }
  .pdf-cards-grid { display:grid !important; grid-template-columns:1fr 1fr; gap:.65rem; }
  .search-bar { display:none; }
}
@media (min-width:769px) {
  .pdf-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
}
@media (max-width:768px) {
  .navbar { padding:0 1rem; height:56px; overflow:visible; flex-wrap:nowrap; }
  .logo-img { width:34px; height:34px; }
  .logo-text { font-size:1.1rem; }
  .nav-links { display:none !important; }
  .nav-right  { display:none !important; }
  .hamburger  { display:flex !important; }
  .search-bar { display:none; }
  .tabs-bar { top:calc(56px + env(safe-area-inset-top,0px)); border-bottom:1px solid var(--border); box-shadow:none; }
  .tabs-scroll { flex-wrap:wrap; padding:.48rem .75rem; gap:.28rem; overflow:visible; }
  .tab-btn {
    flex:1 1 calc(50% - .28rem); min-width:0; max-width:calc(50% - .28rem);
    padding:.55rem .3rem; font-size:.78rem; min-height:44px;
    border-radius:var(--radius-sm); border-bottom:2px solid transparent;
    background:var(--surface-2); justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .tab-btn.active               { background:var(--accent-bg); border-bottom-color:var(--accent); }
  .tab-btn.active.maths-t       { background:rgba(220,38,38,.05);  border-bottom-color:var(--maths); }
  .tab-btn.active.science-t     { background:rgba(2,132,199,.05);  border-bottom-color:var(--science); }
  .tab-btn.active.english-t     { background:rgba(194,114,13,.05); border-bottom-color:var(--english); }
  .tab-btn.active.social-t      { background:rgba(5,150,105,.05);  border-bottom-color:var(--social); }
  /* ── Hero ── */
  :root { --nav-h: 54px; }
  .hero { padding:2.5rem 0 2rem; }
  .hero p { margin-bottom:1.5rem; }
  .hero-cta { gap:.6rem; }
  /* ── Layout ── (clamp handles section/container, only override what clamp doesn't cover) */
  .subject-card { box-shadow:var(--shadow-sm); }
  .why-card { box-shadow:var(--shadow-sm); }
  .tip-card { box-shadow:var(--shadow-sm); }
  /* ── Subject header ── */
  .subject-header { padding:1.35rem 1rem; }
  .subject-header h1 { font-size:1.4rem; }
  .subject-header-icon { width:44px; height:44px; font-size:1.4rem; }
  /* ── PDFs ── */
  .pdf-cards-grid { display:flex !important; flex-direction:column; gap:.6rem; margin-bottom:1.4rem; }
  .coming-soon { padding:2.5rem 1.25rem; }
  /* ── Footer ── */
  footer { padding:1.75rem 0 1.25rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
  .footer-brand { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:.72rem; padding-bottom:.72rem; border-bottom:1px solid rgba(255,255,255,.07); }
  .footer-brand p { display:none; }
  .footer-brand .social-links { margin-left:auto; }
  .footer-col h4 { font-size:.7rem; margin-bottom:.42rem; }
  .footer-col ul li { margin-bottom:.25rem; }
  .footer-col ul li a { font-size:.73rem; }
  .footer-bottom { flex-direction:row; flex-wrap:wrap; gap:.32rem; font-size:.7rem; justify-content:center; }
}
@media (max-width:480px) {
  /* ── Hero ── */
  .hero { padding:2rem 0 1.75rem; }
  .hero-cta { flex-direction:column; align-items:stretch; gap:.6rem; }
  .hero-cta .btn { justify-content:center; text-align:center; width:100%; padding:.78rem 1.5rem; border-radius:var(--radius-lg); }
  .hero-value-row { display:none; }
  /* ── Subject cards: 1 column on phone ── */
  .subjects-grid { grid-template-columns:1fr; gap:1rem; }
  /* ── Layout: clamp handles section/container/section-title ── */
  /* ── PDFs ── */
  .pdf-card { flex-wrap:wrap; gap:.6rem; padding:.68rem; }
  .pdf-card-title { font-size:.86rem; }
  .pdf-open-btn { font-size:.76rem; padding:.32rem .7rem; }
  /* ── Tips ── */
  .tips-grid { grid-template-columns:1fr 1fr; }
  /* ── Footer ── */
  .footer-grid { grid-template-columns:1fr; }
  /* ── Progress ── */
  .progress-summary-strip { gap:.62rem; }
  .pss-num { font-size:1.22rem; }
  .progress-grid { grid-template-columns:1fr; }
  .summary-score-big { font-size:2rem; }
}
@media (max-width:360px) {
  .hero { padding:1.75rem 0 1.5rem; }
  .tips-grid { grid-template-columns:1fr; }
}

/* ─── LANDING PAGE — centered hero variant ────── */
.hero--landing .hero-grid {
  grid-template-columns:1fr;
  max-width:720px;
  text-align:center;
}
.hero--landing .hero-left { max-width:100%; }
.hero--landing .hero-right { display:none !important; }
.hero--landing .hero-p { max-width:500px; margin-left:auto; margin-right:auto; text-align:center; }
.hero--landing .hero-cta { justify-content:center; }
.hero--landing .hero-value-row { justify-content:center; }
.hero--landing .hero-badge { display:block; text-align:center; }
@media (max-width:480px) {
  .hero--landing .hero-cta { flex-direction:column; align-items:stretch; }
  .hero--landing .hero-cta .btn { justify-content:center; text-align:center; width:100%; }
}

/* ─── APP NAVIGATION ──────────────────────────── */
.app-nav {
  height:var(--nav-h);
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,3vw,2rem);
  position:sticky; top:0; z-index:1000;
  transition:transform .3s ease;
}
.app-nav-center {
  display:flex; align-items:center; gap:.15rem;
}
.app-nav-link {
  background:none; border:none; font-family:inherit;
  font-size:.875rem; font-weight:500; color:var(--muted);
  padding:.4rem .85rem; border-radius:var(--radius-sm);
  cursor:pointer; text-decoration:none;
  display:flex; align-items:center; gap:.3rem;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  white-space:nowrap;
}
.app-nav-link:hover { color:var(--text); background:var(--surface-2); }
.app-nav-link.active { color:var(--accent); font-weight:600; }
.app-nav-search-btn {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:.36rem .9rem;
  display:flex; align-items:center; gap:.45rem;
  font-size:.83rem; color:var(--muted); font-family:inherit; cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.app-nav-search-btn:hover { border-color:var(--accent); color:var(--text); }
.app-nav-search-icon {
  width:14px; height:14px; border:1.5px solid currentColor;
  border-radius:50%; flex-shrink:0; position:relative;
}
.app-nav-search-icon::after {
  content:''; position:absolute; bottom:-4px; right:-4px;
  width:4px; height:4px;
  background:currentColor; border-radius:1px;
  transform:rotate(45deg);
}

/* ─── APP BODY / MAIN ─────────────────────────── */
.app-body { background:var(--bg); }
.app-main {
  max-width:1000px; margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem);
  display:flex; flex-direction:column; gap:2.25rem;
}

/* ─── APP SECTION ─────────────────────────────── */
.app-section-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
}
.app-section-title {
  font-size:clamp(1rem,2vw,1.15rem); font-weight:800;
  color:var(--text); letter-spacing:-.02em;
}
.app-section-link {
  font-size:.8rem; font-weight:600; color:var(--accent);
  text-decoration:none; transition:opacity var(--dur) var(--ease);
}
.app-section-link:hover { opacity:.75; }

/* ─── CONTINUE LEARNING ───────────────────────── */
.continue-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:1.1rem 1.35rem;
  display:flex; align-items:center; gap:1.1rem;
  text-decoration:none; color:inherit;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.continue-card:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); }
.continue-icon {
  width:40px; height:40px; border-radius:var(--radius);
  background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.continue-icon-dot { width:14px; height:14px; border-radius:3px; background:var(--accent); }
.continue-body { flex:1; min-width:0; }
.continue-label {
  font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:var(--accent); margin-bottom:.2rem;
}
.continue-title {
  font-size:.95rem; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.continue-sub { font-size:.76rem; color:var(--muted); margin-top:.1rem; }
.continue-progress { height:2px; background:var(--border); border-radius:1px; overflow:hidden; margin-top:.5rem; }
.continue-pfill { height:100%; border-radius:1px; background:var(--accent); }
.continue-arrow { color:var(--accent); flex-shrink:0; font-size:1rem; }

/* ─── APP SUBJECTS GRID ───────────────────────── */
.app-subjects-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.app-subject-tile {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  text-decoration:none; color:inherit; text-align:center;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  cursor:pointer;
}
.app-subject-tile:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.app-subject-tile:active { transform:scale(.94) !important; opacity:.82 !important; transition-duration:80ms !important; }
.app-tile-icon {
  width:44px; height:44px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.app-tile-icon-mark { width:16px; height:16px; border-radius:3px; }
.app-tile-name { font-size:.88rem; font-weight:700; color:var(--text); line-height:1.3; }
.app-tile-meta { font-size:.72rem; color:var(--muted); }
.app-tile-bar { width:100%; height:2px; background:var(--border); border-radius:1px; overflow:hidden; }
.app-tile-fill { height:100%; border-radius:1px; background:var(--accent); transition:width .8s var(--ease); }
/* Subject-color icon backgrounds */
.app-tile-icon.maths   { background:var(--maths-l); }
.app-tile-icon.maths   .app-tile-icon-mark { background:var(--maths); }
.app-tile-icon.science { background:var(--science-l); }
.app-tile-icon.science .app-tile-icon-mark { background:var(--science); }
.app-tile-icon.english { background:var(--english-l); }
.app-tile-icon.english .app-tile-icon-mark { background:var(--english); }
.app-tile-icon.social  { background:var(--social-l); }
.app-tile-icon.social  .app-tile-icon-mark { background:var(--social); }
/* Progress bar color per subject */
.app-subject-tile.maths  .app-tile-fill { background:var(--maths); }
.app-subject-tile.science .app-tile-fill { background:var(--science); }
.app-subject-tile.english .app-tile-fill { background:var(--english); }
.app-subject-tile.social  .app-tile-fill { background:var(--social); }

/* ─── APP TOOLS GRID ──────────────────────────── */
.app-tools-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.app-tool-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem;
  display:flex; align-items:flex-start; gap:.88rem;
  text-decoration:none; color:inherit; cursor:pointer;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.app-tool-card:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); }
.app-tool-card:active { transform:scale(.96) !important; opacity:.82 !important; transition-duration:80ms !important; }
.app-tool-icon {
  width:38px; height:38px; border-radius:var(--radius);
  background:var(--accent-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.app-tool-icon-dot { width:12px; height:12px; border-radius:3px; background:var(--accent); }
.app-tool-body { flex:1; min-width:0; }
.app-tool-name { font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.app-tool-desc { font-size:.78rem; color:var(--muted); line-height:1.5; }
.app-tool-badge {
  font-size:.67rem; font-weight:700; padding:.12rem .48rem;
  border-radius:4px; background:var(--wrong-l); color:var(--wrong);
  margin-top:.4rem; display:inline-block;
}

/* ─── APP SEARCH OVERLAY ──────────────────────── */
.app-search-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(26,16,53,.6);
  display:none; align-items:flex-start; justify-content:center;
  padding-top:clamp(3rem,10vh,6rem);
}
.app-search-overlay.open { display:flex; }
.app-search-box {
  background:var(--surface); border-radius:var(--radius-xl);
  width:min(92vw,560px); box-shadow:var(--shadow-lg);
  border:1px solid var(--border); overflow:hidden;
}
.app-search-input-row {
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
}
.app-search-inp {
  flex:1; background:none; border:none; font-family:inherit;
  font-size:1rem; color:var(--text); outline:none;
}
.app-search-inp::placeholder { color:var(--muted); }
.app-search-close {
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:1.2rem; line-height:1; padding:.2rem;
  transition:color var(--dur) var(--ease);
}
.app-search-close:hover { color:var(--text); }
.app-search-results { max-height:380px; overflow-y:auto; }

/* ─── APP FOOTER (slim) ───────────────────────── */
.app-footer {
  border-top:1px solid var(--border);
  padding:1.5rem clamp(1rem,4vw,2rem);
  text-align:center; font-size:.75rem; color:var(--muted);
}

/* ─── RESPONSIVE — app shell ──────────────────── */
@media (max-width:900px) {
  .app-subjects-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .app-tools-grid { grid-template-columns:1fr; }
  .app-nav-center { display:none; }
  .app-nav .app-nav-search-btn { display:none; }
}
@media (max-width:480px) {
  .app-main { gap:1.75rem; }
  .app-subjects-grid { grid-template-columns:repeat(2,1fr); gap:.75rem; }
  .app-subject-tile { padding:1rem .75rem; }
}

/* ─── SCREENSHOT GUARD ────────────────────────── */
#abl-ss-guard {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: #000000;
  opacity: 0;
  /* fade-out only — appearance is instant so there's no window for screenshots */
  transition: opacity 400ms linear;
}
#abl-ss-guard.abl-guard-visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0ms; /* instant on */
}

/* ─── GUARD CONTENT BLUR ─────────────────────── */
/* Applied while the screenshot guard is active.
 * Blurs page content under the guard so that any
 * screenshot taken during the guard fade-out also
 * captures illegible, blurred content.            */
body.abl-ss-active > *:not(#abl-ss-guard) {
  filter: blur(18px) brightness(0.25) !important;
  transition: filter 0s !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
}


/* ─── SPA PROGRESS BAR ───────────────────────── */
#abl-spa-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--accent, #5B47DE);
  z-index: 2147483647;
  opacity: 0;
  transition: width .25s ease, opacity .3s ease;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}



/* ─── SKELETON LOADERS ────────────────────────── */
@keyframes abl-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 800px 100%;
  animation: abl-shimmer 1.6s infinite linear;
  border-radius: var(--radius-sm);
}
.skel-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.skel-line  { height: 13px; }
.skel-line-sm { height: 11px; width: 60%; }
.skel-line-lg { height: 16px; }
.skel-block { height: 80px; }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: var(--surface-2); }
}

/* ─── IMPROVED EMPTY STATES ───────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 3rem 1.5rem; gap: 1rem;
}
.empty-state-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.empty-state-icon::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--border-2); }
.empty-state-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.empty-state-sub   { font-size: .87rem; color: var(--muted); max-width: 320px; line-height: 1.6; }
.empty-state-cta   { margin-top: .25rem; }

/* ─── BOTTOM MOBILE NAVIGATION ───────────────── */
#abl-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 8px rgba(26,16,53,.06);
}
@media (max-width: 768px) {
  #abl-bottom-nav { display: flex; }
}
.bn-tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none;
  padding: 9px 4px; min-height: 56px;
  transition: color 180ms ease, background 180ms ease;
  -webkit-tap-highlight-color: transparent;
  border-radius: 0;
}
.bn-tab:hover { color: var(--text-2); }
.bn-tab.bn-active { color: var(--accent); }
.bn-icon { line-height: 0; display: block; }
.bn-label { font-size: 10px; font-weight: 600; font-family: 'Poppins', inherit; letter-spacing: .01em; }

/* Content area gets bottom padding on mobile to clear bottom nav */
@media (max-width: 768px) {
  body.has-bottom-nav .app-main { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)) !important; }
  body.has-bottom-nav .tab-panel { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)); }
  body.has-bottom-nav footer,
  body.has-bottom-nav .app-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px)) !important; }
}

/* ─── LANDSCAPE MOBILE FIXES ──────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  /* Compact the shared navbar in landscape */
  .navbar { height:48px !important; }
  .tabs-bar { top:calc(48px + env(safe-area-inset-top,0px)) !important; }

  /* Add side safe-area padding so notch doesn't block taps */
  .app-main, .qbp-wrap, .app-body > * {
    padding-left:  max(1rem, env(safe-area-inset-left,  0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
  .tabs-scroll {
    padding-left:  max(.75rem, env(safe-area-inset-left,  0px));
    padding-right: max(.75rem, env(safe-area-inset-right, 0px));
  }
  .navbar {
    padding-left:  max(1rem, calc(env(safe-area-inset-left,0px)  + .75rem));
    padding-right: max(1rem, calc(env(safe-area-inset-right,0px) + .75rem));
  }

}