/* ============================================================
   JSO CHAPTER CSS — Common styles for all NCERT chemistry chapters
   (Fully backwards-compatible, extended with new utility classes)
   ============================================================ */

/* ===== 1. RESET & BASE ===== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans Devanagari', 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.8;
    font-size: 18px;
}

/* ===== 2. CSS VARIABLES (default theme — can be overridden per chapter) ===== */
:root {
    /* ---- Backgrounds & Text ---- */
    --bg: #f7f0ed;
    --text: #2a1e1a;
    --muted: #5a4a42;

    /* ---- Sidebar (dark gradient) ---- */
    --sidebar-bg: linear-gradient(180deg, #2a1410, #4a2820 55%, #2a1410);
    --sidebar-text: #f3ece4;
    --sidebar-link: #dacfc2;
    --scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --border: #d4c4b8;
    --border-light: rgba(255, 255, 255, 0.06);
    --shadow-color: rgba(42, 20, 16, 0.12);

    /* ---- Accents ---- */
    --accent: #c99a2b;
    --accent-dark: #a87a1f;
    --accent-light: #e8d5b0;
    --green: #1d7a6e;

    /* ---- Hero ---- */
    --hero-bg: radial-gradient(ellipse at 20% 20%, #4a2820 0%, #2a1410 55%, #140a08 100%);
    --hero-text: #f3ece4;

    /* ---- Sections ---- */
    --section-bg: #2a1410;
    --section-text: #f3ece4;
    --num-text: #ffffff;
    --sub-title: #2a1410;

    /* ---- Cards & Boxes ---- */
    --card-bg: #ffffff;
    --formula-bg: #f5ede4;
    --example-bg: #f2ece4;
    --example-border: #d4c4b8;
    --note-bg: #f5ede4;
    --note-border: #1d7a6e;

    /* ---- NEET Box ---- */
    --neet-box-bg: #f5ede0;
    --neet-answer-bg: linear-gradient(145deg, #f5f0e8, #e8e4dc);
    --neet-answer-border: #c99a2b;
    --neet-answer-text: #1e1a2e;
    --neet-answer-strong: #a87a1f;

    /* ---- Accordion ---- */
    --acc-summary-color: #2a1410;
    --acc-summary-bg: #f5ede4;
    --ex-acc-bg: #fafffd;

    /* ---- Exercise ---- */
    --exercise-q: #2a1410;
    --final-bg: #e9f8ef;

    /* ---- Table ---- */
    --table-header: #2a1410;
    --table-alt: #f7f0ed;

    /* ---- Misc ---- */
    --chip-text: #ffffff;
    --label-text: #ffffff;
    --btn-hover-text: #ffffff;
    --hover-bg: rgba(255, 255, 255, 0.06);
    --top-link-text: #ffffff;
    --dark: #2a1410;
    --line: #d4c4b8;
    --field: #1d7a6e;
    --panel: #ffffff;
}

/* ===== 3. LAYOUT ===== */
.layout,
.app {
    display: flex;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 80px;
    gap: 26px;
}

.wrap,
.content {
    max-width: 1100px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* ===== 4. SIDEBAR ===== */
.sidebar {
    flex: 0 0 300px;
    width: 300px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px 20px 40px;
    border-radius: 12px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px var(--shadow-color);
    z-index: 10;
}
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
.sidebar h1 {
    font-size: 1.7rem;
    margin: 0 0 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 700;
    color: var(--sidebar-text);
}
.sidebar .subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sidebar-text);
    margin-bottom: 24px;
    display: block;
    opacity: 0.85;
}
.toc-group {
    margin-bottom: 16px;
}
.toc-group-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--accent);
    opacity: 0.9;
}
.toc-group a {
    display: block;
    color: var(--sidebar-link);
    text-decoration: none;
    font-size: 1.02rem;
    font-weight: 600;
    padding: 6px 10px 6px 14px;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
    border-radius: 3px;
    line-height: 1.5;
}
.toc-group a:hover {
    border-left-color: var(--accent);
    background: var(--hover-bg);
}
.toc-group a.active {
    font-weight: 700;
    color: var(--accent);
}

