@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Lora:ital,wght@0,500;0,600;0,700;1,500;1,600&family=DM+Mono:wght@400;500&display=swap');

/* ==========================================================================
   SJMaths — Class 10 Science · Unified Mobile-First Design System v2
   Warm earthy palette · Subject-coded accents · CBSE board-focused
   ========================================================================== */

/* ------------------------------------------------------------------
   DESIGN TOKENS
   Each chapter sets --ch-accent / --ch-tint / --ch-dark in its own
   <style> block. Fallback = chemistry blue.
------------------------------------------------------------------ */
:root {
    --ch-accent:      #5B6AF0;
    --ch-tint:        #EEEFFE;
    --ch-dark:        #3948D9;
    --bg:             #F7F4EF;
    --surface:        #FFFFFF;
    --surface-warm:   #FDFAF6;
    --ink:            #1C1917;
    --ink-2:          #44403C;
    --muted:          #78716C;
    --border:         #E5E0D8;
    --border-subtle:  #F0EBE3;
    --amber:          #D97706;
    --amber-tint:     #FFFBEB;
    --amber-border:   #FDE68A;
    --green:          #16A34A;
    --green-tint:     #F0FDF4;
    --green-border:   #BBF7D0;
    --red:            #DC2626;
    --red-tint:       #FEF2F2;
    --formula-bg:     #1C1917;
    --formula-text:   #F5F5F4;
    --nav-h:          68px;
    --nav-bg:         rgba(255,252,248,0.95);
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  20px;
    --r-xl:  24px;
    --shadow-sm: 0 1px 4px rgba(28,25,23,.06), 0 2px 8px rgba(28,25,23,.04);
    --shadow-md: 0 4px 16px rgba(28,25,23,.08), 0 1px 4px rgba(28,25,23,.04);
    /* Premium font stack: Optimized for clarity, readability, and scientific precision */
    --font-ui:      'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif:   'Lora', 'Georgia', 'Cambria', 'Times New Roman', serif;
    --font-mono:    'DM Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    padding-bottom: calc(var(--nav-h) + 24px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
    text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: inline-block; vertical-align: middle; }
img { max-width: 100%; }

/* LAYOUT */
.container, .wrap, main.container {
    width: min(100% - 28px, 1000px);
    margin: 0 auto;
    padding-top: 14px;
    padding-bottom: 90px;
}
.shell {
    width: min(100% - 28px, 1050px);
    margin: 0 auto;
    padding: 14px 0 110px;
}

/* BREADCRUMB NAVIGATION */
.chapter-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: fit-content;
}
.chapter-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease, opacity 0.15s ease;
}
.chapter-breadcrumb a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.chapter-breadcrumb .crumb-sep {
    font-size: 8px;
    opacity: 0.6;
}
.chapter-breadcrumb .crumb-current {
    color: #ffffff;
    font-weight: 800;
}

/* CHAPTER HEADER */
.top-header, .header {
    background: linear-gradient(135deg, var(--ch-dark) 0%, var(--ch-accent) 60%);
    color: white;
    padding: 18px 16px 22px;
    position: relative;
    overflow: hidden;
}
.header-pattern, .header-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: .11; pointer-events: none;
}
.header-content, .header-inner { position: relative; z-index: 2; max-width: 1000px; margin: auto; }
.eyebrow {
    font-size: 10px; font-weight: 800; letter-spacing: .13em;
    text-transform: uppercase; opacity: .88; margin-bottom: 6px;
}
.chapter-title, .title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 5vw, 34px);
    font-weight: 700; line-height: 1.18; letter-spacing: -.01em; margin: 4px 0 6px;
}
.chapter-subtitle, .subtitle {
    font-size: 12px; opacity: .88; line-height: 1.45;
}
.chapter-meta, .meta, .pills {
    display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;
}
.meta-pill, .chapter-meta .pill, .meta .pill, .pills .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 999px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px); font-size: 10px; font-weight: 700;
}

