/* ============================================================
   Flamingo & Vistas Quiz - Immersive UI Stylesheet
   Strict CSP compliant: no inline styles in HTML, all styling here.
   Premium design with glassmorphism, animations & micro-interactions.
   ============================================================ */

/* ───────── CSS Custom Properties ───────── */

:root {    
    --clr-primary:       #4f46e5;
    --clr-primary-rgb:   79, 70, 229;     /* #4f46e5 — for use in rgba(var(--clr-primary-rgb), α) */
    --clr-primary-dark:  #3730a3;
    --clr-primary-dark-rgb: 55, 48, 163;  /* #3730a3 */
    --clr-primary-light: #818cf8;
    --clr-accent:        #7c3aed;
    --clr-accent-rgb:    124, 58, 237;    /* #7c3aed */
    --clr-success:       #047857;
    --clr-success-bg:    #d1fae5;
    --clr-danger:        #dc2626;
    --clr-danger-bg:     #fee2e2;
    --clr-warning:       #b45309;
    --clr-warning-bg:    #fef3c7;
    --clr-info:          #0e7490;

    /* Surfaces */
    --bg-body:           #f0f4ff;
    --bg-card:           rgba(255, 255, 255, 0.78);
    --bg-card-solid:     #ffffff;
    --bg-header:         linear-gradient(135deg, #3730a3 0%, #6d28d9 50%, #4f46e5 100%);
    --bg-hover:          rgba(var(--clr-primary-rgb), 0.08);
    --glass-blur:        16px;
    --glass-border:      1px solid rgba(255, 255, 255, 0.3);

    /* Text */
    --clr-text:          #1e1b4b;
    --clr-text-muted:    #4b5563;  /* darkened from #6b7280 for WCAG AA on #f0f4ff */
    --clr-text-inverse:  #ffffff;

    /* Borders */
    --clr-border:        rgba(var(--clr-primary-rgb), 0.15);
    --clr-border-focus:  var(--clr-primary);

    /* Sizing */
    --max-width:         960px;
    --radius-sm:         8px;
    --radius-md:         14px;
    --radius-lg:         20px;
    --radius-xl:         28px;
    --shadow-sm:         0 2px 8px rgba(var(--clr-primary-rgb), 0.06);
    --shadow-md:         0 8px 24px rgba(var(--clr-primary-rgb), 0.1);
    --shadow-lg:         0 16px 48px rgba(var(--clr-primary-rgb), 0.15);
    --shadow-glow:       0 0 30px rgba(var(--clr-primary-rgb), 0.15);

    /* Focus ring (WCAG compliant) */
    --focus-ring:        0 0 0 3px rgba(var(--clr-primary-rgb), 0.4);

    /* Transitions */
    --transition:        0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Font */
    --font-body:         'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ───────── Dark Theme ───────── */

[data-theme="dark"] {
    --bg-body:           #0c0a1d;
    --bg-card:           rgba(30, 27, 55, 0.75);
    --bg-card-solid:     #1e1b37;
    --bg-hover:          rgba(var(--clr-accent-rgb), 0.12);
    --clr-text:          #e2e0f0;
    --clr-text-muted:    #9ca3af;
    --clr-border:        rgba(var(--clr-accent-rgb), 0.2);
    --clr-success-bg:    rgba(16, 185, 129, 0.15);
    --clr-danger-bg:     rgba(239, 68, 68, 0.15);
    --clr-warning-bg:    rgba(245, 158, 11, 0.15);
    --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg:         0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow:       0 0 40px rgba(var(--clr-accent-rgb), 0.2);
    --glass-border:      1px solid rgba(var(--clr-accent-rgb), 0.15);
}

/* ───────── Animated Background ───────── */

.animated-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--bg-body);
    transition: background 0.6s ease;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: orbFloat 20s ease-in-out infinite;
    pointer-events: none;
}

.bg-orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(var(--clr-primary-rgb), 0.35), transparent 70%);
    top: -10%;
    right: -5%;
    animation-duration: 22s;
}

.bg-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.3), transparent 70%);
    bottom: -10%;
    left: -5%;
    animation-duration: 18s;
    animation-delay: -7s;
}

.bg-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2), transparent 70%);
    top: 40%;
    left: 30%;
    animation-duration: 25s;
    animation-delay: -12s;
}

[data-theme="dark"] .bg-orb-1 {
    background: radial-gradient(circle, rgba(var(--clr-primary-rgb), 0.2), transparent 70%);
}
[data-theme="dark"] .bg-orb-2 {
    background: radial-gradient(circle, rgba(var(--clr-accent-rgb), 0.18), transparent 70%);
}
[data-theme="dark"] .bg-orb-3 {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12), transparent 70%);
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, -40px) scale(1.05); }
    50%      { transform: translate(-20px, 20px) scale(0.95); }
    75%      { transform: translate(15px, 35px) scale(1.02); }
}

/* ───────── Reset & Base ───────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: transparent;
    color: var(--clr-text);
    min-height: 100vh;
    padding: 0;
    line-height: 1.6;
    transition: color var(--transition-smooth);
    overflow-x: hidden;
}

/* ───────── App Container ───────── */

.app-container {
    max-width: var(--max-width);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ───────── Header ───────── */

.app-header {
    background: var(--bg-header);
    color: var(--clr-text-inverse);
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
    overflow: hidden;
}

.app-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: headerShimmer 8s ease-in-out infinite;
}

