/* ============================================================
   CHAPTER-COMMON.CSS
   Shared structural styles for all Story of English chapters.
   Each chapter defines its own theme tokens via :root override.
   REQUIRED per-chapter vars: --bg --alt --card --ink --muted
   --border --sh --accent --accent-2 --gold
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.8;font-size:17px;overflow-x:hidden;transition:background .3s,color .3s}

/* ---- Progress ---- */
.pt{position:fixed;top:0;left:0;right:0;height:4px;z-index:999}
#progress{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(184,134,11,.5);transition:width .1s linear}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--border);transition:background .3s}
html.dark .nav{background:color-mix(in srgb,var(--bg) 95%,transparent)}
.ni{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo{width:46px;height:46px;display:grid;place-items:center;background:var(--card);border-radius:10%;box-shadow:0 4px 14px rgba(46,74,64,.25);border:2px solid var(--gold);padding:4px;overflow:hidden;flex:none}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
html.dark .logo{background:var(--alt);border-color:var(--gold)}
.bn{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:.05em}
.bn b{color:var(--accent)}
html.dark .bn b{color:var(--gold)}
.nl{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;align-items:center}
.nl a{font:600 13px var(--ui);color:var(--muted);text-decoration:none;white-space:nowrap;padding:8px 14px;border-radius:4px;transition:.2s;position:relative}
.nl a:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
html.dark .nl a:hover{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.nl a.read::after{content:"✓";position:absolute;top:4px;right:4px;font-size:9px;color:var(--accent-2);font-weight:900}
.theme-btn{background:transparent;border:1.5px solid var(--border);border-radius:4px;padding:8px 12px;cursor:pointer;font-size:15px;color:var(--ink);transition:.2s;margin-left:8px}
.theme-btn:hover{border-color:var(--gold)}
.print-btn{background:transparent;border:1.5px solid var(--border);border-radius:4px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);transition:.2s;margin-left:4px;font-family:var(--ui)}
.print-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ---- Breadcrumb ---- */
.bc{max-width:1120px;margin:0 auto;padding:20px 24px 0;font:13px var(--ui);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bc a{color:var(--accent);text-decoration:none;font-weight:600}
html.dark .bc a{color:var(--gold)}
.chapter-nav-top{margin-left:auto;display:flex;gap:6px;font-size:12px}
.chapter-nav-top a{background:color-mix(in srgb,var(--gold) 10%,transparent);padding:4px 10px;border-radius:4px;color:var(--gold)!important;font-weight:700}

/* ---- Hero ---- */
.hero{padding:80px 24px 90px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at top,var(--card),var(--alt));border-bottom:3px double var(--border)}
.hero>div{position:relative;z-index:1}
.eyebrow{display:inline-block;font:700 12px var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);padding:8px 20px;border-radius:2px;margin-bottom:20px}
html.dark .eyebrow{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;margin-bottom:20px;font-weight:800;letter-spacing:.02em}
.hero h1 span{color:var(--accent)}
html.dark .hero h1 span{color:var(--gold)}
.lede{color:var(--muted);max-width:700px;margin:0 auto 24px;font-size:1.1rem}
.meta-info{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;font:600 13px var(--ui);color:var(--muted);margin-top:12px;border-top:1px solid var(--border);padding-top:16px;max-width:600px;margin-left:auto;margin-right:auto}
.meta-info span{display:flex;align-items:center;gap:6px}

/* ---- Stats (FIXED: 160px min + 420px fallback + clamp) ---- */
.stats{max-width:1000px;margin:-36px auto 0;padding:0 24px;position:relative;z-index:3}
.si{background:var(--card);border:2px solid var(--border);border-radius:8px;padding:26px 22px;box-shadow:0 8px 24px rgba(59,44,36,.1);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px 18px;text-align:center;align-items:start}
.si>div{min-width:0}
.sn{font-family:var(--serif);font-weight:800;font-size:clamp(1.1rem,2.2vw,2rem);color:var(--accent);display:block;line-height:1.15;overflow-wrap:break-word;word-break:break-word;hyphens:auto;margin-bottom:8px}
html.dark .sn{color:var(--gold)}
.sl{font:600 11px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;line-height:1.45;display:block}