/* ===== 5. HERO ===== */
.hero {
    padding: 32px 24px;
    border-radius: 14px;
    margin-bottom: 28px;
    background: var(--hero-bg);
    color: var(--hero-text);
    box-shadow: 0 8px 24px var(--shadow-color);
    position: relative;
    overflow: hidden;
}
.hero h1 {
    margin: 0 0 6px;
    font-size: 2.2rem;
    color: #ffffff;
}
.hero p {
    margin: 0;
    opacity: 0.92;
    font-size: 1.2rem;
    max-width: 800px;
}
.hero .eyebrow {
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--accent-light, var(--accent));
}
.hero-inner {
    max-width: 840px;
    margin: 0;
    position: relative;
}
.hero .lead {
    font-size: 1.18rem;
    color: var(--hero-text);
    max-width: 680px;
    margin: 0 0 30px;
    opacity: 0.92;
}
.hero-charges {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.charge-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 0.98rem;
    color: #dbf0e6;
}
.charge-pill b {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.05rem;
    color: #ffd39a;
}
.neet-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    background: var(--field);
    color: #fff;
    padding: 2px 10px;
    border-radius: 5px;
    margin-left: 8px;
    letter-spacing: 0.5px;
}

/* ===== 6. SECTION TITLES ===== */
h2.sec,
h2.section-title {
    color: var(--section-text);
    background: var(--section-bg);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 1.5rem;
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
h2.section-title .num {
    font-size: 1.1rem;
    background: var(--accent);
    color: var(--num-text);
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
}

h3.sub,
h3.sub-title {
    color: var(--sub-title);
    border-bottom: 2px solid var(--border);
    padding-bottom: 6px;
    font-size: 1.3rem;
    margin-top: 28px;
}

.section-desc {
    color: var(--muted);
    font-size: 1.08rem;
    margin: 0 0 26px;
    font-style: italic;
}

.kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--field);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ===== 7. CARDS & BOXES ===== */
.card,
.box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 14px 0;
}
.card p:last-child {
    margin-bottom: 0;
}

/* ===== 8. FORMULA / LAW BOXES ===== */
.formula,
.law-box {
    background: var(--formula-bg);
    border-left: 4px solid var(--accent);
    padding: 12px 18px;
    margin: 12px 0;
    border-radius: 6px;
    font-size: 1.15rem;
    font-weight: 600;
    overflow-x: auto;
}
.law-box .law-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
    color: var(--accent-dark);
}
.law-box .law-statement {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.8;
    color: var(--sub-title);
}
.formula .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 7px;
    display: block;
    color: var(--accent-dark);
}

/* ===== 9. EXAMPLE BOX ===== */
.example,
.example-box {
    background: var(--example-bg);
    border: 1px solid var(--example-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 14px 0;
}
.example .tag,
.example-box .ex-label {
    font-weight: 700;
    display: inline-block;
    background: var(--accent);
    color: var(--label-text);
    font-size: 0.88rem;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.example-box .ex-question {
    font-weight: 600;
    color: var(--sub-title);
    margin-bottom: 14px;
    font-size: 1.08rem;
}
.example-box .etitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 1px;
    color: #3547b0;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ===== 10. FACTS BOX ===== */
.facts-box {
    background: var(--card-bg);
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    padding: 18px 22px;
}
.facts-box ol {
    padding-left: 22px;
}
.facts-box li {
    margin-bottom: 10px;
    font-size: 1.04rem;
}

.facts {
    background: #fff8ec;
    border: 1px solid #f0ddb3;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 20px 0;
}
.facts .ftitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 11px;
}
.facts ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.facts li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 1.01rem;
    color: #3a3020;
}
.facts li::before {
    content: "⚗";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-size: 0.9rem;
}