/* Ch7-8 head */
.head {
    background: linear-gradient(135deg, var(--ch-dark) 0%, var(--ch-accent) 60%);
    color: white; padding: 28px 20px 30px; position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.head > * { max-width: 1000px; margin-inline: auto; }
.ey { font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .88; margin-bottom: 6px; }
.head .title { font-family: var(--font-serif); font-size: clamp(24px,5vw,36px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 4px 0 6px; }
.head .sub { font-size: 13px; color: rgba(255, 255, 255, 0.95) !important; margin-top: 6px; line-height: 1.5; max-width: 850px; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.head .pills { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.head .pill { padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); font-size: 10.5px; font-weight: 750; backdrop-filter: blur(8px); display: inline-flex; align-items: center; gap: 5px; }

/* Ch9 hero header */
header.hero {
    background: linear-gradient(135deg, var(--ch-dark) 0%, var(--ch-accent) 60%);
    color: white; padding: 20px 16px 24px; margin-bottom: 0;
}
.hero-kicker { font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
header.hero h1 { font-family: var(--font-serif); font-size: clamp(22px,6vw,38px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 4px 0 8px; }
header.hero p  { font-size: 12px; opacity: .88; line-height: 1.5; margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero-meta .pill, .pill { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.13); font-size: 9px; font-weight: 750; display: inline-block; }

/* STICKY TAB BAR */
.section-nav {
    position: sticky; top: 0; z-index: 40;
    display: flex; gap: 0; overflow-x: auto;
    background: var(--surface);
    border-bottom: 1.5px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(28,25,23,.05);
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 0 6px;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav button {
    flex: 0 0 auto; padding: 13px 16px 11px;
    background: none; border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--muted); font-size: 12px; font-weight: 700;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
    margin-bottom: -1.5px;
}
.section-nav button:hover { color: var(--ink-2); }
.section-nav button.active { color: var(--ch-accent); border-bottom-color: var(--ch-accent); }

/* TAB PANELS */
.tab-panel, .page, section.tab {
    display: none;
    animation: fadeUp .22s ease;
}
.tab-panel.active, .page.active, section.tab.active, section.tab.on { display: block; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* HERO CARD */
.hero-card, section.hero {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 16px;
    box-shadow: var(--shadow-sm); margin-bottom: 16px;
    position: relative; overflow: hidden;
}
.hero-card::after {
    content: ""; position: absolute;
    width: 120px; height: 120px; right: -50px; top: -50px;
    border-radius: 50%; background: var(--ch-tint); opacity: .7;
    pointer-events: none;
}
.hero-row { display: flex; gap: 13px; align-items: center; }
.hero-icon { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 15px; background: var(--ch-tint); color: var(--ch-accent); display: grid; place-items: center; }
.hero-title { font-size: 15px; font-weight: 900; line-height: 1.25; }
.hero-text  { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.exam-badge { margin-top: 13px; background: var(--amber-tint); border: 1px solid var(--amber-border); color: #78350F; border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; font-weight: 700; line-height: 1.5; }

/* ch7-8 hero */
section.hero { margin: 14px 0 4px; }
section.hero b { font-size: 13px; display: block; margin-bottom: 5px; }
section.hero p { font-size: 11.5px; color: var(--muted); }
section.hero .tip { margin-top: 9px; background: var(--amber-tint); border-left: 3px solid var(--amber); padding: 9px 10px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 11px; color: #78350F; }

/* PANEL (ch9) */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin: 12px 0; box-shadow: var(--shadow-sm); }
.panel h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); margin-bottom: 3px; }

/* SECTION HEADINGS */
.section-heading, .st { margin: 20px 2px 10px; }
.section-heading h2, .st h2 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.section-heading p, .st p { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sub { color: var(--muted); font-size: 11px; line-height: 1.5; }

/* CONCEPT CARDS */
.concept-card, .card, .concept {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--ch-accent);
    border-radius: var(--r-lg); margin-bottom: 16px;
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
    padding: 0;
}
.concept-card:hover, .concept:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.concept-head { padding: 15px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.concept-number, .num, .number, .concept-no {
    flex: 0 0 34px; width: 34px; height: 34px;
    border-radius: 10px; background: var(--ch-tint); color: var(--ch-accent);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.concept-title, .concept-head h3 { font-family: var(--font-serif); font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); margin: 0; }

/* CONCEPT BODY & LIST SYSTEM */
.concept-body, .concept-text { padding: 16px 18px 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.concept-body p { margin-bottom: 10px; line-height: 1.68; }
.concept-body p:last-child { margin-bottom: 0; }
.concept-body p > b:first-child, .concept-body p > strong:first-child, .concept-lead { color: var(--ink); font-weight: 750; }

.concept-body ul, .concept-body ol, .cb ul, .cb ol, .answer-toggle ul, .answer-toggle ol, .answer ul, .answer ol, .worked-full ul, .worked-full ol, .pyq-card ul, .pyq-card ol {
    margin: 10px 0 14px; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 8px;
}
.concept-body li, .cb li, .answer-toggle li, .answer li, .worked-full li, .pyq-card li {
    position: relative; padding-left: 22px; line-height: 1.65; color: var(--ink-2); font-size: 13px;
}
.concept-body ul > li::before, .cb ul > li::before, .answer-toggle ul > li::before, .answer ul > li::before, .worked-full ul > li::before, .pyq-card ul > li::before {
    content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ch-accent); box-shadow: 0 0 0 3px var(--ch-tint);
}
.concept-body ol, .cb ol, .answer-toggle ol, .answer ol { counter-reset: sj-counter; }
.concept-body ol > li, .cb ol > li, .answer-toggle ol > li, .answer ol > li { counter-increment: sj-counter; padding-left: 28px; }

/* REACTIVITY SERIES (Chapter 3) */
.series { display: flex; flex-direction: column; gap: 5px; margin: 14px 0 10px; }
.series-item { display: grid; grid-template-columns: 36px 1fr 100px; align-items: center; gap: 12px; min-height: 32px; padding: 6px 12px; border-radius: 8px; background: var(--surface-warm); border: 1px solid var(--border-subtle); font-size: 11px; font-weight: 800; }
.series-item:first-child, .series-item:nth-child(2), .series-item:nth-child(3) { background: #fff1f2; border-color: #fecdd3; }
.series-item:last-child, .series-item:nth-last-child(2) { background: #f0fdf4; border-color: #bbf7d0; }
.series-symbol { font-size: 13px; font-weight: 900; color: var(--ink); }
.series-bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--border); }
.series-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ef4444, #f59e0b); }
.series-rank { color: var(--muted); text-align: right; font-size: 10.5px; font-weight: 700; }

/* COMPARISON & GRIDS (Chapters 3, 4, 5, 6, 7) */
.compare, .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.compare-box, .cmp > div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.compare-box b, .cmp b { font-size: 13px; font-weight: 800; color: var(--ink); display: block; margin-bottom: 6px; }
.compare-box ul, .cmp ul { padding-left: 16px; margin: 0; }
.compare-box li, .cmp li { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-bottom: 4px; }
.grid { display: grid; gap: 10px; margin: 10px 0; }
.grid2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mini { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; background: var(--surface); }
.mini b { font-size: 12px; font-weight: 800; color: var(--ink); display: block; margin-bottom: 4px; }
.mini p { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.45; }

/* CHEMICAL EQUATIONS & CALLOUTS */
.eq, .equation, .formula-block { 
    margin: 8px 0 10px; 
    padding: 10px 16px; 
    border-radius: 8px; 
    background: #f8fafc; 
    color: #1e293b; 
    overflow-x: auto; 
    text-align: center; 
    font-family: var(--font-ui), system-ui, -apple-system, sans-serif; 
    font-size: 13.5px; 
    font-weight: 600; 
    line-height: 1.6;
    border: 1px solid #e2e8f0; 
    border-left: 3.5px solid var(--ch-accent); 
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); 
}
.answer-toggle .equation, .answer-toggle .eq {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid var(--border);
    padding: 10px 14px;
    font-size: 13.5px;
    box-shadow: none;
}
.badge { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--ch-tint); color: var(--ch-accent); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.board { margin-top: 10px; padding: 11px 14px; border-left: 4px solid var(--green); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--green-tint); color: #14532d; font-size: 12px; font-weight: 700; line-height: 1.5; }
.note { padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-warm); border: 1px dashed var(--border); font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin: 9px 0; }
.mem { margin-top: 9px; padding: 11px 13px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 750; background: #fff5f4; border-left: 4px solid var(--red); color: #7f1d1d; }
.exam-rule, .rule-card { margin-top: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--amber-tint); border: 1px solid var(--amber-border); color: #78350F; font-size: 12px; font-weight: 750; line-height: 1.6; }
.rule-card b, .rule-card strong { color: #592305; font-weight: 850; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12px; margin: 12px 0; }
.data-table th { background: var(--surface-warm); padding: 9px 12px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--border); text-align: left; }
.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--ink-2); }
.data-table tr:last-child td { border-bottom: none; }

/* PH SCALE & INDICATORS (Chapter 2) */
.ph-scale { position: relative; height: 50px; margin: 14px 0 8px; border-radius: 12px; overflow: hidden; display: flex; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.ph-segment { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; color: white; font-size: 9px; font-weight: 900; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.ph-seven { position: absolute; left: 50%; top: 0; bottom: 0; width: 2.5px; background: white; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.ph-labels { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; color: var(--muted); margin-top: 4px; }
.ph-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.indicator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.indicator-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 8px; font-size: 16px; background: var(--ch-tint); color: var(--ch-accent); }

/* PYQS & QUESTIONS (All chapters) */
.pyq, .pyq-card, .question-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.question-q, .question { padding: 14px 16px; font-size: 13.5px; font-weight: 750; color: var(--ink); line-height: 1.6; }
.pyq-card h3, .pyq h3 { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; line-height: 1.55; color: var(--ink); padding: 0 16px 6px; margin: 0; }
.pyq-card p.pyq-subtext, .pyq p.pyq-subtext { padding: 0 16px; margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pyq-year, .pyq-badge { display: inline-block; background: var(--ch-tint); color: var(--ch-accent); border-radius: 7px; padding: 3px 8px; font-size: 9.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; margin: 14px 16px 8px; }
.pyq-tag { display: inline-block; padding: 6px 16px 14px; color: #92400e; font-size: 10px; font-weight: 800; vertical-align: middle; }
.reveal, .reveal-btn, .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 11.5px; font-weight: 800; cursor: pointer; color: var(--ink-2); transition: all .15s; margin: 0 16px 14px auto; float: right; font-family: inherit; }
.reveal:hover, .reveal-btn:hover, .btn:hover { background: var(--ch-tint); color: var(--ch-dark); border-color: var(--ch-accent); }
.answer-toggle, .pyq .answer, .pyq-card .answer, .question-card .answer-toggle, .q .ans { display: none; clear: both; border-top: 1.5px dashed var(--border); padding: 14px 16px; background: var(--surface-warm); color: var(--ink-2); font-size: 13px; line-height: 1.65; }
.answer-toggle.show, .answer.show, .ans.show, .question-a.show { display: block !important; animation: fadeUp 0.22s ease forwards; }
.answer-label { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: var(--green-tint); color: var(--green); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.hidden { display: none !important; }

/* REVISION CARDS */
.revision { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.revision h3 { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.revision ul { padding-left: 18px; margin: 0; }
.revision li { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 5px; }

/* PYQ TABS & TOPICS (Chapters 9, 10, 11, 12) */
.pyq-subnav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 14px; scrollbar-width: none; }
.pyq-tab-btn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 750; cursor: pointer; white-space: nowrap; transition: all .15s; }
.pyq-tab-btn.active { background: var(--ch-accent); color: white; border-color: var(--ch-accent); }
.pyq-mcq-grid { display: grid; gap: 8px; margin-top: 10px; }
.pyq-opt { padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 12.5px; transition: all .15s; text-align: left; display: flex; align-items: center; gap: 10px; }
.pyq-opt.correct-opt { background: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; }
.pyq-opt.wrong-opt { background: #fee2e2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }
.opt-badge { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-warm); border: 1px solid var(--border); display: grid; place-items: center; font-size: 10px; font-weight: 900; color: var(--ink-2); }
.anim-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px; margin: 16px 0; box-shadow: var(--shadow-sm); overflow: hidden; }
.anim-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.anim-controls { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
/* 3D SIMULATION CONTAINER & OVERLAYS */
[data-three-animation] {
    position: relative;
    width: 100%;
    min-height: 320px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin: 14px 0;
    touch-action: pan-y;
}
[data-three-animation] canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    outline: none;
    z-index: 1;
}
.sj-anim-top {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.sj-anim-title {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-align: center;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sj-anim-bottom-info {
    position: absolute;
    bottom: 46px;
    left: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.sj-anim-eq {
    background: var(--formula-bg);
    color: var(--formula-text);
    padding: 4px 12px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
    text-align: center;
    max-width: 95%;
    white-space: normal;
    word-break: break-word;
}
.sj-anim-desc {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-align: center;
    max-width: 95%;
    line-height: 1.35;
}
.sj-three-controls {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}
.sj-three-controls button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sj-three-controls button:hover {
    background: var(--ch-tint);
    color: var(--ch-dark);
    border-color: var(--ch-accent);
}
.sj-three-controls .sj-three-step {
    font-size: 10px;
    font-weight: 800;
    color: var(--muted);
    padding: 0 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Specific compact formatting inside grid type cards */
.type-card {
    display: flex;
    flex-direction: column;
}
.type-card [data-three-animation] {
    min-height: 270px;
    height: 270px;
    margin: 10px 0 0;
    border-radius: var(--r-md);
    flex-grow: 1;
}
.type-card .sj-anim-top {
    display: none !important;
}
.type-card .sj-anim-bottom-info {
    bottom: 40px;
    gap: 0;
    left: 4px;
    right: 4px;
}
.type-card .sj-anim-eq {
    display: none !important;
}
.type-card .sj-anim-desc {
    font-size: 9.5px;
    padding: 3px 6px;
    border-radius: 5px;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.type-card .sj-three-controls {
    bottom: 5px;
    padding: 3px 6px;
    gap: 3px;
    left: 4px;
    right: 4px;
}
.type-card .sj-three-controls button {
    font-size: 9.5px;
    padding: 2px 6px;
}
.type-card .sj-three-controls .sj-three-step {
    font-size: 9px;
    padding: 0 2px;
}
.rule-card { background: var(--surface-warm); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 14px; margin: 10px 0; }
.anim-explain { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-top: 10px; }
.badge, .pyq-badge, .badge-pill, .intext-badge, .pyq-tag { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px; background: var(--ch-tint); color: var(--ch-accent); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.intext-section-title, .section-title h2, .section h2 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--ink); margin: 20px 0 10px; }
.section-title { margin: 24px 0 14px; }
.section-title p { font-size: 12px; color: var(--muted); margin-top: 3px; }
.indicator { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-sm); }
.indicator b { font-size: 13px; font-weight: 800; color: var(--ink); display: block; margin-bottom: 4px; }
.indicator p { font-size: 12px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.concept-svg, .pyq-svg-wrap { margin: 14px 0; background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; overflow-x: auto; text-align: center; }
.pyq-svg-cap { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 6px; text-align: center; }
.pyq-topic-section { margin-bottom: 24px; }
.pyq-topic-section h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 12px; border-bottom: 1.5px solid var(--border); padding-bottom: 6px; }

/* CALLOUTS */
.key-line, .quick-box { border-left: 3.5px solid var(--ch-accent); background: var(--ch-tint); padding: 9px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 12px; font-weight: 700; margin: 9px 0; color: var(--ink-2); line-height: 1.6; }
.exam-tip, .tip { display: block; background: var(--amber-tint); border: 1px solid var(--amber-border); border-left: 3.5px solid var(--amber); padding: 10px 14px; border-radius: var(--r-sm); font-size: 11.5px; color: #78350F; font-weight: 700; line-height: 1.6; margin: 9px 0; }
.mnemonic { display: block; background: #F0F4FF; border: 1px solid #DBEAFE; border-left: 3.5px solid #3B82F6; padding: 10px 14px; border-radius: var(--r-sm); font-size: 11.5px; color: #1E3A8A; font-weight: 700; margin: 9px 0; line-height: 1.6; }
.math-box { background: #FAF7F2; border-left: 3.5px solid var(--amber); padding: 9px 11px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 12.5px; line-height: 1.7; margin: 9px 0; font-family: var(--font-mono); }

/* FORMULA GRID */
.formula-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.formula-grid div { background: var(--surface-warm); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 11px; }
.formula-grid b { display: block; font-weight: 800; font-size: 9px; color: var(--muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .05em; }

/* TYPE GRID */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.type-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.type-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
.type-card:nth-child(1) .type-icon { background: var(--ch-tint); color: var(--ch-accent); }
.type-card:nth-child(2) .type-icon { background: var(--amber-tint); color: var(--amber); }
.type-card:nth-child(3) .type-icon { background: var(--green-tint); color: var(--green); }
.type-card:nth-child(4) .type-icon { background: #EEF2FF; color: #4F46E5; }
.type-card:nth-child(5) .type-icon { background: #FDF4FF; color: #9333EA; }
.type-card:nth-child(6) .type-icon { background: #FFF1F2; color: #E11D48; }
.type-card h3 { font-size: 15px; font-weight: 800; color: var(--ink); font-family: var(--font-serif); }
.type-card p  { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.type-card .mini-eq { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); }

/* QUESTION CARDS */
.question-card, .exercise-card, .q, .worked-full, .exercise-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.question, .exercise-q h3, .q h3 { font-family: var(--font-ui); padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.answer, .answer-toggle { border-top: 1px solid var(--border-subtle); padding: 14px 16px; background: var(--surface-warm); font-size: 13.5px; color: var(--ink); line-height: 1.68; font-weight: 450; }
.answer p, .answer-toggle p { font-size: 13.5px; color: var(--ink); line-height: 1.68; }
.answer-label, .example-label { display: inline-flex; margin-bottom: 8px; padding: 4px 8px; border-radius: 6px; background: var(--green-tint); color: #15803d; font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .07em; }
.worked-full { padding: 14px; }
.worked-full h3 { font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 9px; font-family: var(--font-ui); color: var(--ink); }
.worked-full p, .step { font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.step { padding: 8px 0; border-top: 1px dashed var(--border); }
.step.result { padding: 9px 11px; background: var(--amber-tint); border-left: 3px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0; border-top: none; margin-top: 6px; color: var(--ink); }
.mcq-options { margin-top: 8px; display: grid; gap: 5px; }
.mcq-options button { text-align: left; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg); font-size: 13px; color: var(--ink); transition: background .15s, border-color .15s; }
.mcq-options button:hover { background: var(--ch-tint); border-color: var(--ch-accent); }
.correct { color: var(--green); font-weight: 850; }

/* ch7-8 q card */
.q { padding: 14px; }
.q h3 { padding: 0; margin-bottom: 9px; }
.q p { font-size: 13.5px; color: var(--ink); line-height: 1.65; }

/* PYQ CARDS */
.pyq-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.pyq-year { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 7px; padding: 4px 9px; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.pyq-card h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.pyq-card p  { margin-top: 7px; color: var(--ink); font-size: 13.5px; line-height: 1.65; font-weight: 500; }

/* REVISION */
.revision-box, .rev { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 11px; box-shadow: var(--shadow-sm); }
.revision-box h3, .rev h3 { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; margin-bottom: 9px; color: var(--ink); }
.revision-list, .source-summary ul { list-style: none; padding-left: 0; }
.revision-list li, .source-summary li { position: relative; padding: 7px 0 7px 24px; border-bottom: 1px dashed var(--border); font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.revision-list li:last-child, .source-summary li:last-child { border-bottom: none; }
.revision-list li::before, .source-summary li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; font-size: 8px; font-weight: 900; }
.revision-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }

/* TABLES */
.table-card, .activity-panel, .data-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px; margin: 10px 0; box-shadow: var(--shadow-sm); overflow-x: auto; }
.table-card h3, .activity-panel h2, .data-panel h2 { font-family: var(--font-ui); font-size: 13.5px; font-weight: 700; margin-bottom: 9px; color: var(--ink); }
.table-card table, .activity-table, .index-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table-card th, .activity-table th, .index-table th { background: var(--bg); color: var(--muted); padding: 7px 9px; border-bottom: 1.5px solid var(--border); font-size: 9.5px; font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: .05em; }
.table-card td, .activity-table td, .index-table td { padding: 8px 9px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; font-size: 11.5px; color: var(--ink-2); }
.table-card tr:last-child td, .activity-table tr:last-child td, .index-table tr:last-child td { border-bottom: none; }
.table-note { margin-top: 8px; padding: 8px 10px; background: var(--amber-tint); border-left: 3px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 11px; color: #78350F; }

/* DIAGRAMS */
.diagram { margin: 12px 0; padding: 10px 9px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-warm); overflow-x: auto; }
.diagram-title { font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.diagram > svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagram .t { font-size: 14px; font-weight: 850; }
.diagram .small { font-size: 9px; }
.diagram .formula { font-size: 15px; font-family: var(--font-mono); font-weight: 500; }
/* DIAGRAM & SVG SHAPE DESIGN SYSTEM (Universal fill & stroke rules) */
.diagram svg rect:not([fill]), .edu-svg svg rect:not([fill]) { fill: #ffffff; stroke: var(--border); stroke-width: 1.5px; }
.diagram svg circle:not([fill]):not([class]), .edu-svg svg circle:not([fill]):not([class]) { fill: #ffffff; stroke: var(--border); stroke-width: 1.5px; }

.diagram .svg-label, .svg-label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; fill: var(--ink); }
.diagram .svg-small, .svg-small { font-family: var(--font-ui); font-size: 10px; font-weight: 600; fill: var(--muted); }
.diagram .svg-arrow, .svg-arrow { stroke: #64748b; stroke-width: 2; fill: none; }
.diagram .svg-line, .svg-line { stroke: #64748b; stroke-width: 2; fill: none; }

/* Node box colors across Chapters 3, 4, 5, 6, 7, 8 */
.diagram .svg-node, .svg-node { fill: #ffffff; stroke: var(--border); stroke-width: 2px; }
.diagram .svg-accent, .svg-accent { fill: var(--ch-accent); }
.diagram .svg-orange, .svg-orange { fill: #f59e0b; }
.diagram .svg-green, .svg-green { fill: #16a34a; }
.diagram .svg-soft, .svg-soft, .diagram .soft, .soft, .edu-svg .soft { fill: #f8fafc; stroke: var(--border-subtle); stroke-width: 1.5px; }
.diagram .box, .box, .edu-svg .box { fill: #ffffff; stroke: var(--border); stroke-width: 1.5px; }

.diagram .o, .o, .edu-svg .o { fill: #fffbeb; stroke: #f59e0b; stroke-width: 2; }
.diagram .r, .r, .edu-svg .r { fill: #fef2f2; stroke: #dc2626; stroke-width: 2; }
.diagram .g, .g, .edu-svg .g { fill: #f0fdf4; stroke: #16a34a; stroke-width: 2; }
.diagram .p, .p, .edu-svg .p { fill: #f5f3ff; stroke: #8b5cf6; stroke-width: 2; }
.edu-svg g.g circle, .diagram g.g circle { fill: #f0fdf4; stroke: #16a34a; }
.edu-svg g.o circle, .diagram g.o circle { fill: #fffbeb; stroke: #f59e0b; }
.edu-svg g.r circle, .diagram g.r circle { fill: #fef2f2; stroke: #dc2626; }
.edu-svg g.p circle, .diagram g.p circle { fill: #f5f3ff; stroke: #8b5cf6; }

/* EDUCATIONAL SVG CONTAINERS (Chapters 7 & 8) */
.edu-svg { margin: 14px 0; padding: 14px 12px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-warm); overflow-x: auto; }
.edu-svg .cap { font-size: 8.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; text-align: left; }
.edu-svg svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-ui); }
.edu-svg .lbl, .svgt { font-family: var(--font-ui); font-size: 12px; font-weight: 750; fill: var(--ink); }
.edu-svg .sm, .svgs { font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; fill: var(--muted); }
.edu-svg .tiny { font-family: var(--font-ui); font-size: 8.5px; font-weight: 600; fill: var(--muted); }
.edu-svg .arrow { stroke: #64748b; stroke-width: 2; fill: none; marker-end: url(#arr); }
.edu-svg .line { stroke: #64748b; stroke-width: 2; fill: none; }
.header-art, .header-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; pointer-events: none; }

/* CHAPTER 7 & 8 CARDS, SECTIONS & LAYOUT */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; }
.ct { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.ct .n { font-size: 11px; font-weight: 900; color: var(--ch-accent); background: var(--ch-tint); padding: 4px 9px; border-radius: 6px; letter-spacing: 0.04em; }
.ct h3 { margin: 0; font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.cb { padding: 16px 18px; }
.cb p { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin: 8px 0; }
.key { padding: 11px 14px; border-radius: var(--r-sm); font-size: 11.5px; margin-top: 12px; background: var(--ch-tint); border-left: 4px solid var(--ch-accent); color: var(--ink); line-height: 1.5; }
.st { margin: 24px 0 14px; }
.st h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--ink); }
.st p { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* CHAPTER 7 & 8 FLOATING BOTTOM NAVIGATION BAR */
nav.nav {
    position: fixed;
    z-index: 100;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 24px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
}
nav.nav button {
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 750;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
nav.nav button:hover {
    color: var(--ink);
    background: rgba(0, 0, 0, 0.04);
}
nav.nav button.on,
nav.nav button.active {
    background: var(--ch-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(46, 158, 106, 0.35);
}

/* TEST ENGINE */
.level-switcher, .levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #EDE8E1; padding: 5px; border-radius: var(--r-md); margin: 14px 0; }
.level-btn, .lev { border: none; background: transparent; padding: 9px 4px; border-radius: var(--r-sm); font-size: 10px; font-weight: 850; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; text-align: center; }
.level-btn.active, .lev.on { background: var(--surface); color: var(--ch-accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.test-panel, .test-level-pane { display: none; }
.test-panel.active, .test-level-pane.active { display: block; }
.test { display: none; } .test.on { display: block; }
.test-question, .test-q { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.test-number { color: var(--ch-accent); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.test-question h3, .test-q h3 { font-family: var(--font-serif); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.option, .opt { display: block; width: 100%; text-align: left; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; color: var(--ink-2); cursor: pointer; transition: background .15s, border-color .15s; margin-top: 6px; }
.option:hover, .opt:hover { background: var(--ch-tint); border-color: var(--ch-accent); }
.option.correct-answer, .option.good, .opt.good { background: var(--green-tint); border-color: var(--green-border); color: #14532D; }
.option.wrong-answer, .option.bad, .opt.bad { background: var(--red-tint); border-color: #FECACA; color: #7F1D1D; }
.option.selected, .opt.sel { background: var(--ch-tint); border-color: var(--ch-accent); color: var(--ch-dark); }
.test-result, #result, .result { display: none; background: var(--formula-bg); color: white; border-radius: var(--r-lg); padding: 18px; margin: 14px 0; text-align: center; }
.test-result.show, #result.show, .result.show { display: block; animation: fadeUp .25s ease; }
.score, .score-title { font-family: var(--font-serif); font-size: 32px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.submit-test, .submit { width: 100%; border: none; border-radius: var(--r-md); padding: 13px; background: linear-gradient(135deg, var(--ch-dark), var(--ch-accent)); color: white; font-size: 14px; font-weight: 900; cursor: pointer; margin-top: 6px; transition: opacity .15s; }
.submit-test:hover, .submit:hover { opacity: .9; }

/* COMING SOON */
.coming-soon, .coming { margin-top: 18px; min-height: 380px; background: radial-gradient(circle at 20% 15%, var(--ch-tint), transparent 35%), radial-gradient(circle at 85% 80%, var(--amber-tint), transparent 35%), var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; text-align: center; padding: 25px; box-shadow: var(--shadow-sm); }
.coming-icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: var(--ch-tint); color: var(--ch-accent); display: grid; place-items: center; }
.coming-soon h2, .coming h2 { font-size: 19px; font-weight: 950; }
.coming-soon p, .coming p { margin-top: 7px; color: var(--muted); font-size: 12px; max-width: 280px; margin-inline: auto; }
.locked { display: inline-flex; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 10px; font-weight: 800; border: 1px solid var(--border); }

/* CHAPTERS BOTTOM PAGINATION NAV */
.chapter-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    margin-bottom: 20px;
    padding-top: 24px;
    border-top: 1.5px dashed var(--border);
    flex-wrap: wrap;
}
.pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.pager-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--ch-accent);
    color: var(--ch-accent);
}
.pager-btn.next {
    margin-left: auto;
    background: linear-gradient(135deg, var(--ch-dark) 0%, var(--ch-accent) 100%);
    color: #ffffff;
    border: 1px solid transparent;
}
.pager-btn.next:hover {
    color: #ffffff;
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.pager-btn.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
    background: var(--surface-warm);
    border-color: var(--border-subtle);
    box-shadow: none;
}
.pager-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

/* BOTTOM NAV */
.bottom-nav { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(28,25,23,.07); display: flex; justify-content: center; padding: 0 4px; }
.nav-inner { width: min(100%, 1000px); display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; }
.nav-btn { border: none; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 8px; font-weight: 800; padding: 8px 4px; position: relative; transition: color .18s; }
.nav-btn svg { width: 20px; height: 20px; stroke-width: 2; }
.nav-btn.active { color: var(--ch-accent); }
.nav-btn.active::before { content: ""; position: absolute; top: 0; width: 24px; height: 3px; background: var(--ch-accent); border-radius: 0 0 4px 4px; }
/* Ch9 data-page buttons */
.bottom-nav > button[data-page] { flex: 1; border: none; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: color .18s; position: relative; }
.bottom-nav > button[data-page].active { color: var(--ch-accent); }
.bottom-nav > button[data-page].active::before { content: ""; position: absolute; top: 0; width: 24px; height: 3px; background: var(--ch-accent); border-radius: 0 0 4px 4px; }

/* TAB VISIBILITY */
.tab { display: none; } .tab.on, .tab.active { display: block; }

/* ACCESSIBILITY */
:focus-visible { outline: 3px solid var(--ch-accent); outline-offset: 2px; opacity: .7; }
::selection { background: var(--ch-tint); color: var(--ch-dark); }

/* DESKTOP */
@media (min-width: 700px) {
    body { padding-bottom: calc(var(--nav-h) + 36px); }
    .top-header, .header { padding: 26px 30px 32px; }
    .chapter-title, .title { font-size: clamp(28px,4vw,40px); }
    .container, .wrap, main.container { margin-top: 22px; }
    .type-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .formula-grid { grid-template-columns: repeat(4, 1fr); }
    .concept-card { border-radius: var(--r-xl); }
    .bottom-nav { left: 50%; right: auto; bottom: 14px; transform: translateX(-50%); width: min(calc(100% - 32px), 740px); height: 62px; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 10px 40px rgba(28,25,23,.12); }
    .nav-inner { height: 62px; }
    .nav-btn, .bottom-nav > button[data-page] { font-size: 9px; }
    .shell { width: min(calc(100% - 40px), 1050px); padding-top: 18px; }
}

/* PRINT */
@media print {
    .bottom-nav, .section-nav { display: none !important; }
    .tab-panel, .page { display: block !important; }
    body { padding-bottom: 0; }
}

/* ==========================================================================
   CBSE Competency-Based Questions (CBQs) Styling
   ========================================================================== */
.cbq-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
}
.cbq-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-decoration: none;
    transition: all .16s ease;
    box-shadow: var(--shadow-sm);
}
.cbq-filter-link:hover, .cbq-filter-link.active {
    background: var(--ch-tint);
    border-color: var(--ch-accent);
    color: var(--ch-dark);
}
.cbq-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}
.cbq-divider-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    background: var(--ch-tint);
    color: var(--ch-accent);
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.cbq-section-divider h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}
.cbq-lo-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3.5px solid var(--amber);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: 16px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cbq-lo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--amber);
}
.cbq-lo-header h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
    margin: 0;
}
.cbq-context-box {
    background: var(--surface-warm);
    border: 1px solid var(--border);
    border-left: 3.5px solid var(--ch-accent);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin: 18px 0 12px;
}
.cbq-context-title {
    font-size: 11px;
    font-weight: 900;
    color: var(--ch-accent);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.cbq-context-box p {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6;
    margin: 0;
}

/* MCQ Options Inside Cards */
.mcq-options {
    margin: 10px 16px 8px;
    display: grid;
    gap: 6px;
}
.mcq-option {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-2);
    padding: 8px 12px;
    background: var(--surface-warm);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mcq-option:hover {
    background: var(--ch-tint);
    border-color: var(--ch-accent);
}