@keyframes headerShimmer {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}

.header-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.app-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    position: relative;
}

.app-subtitle {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.2rem;
}

.header-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ───────── Theme Toggle Switch ───────── */

.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch-track {
    display: block;
    width: 56px;
    height: 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    position: relative;
    transition: background 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3), inset 0 1px 3px rgba(0,0,0,0.1);
}

[data-theme="dark"] .theme-switch-track {
    background: linear-gradient(135deg, #312e81, #1e1b4b);
    box-shadow: 0 2px 8px rgba(49, 46, 129, 0.4), inset 0 1px 3px rgba(0,0,0,0.3);
}

.theme-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

[data-theme="dark"] .theme-switch-thumb {
    transform: translateX(26px);
    background: #1e1b4b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.theme-switch-icon {
    position: absolute;
    font-size: 14px;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
}

.theme-switch-icon.sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #f59e0b;
}

.theme-switch-icon.moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    color: #a5b4fc;
}

[data-theme="dark"] .theme-switch-icon.sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-switch-icon.moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-switch:focus-within .theme-switch-track {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3), 0 2px 8px rgba(251, 191, 36, 0.3);
}

/* ───────── Icon Buttons ───────── */

.icon-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--clr-text-inverse);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ───────── Back to Site Button ───────── */
/* Navigation link styled as a button — sits in the header-controls
   nav, before the theme toggle. Uses an <a> element so it works even
   if JavaScript fails to load. */
.back-to-site-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--clr-text-inverse);
    text-decoration: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

.back-to-site-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-site-btn:active {
    transform: translateY(0);
}

.back-to-site-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.back-to-site-label {
    line-height: 1;
}

.icon-btn:active {
    transform: translateY(0);
}

.icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ───────── Timer Bar ───────── */

.timer-bar {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--clr-border);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.timer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.timer-label {
    font-size: 0.7rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.timer-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-primary);
    font-variant-numeric: tabular-nums;
}

.timer-warning {
    color: var(--clr-danger) !important;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ───────── Navigation Tabs ───────── */

.nav-tabs {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    overflow-x: auto;
    position: relative;
}

.nav-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--clr-primary), transparent);
    opacity: 0.3;
}

.tab {
    padding: 0.8rem 1.25rem;
    border: none;
    background: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
    border-bottom: 3px solid transparent;
    font-family: inherit;
    position: relative;
}

.tab:hover:not(:disabled) {
    color: var(--clr-primary);
    background: var(--bg-hover);
}

.tab.active {
    color: var(--clr-primary);
    border-bottom-color: var(--clr-primary);
    font-weight: 600;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--clr-primary);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 10px var(--clr-primary);
}

.tab:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ───────── Main Content ───────── */

.main-content {
    flex: 1;
    position: relative;
}

.screen {
    display: none;
    padding: 1.5rem;
    animation: screenEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.screen.active {
    display: block;
}

@keyframes screenEnter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.screen-title {
    color: var(--clr-primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.screen-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
    border-radius: 2px;
}

/* ───────── Home Screen ───────── */

.home-content {
    max-width: 800px;
    margin: 0 auto;
}

.welcome-section {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 2rem;
    animation: floatUp 0.6s ease-out;
}

@keyframes floatUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.welcome-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clr-primary);
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-desc {
    color: var(--clr-text-muted);
    font-size: 1.0625rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Mode Selection */
.mode-section {
    margin-bottom: 2rem;
}

.section-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-heading::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--clr-primary), var(--clr-accent));
    border-radius: 2px;
}

.book-heading {
    font-size: 1.25rem;
}

.book-heading.flamingo { color: var(--clr-primary); }
.book-heading.vistas   { color: var(--clr-accent); }
.book-heading.vocab    { color: var(--clr-info); }
.book-heading.grammar  { color: var(--clr-success); }

/* ─── RBSE Class 11 sub-section colors ───
   Each sub-section on class11.html gets its own heading color
   so students can visually distinguish Hornbill Prose, Hornbill
   Poetry, Snapshots, Grammar, and Vocabulary at a glance.
   - Hornbill Prose:   amber  (#b45309)  — warm, evokes Rajasthan
   - Hornbill Poetry:  rose   (#be185d)  — lyrical/literary
   - Snapshots:        indigo (#4338ca)  — supplementary companion
   - Grammar:          green  (#047857)  — matches existing grammar
   - Vocabulary:       teal   (#0e7490)  — matches existing vocab */