/* ===== 11. NOTE, WARN, TIP, KEYPOINT ===== */
.note,
.keypoint-box {
    background: var(--note-bg);
    border-left: 4px solid var(--note-border);
    padding: 10px 16px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 1.02rem;
}
.keypoint-box .kp-label {
    font-weight: 700;
    color: var(--sub-title);
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.warn {
    background: #fdf1e8;
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 1.02rem;
    color: #5c3a16;
}
.tip {
    background: #eafaf3;
    border-left: 4px solid #1d7a6e;
    border-radius: 8px;
    padding: 13px 17px;
    margin: 15px 0;
    font-size: 0.98rem;
    color: #0f4a30;
}

/* ===== 12. DIAGRAM / FIGURE ===== */
.diagram,
.figure {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    margin: 22px 0;
    text-align: center;
}
.diagram svg,
.figure svg {
    max-width: 100%;
    height: auto;
}
.diagram .cap,
.figure .figure-caption {
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 12px;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.3px;
    font-style: italic;
}

/* ===== 13. TABLES ===== */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 14px 0;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-color);
}
th, td {
    border: 1px solid var(--border);
    padding: 10px 14px;
    text-align: left;
    font-size: 1.02rem;
}
th {
    background: var(--table-header);
    color: var(--sub-title);
    font-weight: 700;
}
tr:nth-child(even) {
    background: var(--table-alt);
}
.wide-table-wrap {
    overflow-x: auto;
}
table.alt th {
    background: var(--accent-dark);
}
table.alt tr:nth-child(even) {
    background: #fdf4e8;
}

/* ===== 14. ACCORDION (common) ===== */
.acc-toolbar {
    display: flex;
    gap: 10px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.acc-toolbar button {
    background: var(--card-bg);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.92rem;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.acc-toolbar button:hover {
    background: var(--accent);
    color: var(--btn-hover-text);
}

.acc-item,
.accordion-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 14px 0;
    overflow: hidden;
    background: var(--card-bg);
}
.acc-item > summary,
.accordion-item summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 44px 14px 18px;
    font-weight: 700;
    color: var(--acc-summary-color);
    background: var(--acc-summary-bg);
    position: relative;
    line-height: 1.6;
    font-size: 1.08rem;
}
.acc-item > summary::-webkit-details-marker,
.accordion-item summary::-webkit-details-marker {
    display: none;
}
.acc-item > summary::marker,
.accordion-item summary::marker {
    content: "";
}
.acc-item > summary::after,
.accordion-item summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: inherit;
}
.acc-item[open] > summary::after,
.accordion-item[open] summary::after {
    content: "–";
}
.acc-item .acc-body,
.accordion-item .answer {
    padding: 6px 22px 20px;
    border-top: 1px solid var(--border);
}
.accordion-item .answer p {
    margin: 0 0 10px;
    font-size: 1.04rem;
}
.accordion-item .answer ul,
.accordion-item .answer ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

/* ===== 15. EXERCISE SECTION ===== */
.exercise {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 16px 0;
}
.exercise .q {
    font-weight: 700;
    color: var(--exercise-q);
    margin-bottom: 8px;
    font-size: 1.08rem;
}
.exercise .ans {
    margin-top: 8px;
    font-size: 1.02rem;
}
.exercise .final {
    background: var(--final-bg);
    border-left: 4px solid var(--green);
    padding: 10px 14px;
    margin-top: 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.05rem;
}

/* ===== 16. EXERCISE HEADER ===== */
.ex-head {
    background: var(--dark);
    color: #fff;
    padding: 38px 48px 28px;
    border-radius: 12px 12px 0 0;
}
.ex-head h2 {
    color: #fff;
    margin: 0 0 8px;
    font-size: 1.55rem;
}
.ex-head p {
    color: #b8b4d8;
    margin: 0;
    font-size: 1.0rem;
}

/* ===== 17. DETAILS (Q&A) ===== */
details.q {
    border-bottom: 1px solid var(--line);
}
details.q:last-child {
    border-bottom: none;
}
details.q summary {
    cursor: pointer;
    padding: 16px 48px;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    list-style: none;
    font-size: 1.03rem;
}
details.q summary::-webkit-details-marker {
    display: none;
}
details.q summary::before {
    content: "▸";
    color: var(--field);
    flex: 0 0 auto;
    transition: transform 0.15s;
    font-size: 0.9rem;
    margin-top: 4px;
}
details.q[open] summary::before {
    transform: rotate(90deg);
}
.qnum {
    font-family: 'IBM Plex Mono', monospace;
    color: #fff;
    background: var(--accent);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
    flex: 0 0 auto;
}
.ans {
    padding: 2px 48px 22px 82px;
    color: #2a3444;
    font-size: 1.0rem;
}
.ans .step {
    margin-bottom: 9px;
}
.ans .final {
    background: #eafaf3;
    border: 1px solid #b9e6cf;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    font-weight: 600;
    color: #12523a;
}