/* ---- Sections ---- */
.section{padding:70px 24px}
.w{max-width:920px;margin:0 auto}
.alt{background:var(--alt);border-block:1px solid var(--border)}
.sh{margin-bottom:40px}.sh.c{text-align:center}
.sh h2{font:700 clamp(1.6rem,3.6vw,2.2rem)/1.2 var(--serif);margin-bottom:12px;color:var(--ink)}
.kicker{font:700 12px var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.sec-actions{display:flex;justify-content:flex-end;margin-bottom:16px}
.read-btn{font:600 12px var(--ui);padding:6px 14px;border-radius:4px;border:1.5px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.read-btn:hover{border-color:var(--gold);color:var(--gold)}
.read-btn.done{background:color-mix(in srgb,var(--accent-2) 10%,transparent);border-color:var(--accent-2);color:var(--accent-2)}
html.dark .read-btn.done{background:color-mix(in srgb,var(--accent-2) 15%,transparent);border-color:var(--accent-2);color:var(--accent-2)}

/* ---- Content Card ---- */
.cc{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:32px 36px;box-shadow:var(--sh);margin-bottom:24px;transition:background .3s}
.cc h3{font:700 1.4rem var(--serif);margin-bottom:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px dashed var(--border);padding-bottom:12px}
.badge{font:800 11px var(--ui);color:#fff;padding:4px 12px;border-radius:2px;background:var(--gold);box-shadow:0 2px 6px rgba(184,134,11,.3)}
.cc p,.cc li{color:var(--ink);margin-bottom:14px;line-height:1.8}
.cc ul,.cc ol{padding-left:24px}
.cc strong{color:var(--accent);font-weight:700}
html.dark .cc strong{color:var(--gold)}

/* ---- Callouts ---- */
.def,.real,.trap,.analogy,.takeaway,.did-you-know{border-radius:4px;padding:18px 24px;margin:20px 0}
.def{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 5%,transparent),color-mix(in srgb,var(--accent) 2%,transparent));border-left:4px solid var(--gold)}
.def i{font:700 11px var(--serif);color:var(--gold);letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:10px;font-style:normal}
.def p{margin:0 0 8px;color:var(--ink)}
.def p:last-child{margin-bottom:0}
.real{background:linear-gradient(135deg,#fef9c3,#fef3c7);border-left:4px solid #d97706}
.real i{font:800 11px var(--ui);color:#b45309;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:10px;font-style:normal}
.real i:before{content:"🌍";font-size:14px}
.real p{margin:0 0 8px;color:#78350f;font-size:15.5px}
.real ul{margin:6px 0 0;padding-left:22px;color:#78350f;font-size:15.5px}
.real ul li{margin-bottom:6px}
.trap{background:linear-gradient(135deg,#fee2e2,#fecaca);border-left:4px solid var(--accent)}
.trap i{font:800 11px var(--ui);color:#991b1b;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:10px;font-style:normal}
.trap i:before{content:"⚠️";font-size:14px}
.trap p{color:#7f1d1d;font-size:15.5px;margin:0 0 6px}
.analogy{background:linear-gradient(135deg,#f3e8ff,#ede9fe);border-left:4px solid var(--accent-2)}
.analogy i{font:800 11px var(--ui);color:var(--accent-2);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:10px;font-style:normal}
.analogy i:before{content:"🎭";font-size:14px}
.analogy p{color:#4c1d95;font-size:15.5px;margin:0}
.takeaway{background:linear-gradient(135deg,#fef9c3,#fef3c7);border-left:4px solid var(--gold);margin-top:24px;padding:16px 22px}
.takeaway i{font:800 11px var(--ui);color:#b45309;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:8px;font-style:normal}
.takeaway i:before{content:"🔑";font-size:14px}
.takeaway p{margin:0;color:#78350f;font-size:15.5px;font-weight:500}
.did-you-know{background:linear-gradient(135deg,#dbeafe,#e0f2fe);border:2px dashed #0891b2;border-radius:8px;padding:16px 22px;margin:20px 0}
.did-you-know i{font:800 11px var(--ui);color:#0891b2;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:8px;font-style:normal}
.did-you-know i:before{content:"💎";font-size:14px}
.did-you-know p{margin:0;color:#0c4a6e;font-size:15px;line-height:1.65}

/* ---- Tables ---- */
.tw{overflow-x:auto;border-radius:4px;border:1px solid var(--border);margin:24px 0;background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
thead{background:var(--accent-2);color:#fff;font-family:var(--ui)}
html.dark thead{background:var(--gold);color:var(--bg)}
th{padding:14px 16px;text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
td{padding:14px 16px;color:var(--ink);border-bottom:1px solid var(--border);vertical-align:top;line-height:1.7}
td:first-child{font-weight:700;color:var(--ink)}

/* ---- Viz ---- */
.viz{background:var(--card);border:2px solid var(--border);border-radius:8px;padding:24px;margin:24px 0;text-align:center;overflow-x:auto;position:relative;box-shadow:inset 0 0 20px rgba(184,134,11,.05)}
html.dark .viz{background:var(--alt)}
.viz>b{font:800 12px var(--serif);color:var(--gold);letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:16px}
.viz svg{width:100%;min-width:700px;height:auto;display:block;margin:0 auto}

/* Flow + Globe SVG classes */
.flow-wrap{overflow-x:auto;padding:6px 0}
.flow-svg{width:100%;min-width:720px;height:auto;display:block;margin:0 auto}
.flow-node{fill:var(--card);stroke:var(--gold);stroke-width:2}
.flow-node-text{fill:var(--ink);font-family:var(--ui);font-size:11px;font-weight:700;text-anchor:middle}
.flow-caption{fill:var(--muted);font-family:var(--ui);font-size:10px;font-weight:600;text-anchor:middle}
.flow-arrow{stroke:var(--gold);stroke-width:2;fill:none}
html.dark .flow-node{fill:var(--alt);stroke:var(--gold)}
html.dark .flow-node-text{fill:var(--gold)}
html.dark .flow-caption{fill:var(--muted)}
html.dark .flow-arrow{stroke:var(--gold)}
.viz-canvas{fill:var(--card);stroke:var(--gold);stroke-width:3}
.viz-title{fill:var(--ink);font-family:var(--serif);font-size:15px;font-weight:800;text-anchor:middle}
.viz-sub{fill:var(--ink);font-family:var(--ui);font-size:11px;font-weight:700}
.viz-note{fill:var(--muted);font-family:var(--ui);font-size:10px;font-style:italic;text-anchor:middle}
.lbl-gold{fill:var(--gold);font-family:var(--ui);font-size:10px;font-weight:700}
.lbl-crimson{fill:var(--accent);font-family:var(--ui);font-size:10px;font-weight:700}
.lbl-royal{fill:var(--accent-2);font-family:var(--ui);font-size:10px;font-weight:700}
.lbl-result{fill:var(--accent-2);font-family:var(--serif);font-size:12px;font-weight:800;text-anchor:middle}
html.dark .viz-canvas{fill:var(--alt);stroke:var(--gold)}
html.dark .viz-title{fill:var(--ink)}
html.dark .viz-sub{fill:var(--ink)}
html.dark .viz-note{fill:var(--muted)}
html.dark .lbl-gold{fill:var(--gold)}
html.dark .lbl-crimson{fill:var(--accent)}
html.dark .lbl-royal{fill:var(--accent-2)}
html.dark .lbl-result{fill:var(--accent-2)}

/* Globe (chapter 10) */
.globe-canvas{fill:var(--card);stroke:var(--accent);stroke-width:4}
.globe-wall{fill:var(--alt);stroke:var(--accent-2);stroke-width:8}
.globe-gallery{fill:none;stroke:var(--accent);stroke-width:20}
.globe-ring{fill:none;stroke:var(--gold);stroke-width:2}
.globe-yard{fill:var(--bg);stroke:var(--gold);stroke-width:2}
.globe-stage{fill:var(--accent-2);stroke:var(--gold);stroke-width:4}
.globe-pillar{fill:var(--gold)}
.globe-heaven{fill:var(--accent);stroke:var(--gold);stroke-width:2}
.globe-trap{fill:var(--ink)}
.globe-title{fill:var(--ink);font-family:var(--serif);font-size:18px;font-weight:800;text-anchor:middle}
.globe-sub{fill:var(--accent);font-family:var(--serif);font-size:14px;font-weight:700;text-anchor:middle}
.globe-label{fill:var(--ink);font-family:var(--ui);font-size:12px;font-weight:700}
.globe-label-muted{fill:var(--muted);font-family:var(--ui);font-size:10px}
.globe-label-c{fill:var(--muted);font-family:var(--ui);font-size:14px;font-weight:700;text-anchor:middle}
.globe-label-sm{fill:var(--muted);font-family:var(--ui);font-size:11px;text-anchor:middle}
.globe-white{fill:#fff;font-family:var(--serif);font-size:16px;font-weight:800;text-anchor:middle}
.globe-white-sm{fill:#fff;font-family:var(--ui);font-size:12px;font-weight:700;text-anchor:middle}
.globe-white-xs{fill:#fff;font-family:var(--ui);font-size:10px;font-weight:700;text-anchor:middle}
.globe-leader{stroke:var(--ink);stroke-width:2;fill:none}
.globe-note{fill:var(--muted);font-family:var(--ui);font-size:11px;font-style:italic;text-anchor:middle}
html.dark .globe-canvas{fill:var(--alt);stroke:var(--gold)}
html.dark .globe-wall{fill:var(--card);stroke:var(--muted)}
html.dark .globe-gallery{stroke:var(--accent)}
html.dark .globe-ring{stroke:var(--gold)}
html.dark .globe-yard{fill:var(--card);stroke:var(--gold)}
html.dark .globe-stage{fill:var(--muted);stroke:var(--gold)}
html.dark .globe-pillar{fill:var(--gold)}
html.dark .globe-heaven{fill:var(--accent);stroke:var(--gold)}
html.dark .globe-trap{fill:var(--bg)}
html.dark .globe-title{fill:var(--ink)}
html.dark .globe-sub{fill:var(--gold)}
html.dark .globe-label{fill:var(--ink)}
html.dark .globe-label-muted,.html.dark .globe-label-c,.html.dark .globe-label-sm{fill:var(--muted)}
html.dark .globe-leader{stroke:var(--muted)}
html.dark .globe-note{fill:var(--muted)}

/* ---- Interactive ---- */
.interactive{background:var(--card);border:2px solid var(--border);border-radius:8px;padding:28px;margin:24px 0;box-shadow:var(--sh)}
.interactive h4{font:800 16px var(--serif);color:var(--accent);margin-bottom:16px;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:8px}
html.dark .interactive h4{color:var(--gold)}
.interactive h4:before{content:"⚜️";font-size:20px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field label{font:600 12px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.calc-input,select{width:100%;padding:12px 16px;font:600 14px var(--ui);border:1.5px solid var(--border);border-radius:4px;background:var(--bg);color:var(--ink);transition:border-color .2s;cursor:pointer}
.calc-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 15%,transparent)}
.calc-btn{font:700 14px var(--serif);padding:14px 24px;border-radius:4px;border:none;background:linear-gradient(135deg,var(--accent),var(--gold));color:#fff;cursor:pointer;transition:.2s;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent);width:100%;text-transform:uppercase;letter-spacing:.1em}
.calc-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 40%,transparent)}
.calc-results{background:var(--alt);padding:20px;border-radius:4px;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;border:1px solid var(--border)}
.calc-results .res-item{background:var(--card);padding:12px 16px;border-radius:4px;border:1px solid var(--border)}
.calc-results .lbl{font:700 11px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.calc-results .val{font-size:18px;font-weight:800;color:var(--accent);display:block;margin-top:4px;font-family:var(--serif)}
html.dark .calc-results .val{color:var(--gold)}
.calc-results .val.small{font-size:14px;font-weight:600;font-family:var(--body);line-height:1.6}

/* ---- Q&A ---- */
.ncert-q{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:20px 24px;margin:16px 0;box-shadow:var(--sh);border-left:4px solid var(--gold)}
.ncert-q .qnum{display:inline-block;font:800 11px var(--ui);background:var(--gold);color:#fff;padding:4px 12px;border-radius:2px;margin-bottom:12px;letter-spacing:.06em}
.ncert-q .qtext{font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.7;font-family:var(--serif);font-size:1.05rem}
.ncert-q details{margin-top:14px;border:1px solid var(--border);border-radius:4px;padding:14px 18px;background:var(--bg)}
.ncert-q summary{cursor:pointer;font:700 13px var(--ui);color:var(--accent);user-select:none;list-style:none}
html.dark .ncert-q summary{color:var(--gold)}
.ncert-q summary::before{content:"▶ ";font-size:10px;margin-right:6px;display:inline-block;transition:transform .2s}
.ncert-q details[open] summary::before{transform:rotate(90deg)}
.ncert-q details .sol{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);font-size:15px;line-height:1.8;color:var(--ink)}

/* ---- Summary ---- */
.summary-box{background:var(--alt);border:2px solid var(--gold);border-radius:8px;padding:32px;margin:28px 0;box-shadow:var(--sh)}
.summary-box h3{font:800 24px var(--serif);color:var(--accent);margin-bottom:20px;display:flex;align-items:center;gap:12px}
html.dark .summary-box h3{color:var(--gold)}
.summary-box h3:before{content:"📜";font-size:28px}
.summary-box ol{padding-left:28px}
.summary-box li{font-size:16px;line-height:1.85;margin-bottom:12px;color:var(--ink);padding-left:8px}
.summary-box li strong{color:var(--accent);font-weight:800}
html.dark .summary-box li strong{color:var(--gold)}

/* ---- Flashcards ---- */
.flashcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:24px 0}
.flashcard-static{background:var(--card);border:2px solid var(--border);border-radius:4px;padding:24px 20px;text-align:center;box-shadow:var(--sh);transition:.2s;min-height:140px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.flashcard-static:hover{transform:translateY(-4px);box-shadow:0 8px 24px color-mix(in srgb,var(--gold) 15%,transparent);border-color:var(--gold)}
.flashcard-static .fc-title{font:700 13px var(--ui);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;line-height:1.4}
.flashcard-static .fc-formula{font:700 16px var(--serif);color:var(--accent);padding:12px;background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:4px;line-height:1.5}
html.dark .flashcard-static .fc-formula{color:var(--gold);background:color-mix(in srgb,var(--gold) 15%,transparent)}

/* ---- Chapter nav ---- */
.chapter-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:50px auto 30px;max-width:920px;padding:0 24px}
.chapter-nav a{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1.5px solid var(--border);border-radius:6px;padding:20px 24px;text-decoration:none;color:var(--ink);transition:.2s;box-shadow:var(--sh)}
.chapter-nav a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 6px 20px color-mix(in srgb,var(--gold) 15%,transparent)}
.chapter-nav .nav-dir{font:700 12px var(--serif);color:var(--gold);text-transform:uppercase;letter-spacing:.15em}
.chapter-nav .nav-title{font:700 16px var(--ui)}
.chapter-nav .next{text-align:right}

/* ---- Footer ---- */
footer{background:var(--alt);color:var(--ink);padding:30px 24px 30px;margin-top:60px;font:14px var(--ui);border-top:4px solid var(--gold)}
.fi{max-width:none;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid var(--border)}
footer h5{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:16px;font-family:var(--serif)}
footer a{display:block;color:var(--muted);text-decoration:none;padding:6px 0;transition:.2s}
footer a:hover{color:var(--gold)}
.fb{text-align:center;margin-top:24px;color:var(--muted);font-size:13px}
footer .bn{color:var(--ink)}
footer .bn b{color:var(--gold)}

/* ---- Back to top ---- */
#backTop{position:fixed;bottom:24px;right:24px;width:50px;height:50px;border-radius:50%;background:var(--accent);color:#fff;border:2px solid var(--gold);font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transition:.3s;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 50%,transparent);z-index:800;font-weight:900}
#backTop.show{opacity:1;visibility:visible}
#backTop:hover{transform:translateY(-4px);box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 60%,transparent)}

/* ---- MCQ ---- */
.qf{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:30px;box-shadow:var(--sh)}
.q{padding:24px 0;border-bottom:1px dashed var(--border)}
.q:first-child{padding-top:0}
.qt{font-weight:700;margin-bottom:16px;color:var(--ink);font-size:1.05rem}
.qt span{color:var(--accent);font-family:var(--ui);font-weight:800;margin-right:10px}
html.dark .qt span{color:var(--gold)}
.o{display:grid;gap:10px;margin-top:12px}
.o label{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:4px;border:1.5px solid var(--border);background:var(--card);cursor:pointer;font-size:15px;line-height:1.5;transition:.2s;color:var(--ink)}
.o label:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 5%,transparent)}
.o input{accent-color:var(--accent);margin-top:5px}
.o .correct{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 8%,transparent)}
.o .wrong{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ex{display:none;margin-top:14px;padding:14px 18px;background:color-mix(in srgb,var(--gold) 7%,transparent);border-left:3px solid var(--gold);border-radius:0 4px 4px 0;font-size:14.5px;color:var(--ink);line-height:1.7}
.ex.show{display:block}
.ex strong{color:var(--accent)}
html.dark .ex strong{color:var(--gold)}
.act{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.btn{font:700 14px var(--serif);padding:12px 28px;border-radius:4px;border:1.5px solid var(--border);cursor:pointer;background:var(--card);color:var(--ink);transition:.2s}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.p{background:linear-gradient(135deg,var(--accent),var(--gold));color:#fff;border-color:transparent;box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 45%,transparent);color:#fff}
.score{margin-left:auto;font:700 15px var(--ui);background:var(--alt);padding:12px 24px;border-radius:4px;color:var(--ink);border:1px solid var(--border)}
.score b{color:var(--accent)}
html.dark .score b{color:var(--gold)}
.rb{display:none;margin-top:18px;padding:20px;border-radius:4px;font:16px var(--ui);text-align:center;background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--accent);border:1px solid var(--border)}
html.dark .rb{color:var(--gold)}
.rb.show{display:block}

/* ---- Collapsible SA (optional, only if used) ---- */
.sa{margin:18px 0;border-radius:4px;overflow:hidden;border:1.5px solid var(--border);background:var(--card)}
.sa button{font:700 14px var(--ui);width:100%;text-align:left;background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--accent);border:0;padding:16px 20px;cursor:pointer;transition:.2s}
html.dark .sa button{color:var(--gold)}
.sa button:hover{background:color-mix(in srgb,var(--gold) 15%,transparent)}
.sa .b{display:none;padding:20px 24px;border-top:1px dashed var(--border)}
.sa.open .b{display:block}

/* ---- Step (optional) ---- */
.step{background:var(--alt);border-left:4px solid var(--gold);border-radius:0 4px 4px 0;padding:14px 20px;margin:12px 0}
.step h6{display:flex;justify-content:space-between;gap:10px;font:800 13px var(--ui);color:var(--gold);text-transform:uppercase;margin-bottom:8px}
.step h6 em{font-style:normal;font-size:11.5px;background:var(--gold);color:#fff;padding:2px 10px;border-radius:2px;white-space:nowrap}
.step p{margin:6px 0;font-size:15px;color:var(--ink)}

/* ---- Dark Mode Overrides (generic) ---- */
html.dark .def{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,transparent),color-mix(in srgb,var(--accent) 8%,transparent))}
html.dark .real{background:linear-gradient(135deg,#2a1f08,#3a2b0a);border-left-color:var(--gold)}
html.dark .real p,html.dark .real ul,html.dark .real li{color:#fcd34d}
html.dark .real i{color:var(--gold)}
html.dark .trap{background:linear-gradient(135deg,#3a0d0d,#4a1414);border-left-color:var(--accent)}
html.dark .trap p{color:#fca5a5}
html.dark .analogy{background:linear-gradient(135deg,#1e1428,#2d1f3d);border-left-color:var(--accent-2)}
html.dark .analogy p{color:#c4b5fd}
html.dark .takeaway{background:linear-gradient(135deg,var(--bg),var(--card));border-left-color:var(--gold)}
html.dark .takeaway p{color:var(--ink)}
html.dark .did-you-know{background:linear-gradient(135deg,var(--bg),var(--card));border-color:var(--border)}
html.dark .did-you-know p{color:var(--ink)}
html.dark .step{background:var(--alt)}
html.dark .step p{color:var(--ink)}

/* ---- Responsive ---- */
@media(max-width:720px){
  .fi{grid-template-columns:1fr 1fr}
  .cc{padding:24px 20px}
  .score{margin-left:0;width:100%;text-align:center}
  .section{padding:50px 16px}
  #backTop{bottom:16px;right:16px;width:44px;height:44px}
  .calc-results,.calc-grid{grid-template-columns:1fr}
  .chapter-nav{grid-template-columns:1fr}
  .chapter-nav .next{text-align:left}
  .summary-box{padding:24px 20px}
  .chapter-nav-top{display:none}
  .hero{padding:60px 16px 70px}
  .si{grid-template-columns:repeat(2,1fr);gap:20px 14px;padding:22px 16px}
}
@media(max-width:420px){
  .si{grid-template-columns:1fr}
}

/* ---- Print (FIXED: viz svg ko hide nahi karenge) ---- */
@media print{
  .nav,.bc,.pt,#backTop,.theme-btn,.print-btn,.act,.read-btn,.sec-actions,.chapter-nav,.rb{display:none!important}
  body{font-size:11pt;line-height:1.5;background:#fff;color:#000}
  .section{padding:12px 0;page-break-inside:avoid}
  .cc{box-shadow:none;border:1px solid #ccc;page-break-inside:avoid}
  .hero{padding:20px 0;background:#fff;border-bottom:2px solid #333}
  .stats{margin:20px auto 0}
  .real,.trap,.analogy,.takeaway,.def,.did-you-know,.flashcard-static{background:#f8f8f8!important;page-break-inside:avoid}
  footer{background:#fff;color:#333;border-top:1px solid #ccc}
  .q,.ex,.ncert-q{page-break-inside:avoid}
}