.book-heading.rbse-hornbill-prose   { color: #b45309; }
.book-heading.rbse-hornbill-poetry  { color: #be185d; }
.book-heading.rbse-snapshots        { color: #4338ca; }
.book-heading.rbse-grammar          { color: #047857; }
.book-heading.rbse-vocab            { color: #0e7490; }

.mode-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.mode-card {
    flex: 1;
    min-width: 180px;
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition);
    font-family: inherit;
    color: var(--clr-text);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--clr-primary-rgb), 0.05), rgba(var(--clr-accent-rgb), 0.05));
    opacity: 0;
    transition: opacity var(--transition);
}

.mode-card:hover::before {
    opacity: 1;
}

.mode-card:hover {
    border-color: var(--clr-primary-light);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.mode-card.selected {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-glow);
    background: linear-gradient(135deg, rgba(var(--clr-primary-rgb), 0.08), rgba(var(--clr-accent-rgb), 0.04));
}

.mode-card.selected::after {
    content: '\2713';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 22px;
    height: 22px;
    background: var(--clr-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.mode-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

.mode-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--clr-primary);
    position: relative;
    z-index: 1;
}

.mode-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

/* Custom Options */
.custom-options {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 2rem;
    animation: expandIn 0.4s ease;
}

@keyframes expandIn {
    from { opacity: 0; max-height: 0; transform: scaleY(0.8); }
    to   { opacity: 1; max-height: 300px; transform: scaleY(1); }
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 150px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--clr-text-muted);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-solid);
    color: var(--clr-text);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all var(--transition);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: var(--focus-ring), 0 0 0 6px rgba(var(--clr-primary-rgb), 0.08);
}

/* Book Sections */
.book-section {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-lg);
    border: var(--glass-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.book-section:hover {
    box-shadow: var(--shadow-md);
}

/* Chapter Grid */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.875rem;
}

.chapter-card {
    background: var(--bg-card-solid);
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.125rem 1.25rem;
    text-align: left;
    transition: all var(--transition);
    font-family: inherit;
    color: var(--clr-text);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    position: relative;
    overflow: hidden;
}

.chapter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-smooth);
}

.chapter-card:hover {
    border-color: var(--clr-primary-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.chapter-card:hover::before {
    transform: scaleX(1);
}

/* Chapter actions row */
.chapter-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    align-items: stretch;
}

.chapter-start-btn {
    flex: 1;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: var(--clr-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.875rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    letter-spacing: 0.02em;
}

.chapter-start-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--clr-primary-rgb), 0.35);
}

.chapter-start-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.chapter-insights-btn {
    flex: 0 0 auto;
    background: var(--bg-hover);
    color: var(--clr-primary);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    letter-spacing: 0.02em;
}

.chapter-insights-btn:hover {
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    border-color: var(--clr-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--clr-primary-rgb), 0.3);
}

.chapter-insights-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.chapter-insights-btn .insights-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.chapter-insights-btn .insights-label {
    line-height: 1;
}

.chapter-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-primary);
    line-height: 1.4;
}

.chapter-author {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    font-style: italic;
}

.chapter-count {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    font-weight: 600;
    margin-top: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Instructions */
.instructions-box {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    border-left: 4px solid var(--clr-primary);
}

.instructions-box summary {
    font-weight: 700;
    color: var(--clr-primary);
    cursor: pointer;
    padding: 0.375rem 0;
    font-size: 1.0625rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    transition: color var(--transition);
}

.instructions-box summary::before {
    content: '\25B6';
    font-size: 0.75rem;
    transition: transform var(--transition);
    display: inline-block;
}

.instructions-box[open] summary::before {
    transform: rotate(90deg);
}

.instructions-box summary:hover {
    color: var(--clr-accent);
}

.instructions-box ul {
    margin: 1rem 0 0 1.25rem;
    list-style: disc;
}

.instructions-box li {
    margin: 0.5rem 0;
    line-height: 1.7;
    font-size: 0.9375rem;
}

kbd {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 5px;
    font-size: 0.8125rem;
    font-family: monospace;
    box-shadow: 0 2px 4px rgba(var(--clr-primary-rgb), 0.3);
}

/* ───────── Quiz Screen ───────── */

.question-container {
    margin-bottom: 1rem;
}

/* Question Card */
.question-card {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    border-left: 4px solid var(--clr-primary);
    box-shadow: var(--shadow-sm);
    animation: cardEnter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.question-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at top right, rgba(var(--clr-primary-rgb), 0.06), transparent 70%);
    pointer-events: none;
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.q-number {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--clr-primary);
}

.topic-badge {
    font-size: 0.6875rem;
    background: var(--bg-hover);
    color: var(--clr-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(var(--clr-primary-rgb), 0.15);
}

.bookmark-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--clr-text-muted);
    transition: all var(--transition-bounce);
    padding: 0.25rem;
}

.bookmark-toggle:hover {
    transform: scale(1.2);
}

.bookmark-toggle.active {
    color: var(--clr-warning);
    animation: starPop 0.4s ease;
}

@keyframes starPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4) rotate(15deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.bookmark-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.q-text {
    font-size: 1.0625rem;
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 1.25rem;
    position: relative;
}

/* Options */
.q-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.q-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-card-solid);
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--clr-text);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.q-option::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--clr-primary-rgb), 0.06), rgba(var(--clr-accent-rgb), 0.03));
    opacity: 0;
    transition: opacity var(--transition);
}

.q-option:hover:not(:disabled) {
    border-color: var(--clr-primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.q-option:hover:not(:disabled)::before {
    opacity: 1;
}

.q-option.selected {
    border-color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb), 0.15);
    animation: optionSelect 0.3s ease;
}

@keyframes optionSelect {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.01); }
    100% { transform: scale(1); }
}

.q-option.correct {
    border-color: var(--clr-success);
    background: var(--clr-success-bg);
    animation: correctPop 0.5s ease;
}