/* ===== 18. NEET BOX ===== */
.neet-box {
    background: var(--neet-box-bg);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 20px 26px;
    margin: 22px 0;
    position: relative;
}
.neet-box .neet-label {
    position: absolute;
    top: -14px;
    right: 20px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 4px 16px;
    border-radius: 14px;
    letter-spacing: 0.5px;
    font-family: 'IBM Plex Mono', monospace;
}
.neet-box ul {
    margin: 6px 0 0;
    padding-left: 24px;
}
.neet-box li {
    font-size: 1.06rem;
    margin-bottom: 9px;
    color: #3a3020;
}

/* ===== 19. NEET ANSWER COLORFUL ===== */
.answer-colorful {
    background: var(--neet-answer-bg);
    border-left: 6px solid var(--neet-answer-border);
    border-radius: 0 10px 10px 0;
    padding: 16px 22px 16px 26px;
    margin: 6px 0 0;
    box-shadow: 0 2px 12px var(--shadow-color);
}
.answer-colorful p {
    color: var(--neet-answer-text);
    margin-bottom: 8px;
}
.answer-colorful strong {
    color: var(--neet-answer-strong);
}
.answer-colorful ul,
.answer-colorful ol {
    padding-left: 22px;
    margin: 6px 0 8px;
}
.answer-colorful li {
    color: var(--neet-answer-text);
    margin-bottom: 4px;
}
.answer-colorful .ans-label {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 14px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

/* ===== 20. NEET YEAR GROUP ===== */
.yeargroup {
    background: var(--dark);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    padding: 9px 48px;
    text-transform: uppercase;
}

/* ===== 21. OPTIONS (for MCQ) ===== */
.opts {
    list-style: none;
    margin: 8px 0 12px;
    padding: 0;
}
.opts li {
    padding: 6px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 0.97rem;
    color: #2a3444;
    background: #f9fbfa;
}
.opts li.correct {
    border-color: #8fd6b4;
    background: #eafaf3;
    color: #12523a;
    font-weight: 600;
}

/* ===== 22. MISCELLANEOUS UTILITY CLASSES ===== */
.mono {
    font-family: 'IBM Plex Mono', monospace;
}
.top-link {
    position: fixed;
    left: 24px;
    bottom: 24px;
    background: var(--accent);
    color: var(--top-link-text);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.4rem;
    box-shadow: 0 4px 14px var(--shadow-color);
    z-index: 20;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.top-link:hover {
    opacity: 1;
}

/* ===== 23. PHYLUM / PART CARDS (used in Biomolecules) ===== */
.phylum-card,
.part-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 26px;
    margin: 18px 0;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: box-shadow 0.2s;
}
.phylum-card:hover,
.part-card:hover {
    box-shadow: 0 4px 16px var(--shadow-color);
}
.phylum-card h4,
.part-card h4 {
    margin: 0 0 10px;
    color: var(--accent-dark);
    font-size: 1.3rem;
}
.phylum-card .tag-row,
.part-card .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}
.phylum-card .tag,
.part-card .tag {
    background: var(--example-bg);
    border: 1px solid var(--border);
    color: var(--sub-title);
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
}

/* ===== 24. FIGURE ROW ===== */
.figure-row {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}
.figure-row .fig-item {
    text-align: center;
}
.figure-row .fig-item span {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--muted);
}

/* ===== 25. BADGES ===== */
.q-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    border-radius: 20px;
    padding: 2px 14px;
    font-size: 0.86rem;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.q-sub {
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--muted);
    margin-top: 6px;
}
.q-badge-ex {
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    border-radius: 20px;
    padding: 3px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== 26. EXERCISE ACCORDION VARIANT ===== */
.exercise-accordion .accordion-item {
    border-left: 5px solid var(--accent);
    background: var(--ex-acc-bg, #fafffd);
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.exercise-accordion .accordion-item summary {
    font-weight: 700;
    color: var(--sub-title);
    background: #f5f0e8;
    border-radius: 10px 10px 0 0;
}
.exercise-accordion .accordion-item .answer {
    padding: 0 22px 20px 60px;
}

/* ===== 27. PAGE SECTION ===== */
.page-section {
    padding: 32px 24px;
    border-bottom: 1px solid var(--border);
    max-width: 1100px;
}

/* ===== 28. SUMMARY GRID ===== */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 20px 0;
}
.summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-right: 4px solid var(--accent);
    border-radius: 8px;
    padding: 18px 22px;
    transition: transform 0.15s, box-shadow 0.2s;
}
.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px var(--shadow-color);
}
.summary-card h5 {
    margin: 0 0 8px;
    color: var(--sub-title);
    font-size: 1.06rem;
}
.summary-card p {
    margin: 0;
    font-size: 0.98rem;
    color: var(--muted);
}