@keyframes correctPop {
    0%   { transform: scale(1); box-shadow: none; }
    30%  { transform: scale(1.02); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
    100% { transform: scale(1); box-shadow: none; }
}

.q-option.wrong {
    border-color: var(--clr-danger);
    background: var(--clr-danger-bg);
    animation: wrongShake 0.5s ease;
}

@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(6px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
}

.q-option:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.q-option:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.opt-letter {
    font-weight: 700;
    color: var(--clr-primary);
    min-width: 1.5rem;
    position: relative;
    z-index: 1;
}

.opt-text {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Feedback */
.q-feedback {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    animation: feedbackSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes feedbackSlide {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 300px;
    }
}

.q-feedback.correct {
    background: var(--clr-success-bg);
    border: 2px solid var(--clr-success);
    color: #065f46;
}

.q-feedback.wrong {
    background: var(--clr-danger-bg);
    border: 2px solid var(--clr-danger);
    color: #991b1b;
}

[data-theme="dark"] .q-feedback.correct {
    color: #6ee7b7;
}

[data-theme="dark"] .q-feedback.wrong {
    color: #fca5a5;
}

.q-explanation {
    margin-top: 0.5rem;
    font-style: italic;
    opacity: 0.9;
}

/* ───────── Quiz Navigation ───────── */

.quiz-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 0;
}

.nav-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-btn {
    padding: 0.625rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.nav-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-btn:active::after {
    opacity: 1;
}

.nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.nav-btn.primary {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: var(--clr-text-inverse);
    border-color: var(--clr-primary);
    box-shadow: 0 2px 8px rgba(var(--clr-primary-rgb), 0.3);
}

.nav-btn.primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--clr-primary-rgb), 0.4);
}

.nav-btn.secondary {
    background: var(--bg-card);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.nav-btn.secondary:hover:not(:disabled) {
    border-color: var(--clr-primary);
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.nav-btn.flag {
    background: var(--bg-card);
    color: var(--clr-warning);
    border-color: var(--clr-border);
}

.nav-btn.flag.marked {
    background: var(--clr-warning-bg);
    border-color: var(--clr-warning);
    animation: flagBounce 0.4s ease;
}

@keyframes flagBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.nav-btn.bookmark {
    background: var(--bg-card);
    color: var(--clr-text-muted);
    border-color: var(--clr-border);
}

.nav-btn.bookmark.active {
    color: var(--clr-warning);
    border-color: var(--clr-warning);
    background: var(--clr-warning-bg);
}

.nav-btn.clear {
    background: var(--bg-card);
    color: var(--clr-danger);
    border-color: var(--clr-border);
}

.nav-btn.clear:hover:not(:disabled) {
    border-color: var(--clr-danger);
    background: var(--clr-danger-bg);
}

.nav-btn.submit {
    background: linear-gradient(135deg, var(--clr-success), #059669);
    color: var(--clr-text-inverse);
    border-color: var(--clr-success);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.nav-btn.submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ───────── Palette ───────── */

.palette-legend {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
}

.legend-box {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--clr-border);
    background: var(--bg-card);
    transition: all var(--transition);
}

.legend-box.answered { background: var(--clr-success); border-color: var(--clr-success); }
.legend-box.current  { background: rgba(var(--clr-primary-rgb), 0.2); border-color: var(--clr-primary); }
.legend-box.marked   { background: var(--clr-warning); border-color: var(--clr-warning); }

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 0.5rem;
}

.palette-item {
    padding: 0.625rem 0;
    text-align: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition);
    border: 2px solid var(--clr-border);
    background: var(--bg-card);
    color: var(--clr-text);
    font-family: inherit;
    position: relative;
}

.palette-item:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.palette-item.current {
    border-color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb), 0.15);
    color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb), 0.15);
}