/* ===== 29. RULES LIST ===== */
.rules-list {
    counter-reset: rulenum;
    list-style: none;
    padding: 0;
    margin: 18px 0;
}
.rules-list li {
    counter-increment: rulenum;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 20px 14px 56px;
    margin-bottom: 10px;
    position: relative;
    font-size: 1.02rem;
    transition: box-shadow 0.15s;
}
.rules-list li:hover {
    box-shadow: 0 2px 8px var(--shadow-color);
}
.rules-list li::before {
    content: counter(rulenum);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ===== 30. UNIT BANNER ===== */
.unit-banner {
    background: var(--unit-banner-bg, linear-gradient(120deg, #eaf5f3, #f8fafc));
    padding: 40px 60px;
    border-bottom: 2px solid var(--border);
}
.unit-banner .unit-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-dark);
    font-weight: 700;
    margin-bottom: 8px;
}
.unit-banner h2 {
    font-size: 1.9rem;
    color: var(--sub-title);
    margin: 0 0 14px;
}
.unit-banner p {
    max-width: 900px;
    font-size: 1.03rem;
    color: var(--muted);
}
.unit-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.unit-chapters .uc-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-right: 4px solid var(--accent);
    border-radius: 8px;
    padding: 12px 18px;
    transition: transform 0.15s ease, box-shadow 0.2s;
}
.unit-chapters .uc-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-color);
}
.unit-chapters .uc-item span {
    display: block;
    font-size: 0.78rem;
    color: var(--accent-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.unit-chapters .uc-item strong {
    color: var(--sub-title);
    font-size: 1.02rem;
}

/* ===== 31. SCIENTIST / HISTORY BOX ===== */
.history-box {
    background: var(--history-bg, #f0f4f3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 30px;
    margin: 24px 0;
    position: relative;
    display: flex;
    gap: 22px;
    align-items: flex-start;
}
.history-box::before {
    content: "वैज्ञानिक परिचय";
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--accent);
    color: #fff;
    font-size: 0.76rem;
    padding: 3px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
}
.history-box .portrait {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    box-shadow: 0 4px 12px var(--shadow-color);
}
.history-box .h-name {
    font-weight: 700;
    color: var(--sub-title);
    font-size: 1.15rem;
    display: block;
    margin-bottom: 2px;
}
.history-box .h-years {
    font-size: 0.88rem;
    color: var(--muted);
    display: block;
    margin-bottom: 10px;
}

/* ===== 32. TAXA PYRAMID ===== */
.taxa-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 24px 0;
}
.taxa-pyramid .tp-row {
    background: var(--formula-bg);
    border: 1px solid var(--pyramid-border, #b8cfc9);
    border-radius: 6px;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    color: var(--sub-title);
    font-size: 1.02rem;
    width: 100%;
    max-width: 280px;
}
.taxa-pyramid .tp-arrow {
    color: var(--accent);
    font-size: 1.3rem;
}

/* ===== 33. COMPARISON GRID ===== */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 20px 0;
}
.compare-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
}
.compare-card h5 {
    margin: 0 0 10px;
    color: var(--sub-title);
    font-size: 1.2rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
}

/* ===== 34. FORMULA BOX (alternate) ===== */
.formula-box {
    background: var(--formula-bg);
    border: 1px dashed var(--accent);
    border-radius: 8px;
    padding: 18px 24px;
    margin: 18px 0;
    text-align: center;
    font-size: 1.15rem;
    color: var(--sub-title);
    font-weight: 600;
}