.palette-item.answered {
    background: var(--clr-success);
    color: white;
    border-color: var(--clr-success);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.palette-item.marked {
    background: var(--clr-warning);
    color: white;
    border-color: var(--clr-warning);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.palette-item.bookmarked {
    box-shadow: inset 0 -3px 0 var(--clr-warning);
}

.palette-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ───────── Results Screen ───────── */

.score-badge {
    text-align: center;
    margin-bottom: 1rem;
    animation: scoreReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-summary {
    text-align: center;
    color: var(--clr-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}

@keyframes scoreReveal {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.score-badge-inner {
    display: inline-block;
    padding: 1.25rem 3rem;
    border-radius: var(--radius-lg);
    font-size: 1.75rem;
    font-weight: 800;
    box-shadow: var(--shadow-md);
    letter-spacing: -0.02em;
}

.score-badge-inner.excellent {
    background: linear-gradient(135deg, #6ee7b7, #34d399, #67e8f9);
    color: #064e3b;
}

.score-badge-inner.good {
    background: linear-gradient(135deg, #a5f3fc, #93c5fd, #c4b5fd);
    color: #1e3a5f;
}

.score-badge-inner.average {
    background: linear-gradient(135deg, #fde68a, #fbbf24, #fdba74);
    color: #78350f;
}

.score-badge-inner.poor {
    background: linear-gradient(135deg, #fca5a5, #f87171, #f9a8d4);
    color: #7f1d1d;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.result-card {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    transition: all var(--transition);
    animation: resultCardIn 0.4s ease backwards;
}

.result-card:nth-child(1) { animation-delay: 0.1s; }
.result-card:nth-child(2) { animation-delay: 0.2s; }
.result-card:nth-child(3) { animation-delay: 0.3s; }
.result-card:nth-child(4) { animation-delay: 0.4s; }
.result-card:nth-child(5) { animation-delay: 0.5s; }
.result-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes resultCardIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.result-label {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.result-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

.result-value.primary { color: var(--clr-primary); }
.result-value.success { color: var(--clr-success); }
.result-value.danger  { color: var(--clr-danger); }
.result-value.muted   { color: var(--clr-text-muted); }
.result-value.info    { color: var(--clr-info); }
.result-value.accent  { color: var(--clr-accent); }
.result-value.text-value {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Topic Analytics */
.topic-analytics {
    margin-bottom: 1.5rem;
}

.topic-item {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all var(--transition);
}

.topic-item:hover {
    box-shadow: var(--shadow-sm);
}

.topic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.topic-name {
    font-weight: 600;
    color: var(--clr-primary);
    font-size: 0.875rem;
}

.topic-stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.stat-correct { color: var(--clr-success); }
.stat-wrong   { color: var(--clr-danger); }

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--clr-border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6ee7b7, #34d399, #67e8f9);
    border-radius: 4px;
    width: var(--progress-width, 0%);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    animation: progressShimmer 1.5s ease-in-out infinite;
}

@keyframes progressShimmer {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.progress-label {
    text-align: right;
    font-size: 0.6875rem;
    color: var(--clr-primary);
    margin-top: 0.25rem;
    font-weight: 600;
}

.result-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ───────── Review Screen ───────── */

.review-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--clr-text);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
}

.filter-btn:hover {
    border-color: var(--clr-primary);
    background: var(--bg-hover);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    color: var(--clr-text-inverse);
    border-color: var(--clr-primary);
    box-shadow: 0 2px 8px rgba(var(--clr-primary-rgb), 0.3);
}

.filter-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.review-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.review-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.review-card {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    animation: reviewSlideIn 0.4s ease backwards;
    transition: box-shadow var(--transition);
}

.review-card:nth-child(n) {
    animation-delay: calc(var(--review-idx, 0) * 0.05s);
}

@keyframes reviewSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.review-card:hover {
    box-shadow: var(--shadow-sm);
}

.review-q-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--clr-primary);
}

.review-your-answer {
    background: var(--clr-danger-bg);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
    border-left: 4px solid var(--clr-danger);
}

.review-correct-answer {
    background: var(--clr-success-bg);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0.75rem 0;
    border-left: 4px solid var(--clr-success);
}

.review-explanation {
    background: var(--bg-hover);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-top: 0.75rem;
}

.review-explanation strong {
    color: var(--clr-primary);
}

/* ───────── Dialogs ───────── */

dialog {
    border: none;
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--clr-text);
    box-shadow: var(--shadow-lg);
    animation: dialogEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

dialog[open] {
    animation: dialogEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dialogEnter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: backdropIn 0.3s ease;
}

@keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

dialog h3 {
    color: var(--clr-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

dialog p {
    margin-bottom: 0.75rem;
}

.dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Shortcuts List */
.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.shortcut-item:hover {
    background: rgba(var(--clr-primary-rgb), 0.12);
}

.shortcut-key {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    color: var(--clr-text-inverse);
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(var(--clr-primary-rgb), 0.3);
}

/* History */
.history-list {
    max-height: 400px;
    overflow-y: auto;
}

.history-empty {
    text-align: center;
    padding: 2rem;
    color: var(--clr-text-muted);
}

.history-item {
    background: var(--bg-hover);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all var(--transition);
}

.history-item:hover {
    background: rgba(var(--clr-primary-rgb), 0.1);
    transform: translateX(4px);
}

.history-date {
    font-weight: 600;
    color: var(--clr-primary);
    margin-bottom: 0.25rem;
}

.history-date-line {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-bottom: 0.5rem;
}

.history-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
}

.history-accuracy {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    margin-top: 0.5rem;
}

/* ───────── Loading Overlay ───────── */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 29, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    color: white;
    animation: overlayIn 0.3s ease;
}

@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.loading-overlay[hidden] {
    display: none;
}

.loader-brand {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 1.25rem;
}

.loader-ring {
    position: absolute;
    inset: 0;
}

.loader-ring-inner {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--clr-primary-light);
    border-right-color: var(--clr-primary-light);
    animation: spin 1s linear infinite;
}

.loader-ring-outer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: var(--clr-accent);
    border-left-color: var(--clr-accent);
    animation: spin 1.5s linear infinite reverse;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--clr-primary-light), var(--clr-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
    50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.loading-text {
    font-size: 0.9375rem;
    opacity: 0.8;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ───────── Footer ───────── */

.app-footer {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--clr-border);
    padding: 1.125rem 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.app-footer strong {
    color: var(--clr-primary);
}

/* ───────── Dynamic Dialog Overlay (for resume/timed-out) ───────── */

.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: backdropIn 0.3s ease;
}

.dialog-overlay-box {
    background: var(--bg-card);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    color: var(--clr-text);
    animation: dialogEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-overlay-box.centered {
    text-align: center;
}

.dialog-overlay-box h3 {
    color: var(--clr-primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.dialog-overlay-box p {
    margin-bottom: 0.75rem;
}

.dialog-overlay-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.dialog-overlay-box .dialog-actions {
    justify-content: center;
}

.dialog-overlay-box h3.danger {
    color: var(--clr-danger);
}

/* ───────── Scrollbar ───────── */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--clr-primary-rgb), 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--clr-primary-rgb), 0.5);
}

/* ───────── Accessibility ───────── */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ───────── Selection ───────── */

::selection {
    background: rgba(var(--clr-primary-rgb), 0.2);
    color: var(--clr-text);
}

/* ───────── Print Styles ───────── */

@media print {
    body {
        background: white;
        color: black;
    }

    .animated-bg,
    .app-header,
    .nav-tabs,
    .quiz-navigation,
    .nav-btn,
    .header-controls,
    .timer-bar,
    .app-footer,
    .loading-overlay {
        display: none !important;
    }

    .app-container {
        box-shadow: none;
    }

    .question-card,
    .result-card,
    .review-card {
        page-break-inside: avoid;
        background: white;
    }
}

/* ───────── Responsive ───────── */

@media (max-width: 640px) {
    .app-header {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 1rem 1.25rem;
    }

    .header-controls {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* On narrow screens, hide the "Back to Site" text label and keep
       just the arrow icon — saves horizontal space in the header. */
    .back-to-site-label {
        display: none;
    }

    .back-to-site-btn {
        padding: 0.5rem 0.625rem;
    }

    .app-title {
        font-size: 1.25rem;
    }

    .mode-cards {
        flex-direction: column;
    }

    .mode-card {
        max-width: none;
    }

    .chapter-grid {
        grid-template-columns: 1fr;
    }

    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quiz-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-group {
        justify-content: center;
    }

    .timer-bar {
        flex-wrap: wrap;
    }

    .screen {
        padding: 1rem;
    }

    dialog {
        padding: 1.25rem;
    }

    .bg-orb {
        filter: blur(60px);
        opacity: 0.35;
    }

    .bg-orb-1 { width: 300px; height: 300px; }
    .bg-orb-2 { width: 250px; height: 250px; }
    .bg-orb-3 { width: 200px; height: 200px; }
}

/* ───────── Reduced Motion ───────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        /* ⚠ Audit fix: also zero out animation-delay. Without this,
           staggered cards (.stat-card, .result-card, .review-card,
           .insights-table tr) with `animation-fill-mode: backwards`
           stay invisible (opacity:0 from `from` keyframe) for the
           full delay duration before snapping in — causing a
           flicker/delayed-appearance bug under reduced motion. */
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }

    .bg-orb {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   CHAPTER INSIGHTS  —  Mind Map · Infographic · Data Table
   ══════════════════════════════════════════════════════════ */

/* Insights Dialog (overrides default dialog sizing)
   ⚠ The base `dialog` UA rule `dialog:not([open]) { display: none }` has
   specificity (0,1,1) — exactly the same as `dialog.insights-dialog`.
   Because author styles win tie-breaks, our `display: flex` below was
   silently overriding the "hide when closed" behaviour, causing the
   dialog to render inline at its DOM position (bottom of <body>, below
   the instructions box) instead of staying hidden until .showModal().
   The explicit `:not([open])` rule below restores the hide behaviour
   with higher specificity (0,2,1). */
dialog.insights-dialog {
    max-width: 980px;
    width: 95%;
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Explicit centering — works whether the dialog is opened via
       showModal() (top-layer) or via the `open` attribute (in-flow).
       `position: fixed` + `inset: 0` + `margin: auto` centers the
       box inside the viewport regardless of page scroll position. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* Hide the dialog when it has no `open` attribute.
   Higher specificity (0,2,1) beats `dialog.insights-dialog { display: flex }`
   so the closed dialog is no longer rendered inline at the bottom of <body>. */
dialog.insights-dialog:not([open]) {
    display: none;
}

.insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--clr-border);
    background: linear-gradient(135deg, rgba(var(--clr-primary-rgb), 0.08), rgba(var(--clr-accent-rgb), 0.06));
}

.insights-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--clr-primary);
    font-weight: 700;
    line-height: 1.3;
}

.insights-close {
    flex: 0 0 auto;
    background: var(--bg-hover);
    color: var(--clr-text);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all var(--transition);
}

.insights-close:hover {
    background: var(--clr-primary);
    color: var(--clr-text-inverse);
    border-color: var(--clr-primary);
}

/* ⚠ Audit fix: explicit focus-visible rule for robustness. The base
   .icon-btn:focus-visible would also apply, but this guards against
   future refactors that might decouple .insights-close from .icon-btn. */
.insights-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Insights tab strip */
.insights-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 1.5rem 0;
    background: var(--bg-card-solid);
    border-bottom: 1px solid var(--clr-border);
}

.insights-tab {
    background: transparent;
    color: var(--clr-text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.625rem 1.125rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--transition);
    letter-spacing: 0.02em;
}

.insights-tab:hover {
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb), 0.06);
}

.insights-tab.active {
    color: var(--clr-primary);
    border-bottom-color: var(--clr-primary);
}

.insights-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Insights body (scroll container) */
.insights-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--bg-card-solid);
}

/* Insights panel (only active is visible) */
.insights-panel {
    display: none;
    animation: insightsPanelEnter 0.4s ease;
}

.insights-panel.active {
    display: block;
}

@keyframes insightsPanelEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.insights-panel-title {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--clr-text);
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--clr-border);
}

/* ─── Mind Map ─── */
/* The container is `position: relative` so the absolutely-positioned
   zoom toolbar (.mindmap-zoom-toolbar) anchors to this box. */
.mindmap-container {
    width: 100%;
    background: linear-gradient(135deg, rgba(var(--clr-primary-rgb), 0.04), rgba(var(--clr-accent-rgb), 0.04));
    border-radius: var(--radius-md);
    /* Generous vertical padding so the top (12 o'clock) and bottom (6 o'clock)
       branch labels and their children have visual breathing room and are
       not clipped by the container edge. */
    padding: 2.5rem 1.25rem;
    border: 1px solid var(--clr-border);
    overflow-x: auto;
    /* ⚠ CSS spec gotcha: when one axis is `visible` and the other is
       `auto`/`scroll`/`hidden`, the `visible` value is computed to `auto`.
       So `overflow-y: visible` would silently become `overflow-y: auto`.
       We accept that behavior (container has no fixed height, so it grows
       to fit content and no scrollbar appears) — the .insights-body
       parent (overflow-y: auto) handles vertical scrolling. */
    position: relative;
}