/* ===== 35. QUESTION OPTIONS (inline) ===== */
.q-options {
    padding: 0 26px 18px 74px;
    font-size: 1.03rem;
    color: var(--muted);
}
.q-options div {
    margin-bottom: 6px;
}
.q-options b {
    color: var(--accent-dark);
    margin-left: 6px;
}

/* ===== 36. DIVIDER ===== */
.divider {
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    margin: 30px 0;
}

/* ===== 37. FOOTER ===== */
footer {
    padding: 30px 40px;
    background: var(--sub-title, #163a24);
    color: #b7d0cd;
    text-align: center;
    font-size: 0.92rem;
}

/* ================================================================
   ===== 38. RESPONSIVE BREAKPOINTS =====
   ================================================================ */

/* --- 900px and below (tablets / small laptops) --- */
@media (max-width: 900px) {
    .layout,
    .app {
        flex-direction: column;
        padding: 16px 12px 60px;
        gap: 16px;
    }
    .sidebar {
        position: static;
        width: 100%;
        max-height: none;
        flex: 1 1 auto;
        padding: 20px 16px;
    }
    .hero {
        padding: 28px 20px;
    }
    .hero h1 {
        font-size: 1.8rem;
    }
    .hero .lead {
        font-size: 1rem;
    }
    .wrap,
    .content {
        max-width: 100%;
        padding: 0 4px;
    }
    .page-section {
        padding: 28px 20px;
    }
    .section-title {
        font-size: 1.4rem;
        padding: 10px 14px;
    }
    .ex-head {
        padding: 28px 22px 20px;
    }
    details.q summary {
        padding: 15px 22px;
    }
    .ans {
        padding: 2px 22px 20px 48px;
    }
    .yeargroup {
        padding: 9px 22px;
    }
    .charge-pill {
        font-size: 0.88rem;
        padding: 7px 14px;
    }
    .wide-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        max-width: 100%;
    }
    .diagram svg,
    .figure svg {
        max-width: 100%;
        height: auto;
    }
    .history-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .history-box .portrait {
        width: 80px;
        height: 80px;
        font-size: 1.6rem;
    }
    .phylum-card,
    .part-card {
        padding: 16px 18px;
    }
    .phylum-card .tag-row,
    .part-card .tag-row {
        gap: 6px;
    }
    .phylum-card .tag,
    .part-card .tag {
        font-size: 0.8rem;
        padding: 3px 10px;
    }
    .compare-grid {
        grid-template-columns: 1fr 1fr;
    }
    .unit-banner {
        padding: 28px 20px;
    }
    .exercise-accordion .accordion-item .answer {
        padding: 0 16px 18px 16px;
    }
    .neet-pyq-wrap .accordion-item .answer {
        padding: 0 16px 18px 16px;
    }
}

/* --- 760px and below (large mobiles) --- */
@media (max-width: 760px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
    .page-section {
        padding: 24px 16px;
    }
    .card,
    .box,
    .neet-box,
    .facts,
    .keypoint-box,
    .note,
    .warn,
    .tip {
        padding: 12px 16px;
        margin: 12px 0;
    }
    .formula,
    .law-box {
        padding: 10px 14px;
        font-size: 1.05rem;
    }
    .answer-colorful {
        padding: 12px 16px;
        border-left-width: 4px;
    }
    table {
        font-size: 0.9rem;
    }
    th, td {
        padding: 6px 8px;
        word-break: break-word;
    }
    .accordion-item .answer {
        padding: 0 14px 16px 14px;
    }
    .q-options {
        padding: 0 14px 14px 14px;
        font-size: 0.95rem;
    }
    .q-badge,
    .q-badge-ex {
        font-size: 0.78rem;
        padding: 2px 10px;
    }
    .neet-box .neet-label {
        font-size: 0.7rem;
        padding: 2px 12px;
        top: -12px;
        right: 12px;
    }
    .hero .lead {
        font-size: 1rem;
    }
    .section-desc {
        font-size: 1rem;
    }
    .summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .top-link {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        left: 12px;
        bottom: 12px;
    }
    .sidebar h1 {
        font-size: 1.4rem;
    }
}