.mindmap-svg {
    width: 100%;
    height: auto;
    /* ⚠ Old value: max-height: 580px.
       That hard cap was clipping the SVG vertically: when the renderer
       positions the Author branch at the top (12 o'clock) and Themes at
       the bottom (6 o'clock), the child labels for those branches extend
       ABOVE and BELOW the branch nodes. With a 580px cap, the SVG's
       intrinsic height was forced down and the top/bottom child labels
       fell outside the visible area. Removing the cap lets the SVG grow
       to its natural height so every label is visible. */
    display: block;
    font-family: inherit;
    /* Allow any content that the renderer placed slightly outside the
       SVG viewBox (e.g. text labels of the top/bottom branches) to still
       render. Default SVG overflow is `hidden`, which silently hides
       such content. */
    overflow: visible;
}

.mindmap-line {
    stroke-width: 2;
    fill: none;
    transition: stroke-width 0.25s ease;
}

.mindmap-line-branch {
    stroke-width: 2.5;
}

.mindmap-line-child {
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.mindmap-node {
    transition: all 0.25s ease;
    cursor: default;
}

.mindmap-node-center {
    fill: var(--clr-primary);
    stroke: var(--clr-primary-dark);
    stroke-width: 3;
    filter: drop-shadow(0 4px 14px rgba(var(--clr-primary-rgb), 0.4));
}

.mindmap-node-branch {
    fill-opacity: 0.9;
    stroke-width: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.mindmap-node-child {
    stroke-width: 1.5;
}

/* ⚠ Bug fix: the hover transform is now applied to the <g> wrapper
   (.mindmap-group) instead of the <rect> (.mindmap-node-*). This way
   the rectangle AND its label text scale up together — previously the
   text was a sibling of the rect in the SVG, so it stayed standstill
   while only the rect "lifted".
   `transform-box: fill-box` makes `transform-origin: center` resolve
   against the group's own bounding box (otherwise SVG groups default
   to the SVG canvas origin, which would fling the node off-screen). */
.mindmap-group {
    cursor: default;
    transition: transform 0.25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.mindmap-group-branch:hover,
.mindmap-group-child:hover {
    transform: scale(1.08);
}

.mindmap-group-branch:hover .mindmap-node-branch,
.mindmap-group-child:hover .mindmap-node-child {
    fill-opacity: 0.95;
}

.mindmap-text {
    font-family: inherit;
    pointer-events: none;
    user-select: none;
}

.mindmap-text-center {
    fill: var(--clr-text-inverse);
    font-size: 17px;
    font-weight: 700;
}

.mindmap-text-branch {
    fill: var(--clr-text-inverse);
    font-size: 14px;
    font-weight: 700;
}

.mindmap-text-child {
    fill: var(--clr-text);
    font-size: 12px;
    font-weight: 500;
}

/* ─── Mind Map Zoom Toolbar ─── */
/* Floating toolbar anchored to the top-right of .mindmap-container.
   Buttons: zoom out (−), zoom %, zoom in (+), reset (↺). */
.mindmap-zoom-toolbar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-card-solid);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    z-index: 5;  /* above the SVG so clicks always register */
}

.mindmap-zoom-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: var(--clr-text);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.mindmap-zoom-btn:hover {
    background: var(--bg-hover);
    color: var(--clr-primary);
}

.mindmap-zoom-btn:active {
    background: rgba(var(--clr-primary-rgb), 0.18);
}

.mindmap-zoom-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mindmap-zoom-label {
    min-width: 2.75rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ─── Infographic ─── */
.infographic-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.stat-card {
    background: linear-gradient(135deg, rgba(var(--clr-primary-rgb), 0.08), rgba(var(--clr-accent-rgb), 0.04));
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all var(--transition);
    animation: statCardEnter 0.5s ease backwards;
    animation-delay: calc(var(--stat-index, 0) * 80ms);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--clr-primary-light);
}

.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--clr-primary);
    line-height: 1.15;
    margin-bottom: 0.375rem;
    letter-spacing: -0.02em;
}

.stat-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    line-height: 1.4;
    font-weight: 500;
}

@keyframes statCardEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.infographic-subheading {
    font-size: 1rem;
    color: var(--clr-primary);
    margin: 0 0 0.75rem 0;
    font-weight: 700;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--clr-primary);
    display: inline-block;
}

.infographic-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.625rem;
}

.infographic-points li {
    position: relative;
    padding: 0.625rem 0.875rem 0.625rem 2.25rem;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    color: var(--clr-text);
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 3px solid var(--clr-primary);
    transition: all var(--transition);
}

.infographic-points li:hover {
    /* Darkened primary color tint for hover — see .insights-table tbody tr:hover
       note for why we updated the rgba values after the WCAG color fix. */
    background: rgba(79, 70, 229, 0.12);
    transform: translateX(2px);
}

.infographic-points li::before {
    content: '\2713';
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    color: var(--clr-primary);
    font-weight: 800;
    font-size: 0.875rem;
}

/* ─── Data Table ─── */
.datatable-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--bg-card-solid);
}

.insights-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.5;
}

.insights-table thead {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
    color: var(--clr-text-inverse);
}

.insights-table th {
    text-align: left;
    padding: 0.875rem 1rem;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.insights-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--clr-border);
    color: var(--clr-text);
    vertical-align: top;
}

.insights-table-key {
    white-space: nowrap;
    font-size: 0.875rem;
}

.insights-table-key strong {
    color: var(--clr-primary);
}

.insights-table tbody tr {
    transition: background var(--transition);
    animation: tableRowEnter 0.4s ease backwards;
    animation-delay: calc(var(--row-index, 0) * 50ms);
}

@keyframes tableRowEnter {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.insights-table tbody tr:hover {
    /* Increased opacity from 0.06 to 0.12 — after the WCAG color fix
       darkened --clr-primary from #6366f1 to #4f46e5, the same 0.06
       opacity was barely visible (≈ 2% perceptual tint). 0.12 brings
       the hover feedback back to a clearly noticeable level. */
    background: rgba(79, 70, 229, 0.12);
}

.insights-table tbody tr:last-child td {
    border-bottom: none;
}

/* ─── Insights Responsive ─── */
@media (max-width: 768px) {
    dialog.insights-dialog {
        width: 98%;
        max-height: 95vh;
    }

    .insights-header {
        padding: 1rem 1.125rem;
    }

    .insights-header h3 {
        font-size: 1rem;
    }

    .insights-tabs {
        padding: 0.5rem 1rem 0;
    }

    .insights-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .insights-body {
        padding: 1rem;
    }

    .infographic-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    .stat-card {
        padding: 1rem 0.625rem;
    }

    .stat-value {
        font-size: 1.375rem;
    }

    .infographic-points {
        grid-template-columns: 1fr;
    }

    .mindmap-container {
        /* Tighter padding on tablets so the SVG gets more room. */
        padding: 2rem 0.75rem;
    }

    /* ⚠ Mobile fix: on narrow viewports the floating zoom toolbar
       (absolutely positioned at top-right) overlaps the rightmost
       pill in the SVG's top row. Switching the toolbar to static
       positioning on mobile makes it take its own row at the top
       of the container, pushing the SVG down — eliminating overlap.
       The toolbar stays absolutely-positioned on desktop where
       there's plenty of horizontal room. */
    .mindmap-zoom-toolbar {
        position: static;
        margin: 0 auto 1rem;
        width: fit-content;
        max-width: 100%;
    }

    .mindmap-svg {
        /* No max-height on mobile either — same reasoning as the base rule:
           a fixed cap clips the top/bottom branch's child labels. Let the
           SVG grow to its natural height; the .insights-body parent already
           scrolls vertically if needed. */
        max-height: none;
    }

    .mindmap-text-center { font-size: 14px; }
    .mindmap-text-branch { font-size: 12px; }
    .mindmap-text-child  { font-size: 10px; }
}

@media (max-width: 480px) {
    .infographic-stats-grid {
        grid-template-columns: 1fr;
    }

    .chapter-actions {
        flex-direction: column;
    }

    .chapter-start-btn,
    .chapter-insights-btn {
        width: 100%;
        justify-content: center;
    }

    /* ⚠ Audit fix: tabs should wrap on very narrow screens so all three
       ("Mind Map / Infographic / Data Table") stay tappable. */
    .insights-tabs {
        flex-wrap: wrap;
        padding: 0.5rem 0.75rem 0;
    }

    .insights-tab {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }

    /* Tighter mind-map container on phones */
    .mindmap-container {
        padding: 1.5rem 0.5rem;
    }

    .mindmap-text-center { font-size: 13px; }
    .mindmap-text-branch { font-size: 11px; }
    .mindmap-text-child  { font-size: 9px; }

    /* ⚠ Audit fix: zoom toolbar responsive. Smaller buttons + label on
       phones so the toolbar doesn't dominate the small SVG area.
       `position: static` is reasserted because the 480px rule comes
       after the 768px rule (which set it to static) — without this,
       a future refactor that changes the 768px rule could silently
       revert the mobile overlap fix. */
    .mindmap-zoom-toolbar {
        position: static;
        margin: 0 auto 0.75rem;
        top: auto;
        right: auto;
        padding: 0.2rem;
        gap: 0.15rem;
    }

    .mindmap-zoom-btn {
        width: 24px;
        height: 24px;
        font-size: 0.875rem;
    }

    .mindmap-zoom-label {
        min-width: 2.25rem;
        font-size: 0.6875rem;
    }

    .insights-table th,
    .insights-table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }
}