/* --- 600px and below (small mobiles) --- */
@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    .sidebar {
        padding: 16px 14px;
    }
    .card,
    .box,
    .example,
    .example-box {
        padding: 12px 14px;
    }
    table {
        font-size: 0.85rem;
    }
    th, td {
        padding: 5px 7px;
        word-break: break-word;
    }
    .acc-toolbar button {
        font-size: 0.82rem;
        padding: 6px 12px;
    }
    .acc-item > summary,
    .accordion-item summary {
        padding: 12px 38px 12px 14px;
        font-size: 0.98rem;
    }
    .unit-banner {
        padding: 20px 16px;
    }
    .unit-banner h2 {
        font-size: 1.4rem;
    }
    .unit-chapters {
        grid-template-columns: 1fr 1fr;
    }
    .page-section {
        padding: 18px 12px;
    }
    .hero {
        padding: 24px 14px;
    }
    .hero h1 {
        font-size: 1.5rem;
    }
    .hero .lead {
        font-size: 0.95rem;
    }
    .charge-pill {
        font-size: 0.78rem;
        padding: 5px 10px;
    }
    .charge-pill b {
        font-size: 0.85rem;
    }
    .section-title {
        font-size: 1.2rem;
        padding: 8px 12px;
        gap: 6px;
    }
    .section-title .num {
        font-size: 0.9rem;
        padding: 2px 8px;
    }
    .ex-head {
        padding: 22px 16px 18px;
    }
    .ex-head h2 {
        font-size: 1.2rem;
    }
    details.q summary {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
    .ans {
        padding: 2px 16px 16px 32px;
        font-size: 0.95rem;
    }
    .ans .final {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
    .yeargroup {
        padding: 8px 16px;
        font-size: 0.75rem;
    }
    .opts li {
        font-size: 0.9rem;
        padding: 4px 10px;
    }
    .summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .summary-card {
        padding: 14px 16px;
    }
    .figure {
        padding: 14px 10px;
    }
    .figure svg {
        max-width: 100%;
        height: auto;
    }
    .neet-box .neet-label {
        font-size: 0.65rem;
        padding: 2px 10px;
        top: -10px;
        right: 10px;
    }
    .section-desc {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }
    .top-link {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        left: 8px;
        bottom: 8px;
    }
    footer {
        padding: 24px 16px 40px;
        font-size: 0.85rem;
    }
    .diagram {
        padding: 12px 8px;
    }
    .diagram .cap {
        font-size: 0.75rem;
    }
    .kicker {
        font-size: 11px;
    }
}

/* --- 400px and below (very small mobiles) --- */
@media (max-width: 400px) {
    .page-section {
        padding: 14px 10px;
    }
    .hero {
        padding: 18px 12px;
    }
    .hero h1 {
        font-size: 1.3rem;
    }
    .hero .lead {
        font-size: 0.85rem;
    }
    .charge-pill {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    .charge-pill b {
        font-size: 0.75rem;
    }
    .card,
    .neet-box,
    .facts {
        padding: 8px 10px;
    }
    table {
        font-size: 0.75rem;
    }
    th, td {
        padding: 4px 5px;
    }
    .accordion-item summary {
        font-size: 0.9rem;
        padding: 10px 34px 10px 10px;
    }
    .q-badge,
    .q-badge-ex {
        font-size: 0.65rem;
        padding: 1px 6px;
    }
    .neet-box .neet-label {
        font-size: 0.6rem;
        padding: 1px 8px;
        top: -8px;
        right: 8px;
    }
    .answer-colorful {
        padding: 8px 10px;
        border-left-width: 3px;
    }
    .answer-colorful .ans-label {
        font-size: 0.7rem;
        padding: 1px 10px;
    }
    .section-desc {
        font-size: 0.88rem;
    }
    .section-title {
        font-size: 1.05rem;
        padding: 6px 10px;
    }
    .section-title .num {
        font-size: 0.8rem;
        padding: 2px 6px;
    }
    .sidebar h1 {
        font-size: 1.2rem;
    }
    .opts li {
        font-size: 0.82rem;
        padding: 3px 8px;
    }
    .yeargroup {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
    .top-link {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        left: 6px;
        bottom: 6px;
    }
    footer {
        padding: 16px 8px 24px;
        font-size: 0.8rem;
    }
    .formula,
    .law-box {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}