/*
 * Part 107 Practice Test UI Styles
 * Extracted from part107_practice_test_v2.html as Phase 1 of the UI redesign.
 *
 * IMPORTANT:
 * This file currently preserves the existing visual styling and class names.
 * Future redesign phases should modify this stylesheet while keeping HTML IDs/classes
 * used by JavaScript intact.
 */

        /* CSS Variables for Theming */
        :root {
            --bg-primary: #f5f5f5;
            --bg-secondary: white;
            --bg-tertiary: #f9fafb;
            --bg-input: white;
            --text-primary: #111827;
            --text-secondary: #333;
            --text-tertiary: #666;
            --text-muted: #6b7280;
            --border-color: #e5e7eb;
            --border-strong: #d1d5db;
            --accent-primary: #2563eb;
            --accent-secondary: #667eea;
            --accent-hover: #1d4ed8;
            --success: #10b981;
            --success-bg: #ecfdf5;
            --success-border: #10b981;
            --error: #ef4444;
            --error-bg: #fef2f2;
            --error-border: #ef4444;
            --warning: #f59e0b;
            --warning-bg: #fffbeb;
            --shadow: rgba(0,0,0,0.1);
            --shadow-strong: rgba(0,0,0,0.2);
            --modal-bg: rgba(0, 0, 0, 0.7);
            --card-bg: #f9fafb;
            --slider-bg: #ddd;
            --toggle-bg: #ccc;
        }

        [data-theme="dark"] {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --bg-tertiary: #334155;
            --bg-input: #1e293b;
            --text-primary: #f1f5f9;
            --text-secondary: #e2e8f0;
            --text-tertiary: #94a3b8;
            --text-muted: #64748b;
            --border-color: #334155;
            --border-strong: #475569;
            --accent-primary: #3b82f6;
            --accent-secondary: #818cf8;
            --accent-hover: #2563eb;
            --success: #34d399;
            --success-bg: #064e3b;
            --success-border: #10b981;
            --error: #f87171;
            --error-bg: #7f1d1d;
            --error-border: #ef4444;
            --warning: #fbbf24;
            --warning-bg: #78350f;
            --shadow: rgba(0,0,0,0.3);
            --shadow-strong: rgba(0,0,0,0.5);
            --modal-bg: rgba(0, 0, 0, 0.85);
            --card-bg: #334155;
            --slider-bg: #475569;
            --toggle-bg: #475569;
        }

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 20px;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: var(--bg-secondary);
            border-radius: 8px;
            box-shadow: 0 2px 8px var(--shadow);
            overflow: hidden;
        }

        .header {
            background: var(--accent-primary);
            color: white;
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .header-left, .header-right {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .header-center {
            text-align: center;
            flex: 1;
            min-width: 200px;
        }

        .header h1 {
            font-size: 1.6em;
            margin: 0;
            font-weight: 600;
        }

        .header p {
            font-size: 0.9em;
            opacity: 0.95;
            margin: 2px 0 0 0;
        }
        
        .header-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: white;
            padding: 8px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            transition: all 0.3s;
            white-space: nowrap;
        }
        
        .header-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: white;
            transform: scale(1.05);
        }

        /* Setup Screen */
        .setup-screen {
            padding: 40px;
        }

        .mode-selection {
            margin-bottom: 40px;
        }

        .mode-selection-title {
            color: #333;
        }

        .mode-selection-subtitle {
            color: #666;
        }

        .config-title {
            color: #333;
        }

        .mode-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        .mode-btn {
            padding: 30px;
            border: 3px solid #e0e0e0;
            border-radius: 15px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .mode-btn:hover {
            border-color: #667eea;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
        }

        .mode-btn.active {
            border-color: #667eea;
            background: #f0f4ff;
        }

        .mode-btn h3 {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.4em;
        }

        .mode-btn p {
            color: #666;
            font-size: 0.95em;
        }

        /* Dark mode fixes for text visibility */
        [data-theme="dark"] .info-label {
            color: #94a3b8;
        }
        
        [data-theme="dark"] .info-value {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .config-title {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .config-item label {
            color: #e2e8f0;
        }
        
        [data-theme="dark"] .config-item p {
            color: #94a3b8;
        }
        
        [data-theme="dark"] .toggle-help-text {
            color: #94a3b8 !important;
        }
        
        [data-theme="dark"] .test-config {
            background: #334155;
        }
        
        [data-theme="dark"] .slider-value {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .mode-selection-title,
        [data-theme="dark"] .mode-btn h3 {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .mode-selection-subtitle,
        [data-theme="dark"] .mode-btn p {
            color: #94a3b8;
        }
        
        /* Test Supplement Button */
        .test-supplement-container {
            margin-top: 25px;
            padding: 20px;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 12px;
            border: 1px solid #bae6fd;
            text-align: center;
        }
        
        .test-supplement-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
            text-decoration: none;
        }
        
        .test-supplement-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
            background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
        }
        
        .test-supplement-btn:active {
            transform: translateY(0);
        }
        
        .test-supplement-note {
            margin-top: 12px;
            font-size: 0.9em;
            color: #0369a1;
            line-height: 1.5;
        }
        
        [data-theme="dark"] .test-supplement-container {
            background: linear-gradient(135deg, #1e3a5f 0%, #172554 100%);
            border-color: #1e40af;
        }
        
        [data-theme="dark"] .test-supplement-btn {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
        }
        
        [data-theme="dark"] .test-supplement-btn:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
        }
        
        [data-theme="dark"] .test-supplement-note {
            color: #93c5fd;
        }
        
        [data-theme="dark"] .category-selection h3 {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .category-label {
            color: #e2e8f0;
        }
        
        [data-theme="dark"] .category-count {
            color: #94a3b8;
        }
        
        [data-theme="dark"] .category-item {
            background: #1e293b;
            border-bottom-color: #334155;
        }
        
        [data-theme="dark"] .category-item:hover {
            background: #334155;
        }
        
        [data-theme="dark"] .category-item.selected {
            background: #1e3a5f;
        }
        
        [data-theme="dark"] .categories-grid {
            border-color: #475569;
        }

        [data-theme="dark"] .category-control-btn {
            border-color: #475569;
        }

        [data-theme="dark"] .select-all-btn {
            background: #3b82f6;
            border-color: #3b82f6;
        }

        [data-theme="dark"] .select-all-btn:hover {
            background: #2563eb;
            border-color: #2563eb;
        }

        [data-theme="dark"] .clear-all-btn {
            background: #334155;
            color: #e2e8f0;
            border-color: #475569;
        }

        [data-theme="dark"] .clear-all-btn:hover {
            background: #475569;
            border-color: #64748b;
        }
        
        [data-theme="dark"] .mode-btn {
            background: #1e293b;
            border-color: #475569;
        }
        
        [data-theme="dark"] .mode-btn:hover {
            border-color: #818cf8;
            box-shadow: 0 10px 25px rgba(129, 140, 248, 0.2);
        }
        
        [data-theme="dark"] .mode-btn.active {
            border-color: #818cf8;
            background: #1e3a5f;
        }
        
        /* Start Here Banner */
        .start-here-banner {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 16px 20px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .start-here-banner:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
        }
        
        .start-here-icon {
            font-size: 2em;
            flex-shrink: 0;
        }
        
        .start-here-content {
            flex: 1;
        }
        
        .start-here-title {
            font-size: 1.2em;
            font-weight: 700;
            color: white;
            margin-bottom: 4px;
        }
        
        .start-here-subtitle {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.4;
        }
        
        .start-here-arrow {
            font-size: 1.5em;
            color: white;
            opacity: 0.8;
            transition: transform 0.3s ease;
        }
        
        .start-here-banner:hover .start-here-arrow {
            transform: translateX(5px);
            opacity: 1;
        }
        
        [data-theme="dark"] .start-here-banner {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
        }
        
        [data-theme="dark"] .start-here-banner:hover {
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
        }

        .category-selection {
            margin-bottom: 30px;
        }

        .category-selection h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .category-selection-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }

        .category-control-btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid #d1d5db;
        }

        .select-all-btn {
            background: #2563eb;
            color: white;
            border-color: #2563eb;
        }

        .select-all-btn:hover {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }

        .clear-all-btn {
            background: white;
            color: #4b5563;
            border-color: #d1d5db;
        }

        .clear-all-btn:hover {
            background: #f3f4f6;
            border-color: #9ca3af;
        }

        .categories-grid {
            display: flex;
            flex-direction: column;
            gap: 0;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            overflow: hidden;
        }

        .category-item {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #e5e7eb;
            cursor: pointer;
            transition: all 0.2s;
            background: white;
        }

        .category-item:last-child {
            border-bottom: none;
        }

        .category-item:hover {
            background: #f9fafb;
        }

        .category-item.selected {
            background: #eff6ff;
        }

        .category-checkbox {
            width: 18px;
            height: 18px;
            margin-right: 12px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .category-label {
            flex: 1;
            cursor: pointer;
            font-weight: 500;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .category-count {
            color: #6b7280;
            font-weight: 400;
        }

        .test-config {
            background: #f9fafb;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .config-item {
            margin-bottom: 20px;
        }

        .config-item label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }

        .question-count-input-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        .question-count-input {
            width: 100px;
            padding: 10px 14px;
            font-size: 1.1rem;
            font-weight: 600;
            border: 2px solid var(--border-strong);
            border-radius: 8px;
            background: var(--bg-input);
            color: var(--text-primary);
            text-align: center;
            outline: none;
            transition: border-color 0.2s;
        }

        .question-count-input:focus {
            border-color: var(--accent-primary);
        }

        .question-count-input::placeholder {
            color: var(--accent-primary);
            font-weight: 700;
        }

        .question-preset-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .preset-btn {
            padding: 9px 18px;
            border: 2px solid var(--border-strong);
            border-radius: 8px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }

        .preset-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
            background: var(--bg-secondary);
        }

        .preset-btn.active {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: white;
        }

        .toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .toggle-container span {
            color: #333;
        }
        
        [data-theme="dark"] .toggle-container span {
            color: #e2e8f0;
        }
        
        .toggle-help-text {
            font-size: 0.85em;
            color: #666;
            margin-top: 5px;
            line-height: 1.4;
        }
        
        .config-help-text {
            font-size: 0.85em;
            color: #666;
            margin-top: 5px;
        }
        
        .available-count {
            color: #999;
            font-weight: normal;
        }
        
        [data-theme="dark"] .config-help-text {
            color: #94a3b8;
        }
        
        [data-theme="dark"] .available-count {
            color: #94a3b8;
        }
        
        /* Study Guide Styles */
        .study-guide-screen {
            display: none;
        }
        
        .study-guide-screen.active {
            display: block;
        }
        
        .study-guide-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e5e7eb;
        }
        
        .study-guide-header h2 {
            color: #333;
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .study-guide-header .subtitle {
            color: #666;
            font-size: 1.1em;
        }
        
        .study-guide-nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            background: white;
            border-bottom: 2px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .study-guide-back-btn {
            padding: 12px 30px;
            background: #6b7280;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .study-guide-back-btn:hover {
            background: #4b5563;
            transform: translateY(-2px);
        }

        /* ===== STUDY GUIDE CONTENT STYLES (for Word HTML output) ===== */
        
.study-guide-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.8;
    color: #333;
}

/* Override ALL Word's font and spacing choices */
.study-guide-content * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Remove Word's weird margins and spacing */
.study-guide-content p,
.study-guide-content .MsoNormal,
.study-guide-content .MsoBodyText,
.study-guide-content .MsoListParagraph {
    margin: 0 0 16px 0 !important;
    line-height: 1.8 !important;
    text-indent: 0 !important;
}

/* ===== HEADINGS ===== */
/* Main title - big blue banner style */
.study-guide-content h1,
.study-guide-content .MsoTitle {
    color: rgb(255, 255, 255) !important;
    background: linear-gradient(135deg, #1a5490 0%, #2878b8 100%) !important;
    font-size: 1.8em !important;
    font-weight: 700 !important;
    padding: 20px 25px !important;
    margin: 0 0 30px 0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Section headings - h2 (numbered sections like "2. Applicability") */
.study-guide-content h2,
.study-guide-content .MsoHeading7,
.study-guide-content .MsoHeading8 {
    color: white !important;
    background: linear-gradient(135deg, #1a5490 0%, #2878b8 100%) !important;
    font-size: 1.5em !important;
    font-weight: 700 !important;
    padding: 15px 25px !important;
    margin: 40px 0 20px 0 !important;
    border-radius: 8px !important;
    border-bottom: none !important;
}

/* Fix spans inside h2 - inherit parent styles */
.study-guide-content h2 span {
    color: inherit !important;
    background: transparent !important;
    font-size: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Sub-section headings - h3 */
.study-guide-content h3 {
    color: white !important;
    background: linear-gradient(135deg, #1a5490 0%, #2878b8 100%) !important;
    font-size: 1.25em !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    margin: 30px 0 15px 0 !important;
    border-radius: 8px !important;
    border-bottom: none !important;
}

/* Fix spans inside h3 - inherit parent styles */
.study-guide-content h3 span {
    color: inherit !important;
    background: transparent !important;
    font-size: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Minor headings */
.study-guide-content h4 {
    color: #2878b8 !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin: 25px 0 10px 0 !important;
}

/* ===== LISTS - Critical for proper spacing ===== */
.study-guide-content ul,
.study-guide-content ol {
    margin: 15px 0 20px 0 !important;
    padding-left: 25px !important;
    list-style-position: outside !important;
}

.study-guide-content ul {
    list-style-type: disc !important;
}

.study-guide-content ol {
    list-style-type: decimal !important;
}

.study-guide-content li,
.study-guide-content .MsoListParagraphCxSpFirst,
.study-guide-content .MsoListParagraphCxSpMiddle,
.study-guide-content .MsoListParagraphCxSpLast {
    margin: 0 0 12px 0 !important;
    padding-left: 8px !important;
    line-height: 1.7 !important;
    display: list-item !important;
    text-indent: 0 !important;
}

/* Nested lists */
.study-guide-content ul ul,
.study-guide-content ol ol,
.study-guide-content ul ol,
.study-guide-content ol ul {
    margin: 10px 0 10px 20px !important;
}

/* ===== KEY POINT / CALLOUT BOXES ===== */
.study-guide-content p:has(strong:first-child),
.study-guide-content .MsoNormal:has(strong:first-child) {
    /* This won't work in all browsers, so we'll add a class-based approach too */
}

/* ===== CALLOUT BOXES - Different colors for each type ===== */

/* KEY POINT - Blue (knowledge/information) */
.study-guide-content .key-point {
    background: #e8f4fc !important;
    border-left: 4px solid #1a5490 !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #1a3a5c !important;
}

/* EXAM TIP - Green (success/tips) */
.study-guide-content .exam-tip {
    background: #ecfdf5 !important;
    border-left: 4px solid #10b981 !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #065f46 !important;
}

/* ADDITIONAL RESOURCES - Purple (references/links) */
.study-guide-content .additional-resources {
    background: #f3e8ff !important;
    border-left: 4px solid #8b5cf6 !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #5b21b6 !important;
}

/* WARNING/CAUTION - Orange (if you want to add this) */
.study-guide-content .warning {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #92400e !important;
}

/* Make the label text bold */
.study-guide-content .key-point strong:first-child,
.study-guide-content .exam-tip strong:first-child,
.study-guide-content .additional-resources strong:first-child,
.study-guide-content .warning strong:first-child {
    display: inline !important;
}

/* ===== DARK MODE CALLOUTS ===== */
[data-theme="dark"] .study-guide-content .key-point {
    background: #1e3a5f !important;
    border-left-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

[data-theme="dark"] .study-guide-content .exam-tip {
    background: #064e3b !important;
    border-left-color: #34d399 !important;
    color: #a7f3d0 !important;
}

[data-theme="dark"] .study-guide-content .additional-resources {
    background: #4c1d95 !important;
    border-left-color: #a78bfa !important;
    color: #ddd6fe !important;
}

[data-theme="dark"] .study-guide-content .warning {
    background: #78350f !important;
    border-left-color: #fbbf24 !important;
    color: #fde68a !important;
}


/* ===== TABLES ===== */
.study-guide-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
}

/* Header row styling - ONLY thead */
.study-guide-content thead tr {
    background: linear-gradient(135deg, #1a5490 0%, #2878b8 100%) !important;
}

.study-guide-content thead td,
.study-guide-content thead th {
    background: transparent !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 2px solid #1a5490 !important;
}

/* ALL body cells */
.study-guide-content tbody td,
.study-guide-content tbody th {
    padding: 12px 16px !important;
    border: 1px solid #e0e0e0 !important;
    vertical-align: top !important;
    text-align: left !important;
    background: white !important;
    color: #333 !important;
}

/* Zebra striping */
.study-guide-content tbody tr:nth-child(odd) td {
    background-color: #f8fafc !important;
}

/* Hover effect */
.study-guide-content tbody tr:hover td {
    background-color: #e8f4fc !important;
}

/* ===== DARK MODE TABLES ===== */
[data-theme="dark"] .study-guide-content table {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .study-guide-content thead tr {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

[data-theme="dark"] .study-guide-content thead td,
[data-theme="dark"] .study-guide-content thead th {
    border-bottom-color: #1e40af !important;
}

[data-theme="dark"] .study-guide-content tbody td,
[data-theme="dark"] .study-guide-content tbody th {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .study-guide-content tbody tr:nth-child(odd) td {
    background-color: #283548 !important;
}

[data-theme="dark"] .study-guide-content tbody tr:hover td {
    background-color: #2d4a6f !important;
}

/* ===== BOLD, ITALIC, LINKS ===== */
.study-guide-content strong,
.study-guide-content b {
    font-weight: 700 !important;
    color: inherit !important;
}

.study-guide-content em,
.study-guide-content i {
    font-style: italic !important;
}

.study-guide-content a {
    color: #2167a8 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #2167a8 !important;
    transition: all 0.2s !important;
}

.study-guide-content a:hover {
    color: #1a5490 !important;
    border-bottom-style: solid !important;
}

/* ===== IMAGES ===== */
.study-guide-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15) !important;
}

/* ===== REFERENCE/ITALIC LINES ===== */
.study-guide-content em:only-child,
.study-guide-content i:only-child {
    display: block !important;
    color: #666 !important;
    font-size: 0.95em !important;
    margin: 5px 0 15px 0 !important;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .study-guide-content {
    color: #e2e8f0;
}

[data-theme="dark"] .study-guide-content h1,
[data-theme="dark"] .study-guide-content .MsoTitle {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

[data-theme="dark"] .study-guide-content h2,
[data-theme="dark"] .study-guide-content .MsoHeading7,
[data-theme="dark"] .study-guide-content .MsoHeading8 {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}

[data-theme="dark"] .study-guide-content h3,
[data-theme="dark"] .study-guide-content h4 {
    color: #93c5fd !important;
    border-bottom-color: #93c5fd !important;
}

[data-theme="dark"] .study-guide-content p,
[data-theme="dark"] .study-guide-content li,
[data-theme="dark"] .study-guide-content .MsoNormal,
[data-theme="dark"] .study-guide-content .MsoListParagraph {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .study-guide-content strong,
[data-theme="dark"] .study-guide-content b {
    color: #f1f5f9 !important;
}

/* ===== DARK MODE TABLES ===== */
[data-theme="dark"] .study-guide-content table {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .study-guide-content thead tr,
[data-theme="dark"] .study-guide-content tr:first-child {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}

[data-theme="dark"] .study-guide-content tr:first-child td,
[data-theme="dark"] .study-guide-content tr:first-child th,
[data-theme="dark"] .study-guide-content thead td,
[data-theme="dark"] .study-guide-content thead th {
    border-bottom-color: #1e40af !important;
}

[data-theme="dark"] .study-guide-content td,
[data-theme="dark"] .study-guide-content th {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Re-apply dark header styling */
[data-theme="dark"] .study-guide-content tr:first-child td,
[data-theme="dark"] .study-guide-content tr:first-child th,
[data-theme="dark"] .study-guide-content thead td,
[data-theme="dark"] .study-guide-content thead th {
    background: transparent !important;
    color: white !important;
    border: none !important;
    border-bottom: 2px solid #1e40af !important;
}

[data-theme="dark"] .study-guide-content tr:nth-child(even):not(:first-child) td {
    background-color: #283548 !important;
}

[data-theme="dark"] .study-guide-content tr:hover:not(:first-child) td {
    background-color: #2d4a6f !important;
}


[data-theme="dark"] .study-guide-content a {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}

[data-theme="dark"] .study-guide-content .key-point,
[data-theme="dark"] .study-guide-content .callout {
    background: #1e3a5f !important;
    border-left-color: #3b82f6 !important;
}

[data-theme="dark"] .study-guide-content .additional-resources,
[data-theme="dark"] .study-guide-content .resources-bar {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
}


        .toggle {
            position: relative;
            width: 50px;
            height: 26px;
            background: #ccc;
            border-radius: 13px;
            cursor: pointer;
            transition: 0.3s;
        }

        .toggle.active {
            background: #667eea;
        }

        .toggle::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            top: 3px;
            left: 3px;
            transition: 0.3s;
        }

        .toggle.active::after {
            left: 27px;
        }

        /* Figure Modal Styles */
        .figure-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            animation: fadeIn 0.3s;
        }

        .figure-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .figure-modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            flex-direction: column;
            animation: slideIn 0.3s;
        }

        .figure-image-container {
            flex: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            max-height: calc(80vh - 100px);
            min-height: 300px;
            position: relative;
            cursor: grab;
        }

        .figure-image-container:active {
            cursor: grabbing;
        }

        .figure-modal-content img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            cursor: grab;
            transition: none;
            transform-origin: center center;
            user-select: none;
            -webkit-user-drag: none;
        }

        .figure-modal-content img:active {
            cursor: grabbing;
        }

        .figure-modal-content img.zoomed {
            transform: scale(2);
            cursor: zoom-out;
        }

        .figure-zoom-controls {
            display: flex;
            gap: 10px;
            justify-content: center;
            padding: 15px 0;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 8px;
            margin-top: 15px;
            flex-shrink: 0;
        }

        .figure-zoom-btn {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: 0.3s;
        }

        .figure-zoom-btn:hover {
            background: white;
        }

        .figure-close {
            position: absolute;
            top: -40px;
            right: 0;
            color: white;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            z-index: 10;
        }

        .figure-close:hover {
            background: rgba(255, 0, 0, 0.7);
        }

        .figure-caption {
            color: white;
            text-align: center;
            margin-top: 15px;
            font-size: 1.1em;
            font-weight: 600;
            flex-shrink: 0;
        }

        .view-figure-btn {
            margin: 15px 0 20px 0;
            padding: 10px 20px;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-block;
            width: auto;
        }

        .view-figure-btn:hover {
            background: #1d4ed8;
        }

        .figure-buttons-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin: 15px 0 20px 0;
        }

        .figure-buttons-container .view-figure-btn {
            flex: 0 0 auto;
            width: auto;
        }

        /* Inline Figure Viewer */
        .question-figure-thumbnail {
            float: left;
            margin: 0 20px 15px 0;
            max-width: 200px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            overflow: hidden;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
        }

        .question-figure-thumbnail:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .question-figure-thumbnail img {
            width: 100%;
            height: auto;
            display: block;
        }

        .question-figure-thumbnail-caption {
            padding: 6px 10px;
            background: #f9fafb;
            font-size: 0.8em;
            color: #6b7280;
            text-align: center;
            font-weight: 600;
        }

        .question-with-figure {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .question-main {
            flex: 1;
            min-width: 0;
        }

        .inline-figure-panel {
            flex: 0 0 40%;
            max-width: 40%;
            background: #f9fafb;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #e5e7eb;
            display: none;
        }

        .inline-figure-panel.show {
            display: block;
        }

        .inline-figure-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e5e7eb;
        }

        .inline-figure-title {
            font-weight: 600;
            color: #374151;
            font-size: 0.9em;
        }

        .inline-figure-close {
            background: #ef4444;
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8em;
            font-weight: 600;
        }

        .inline-figure-close:hover {
            background: #dc2626;
        }

        .inline-figure-container {
            position: relative;
            overflow: hidden;
            background: white;
            border-radius: 6px;
            min-height: 200px;
            max-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            border: 1px solid #e5e7eb;
        }

        .inline-figure-container:active {
            cursor: grabbing;
        }

        .inline-figure-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            user-select: none;
            -webkit-user-drag: none;
            transition: transform 0.1s ease;
            transform-origin: center center;
        }

        .inline-figure-controls {
            display: flex;
            gap: 6px;
            margin-top: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .inline-figure-btn {
            background: white;
            border: 1px solid #d1d5db;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.75em;
            font-weight: 600;
            transition: 0.2s;
        }

        .inline-figure-btn:hover {
            background: #f3f4f6;
            border-color: #2563eb;
        }

        .inline-figure-btn.expand-btn {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .inline-figure-btn.expand-btn:hover {
            background: #5a6fd6;
        }

        @media (max-width: 900px) {
            .question-with-figure {
                flex-direction: column;
            }

            .inline-figure-panel {
                flex: none;
                max-width: 100%;
                width: 100%;
                order: -1;
            }
        }

        @keyframes slideIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .start-button {
            width: 100%;
            padding: 18px;
            font-size: 1.2em;
            font-weight: 600;
            color: white;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .start-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }

        .start-button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        /* Question Screen */
        .question-screen {
            display: none;
        }

        .progress-bar {
            background: #e5e7eb;
            height: 6px;
            position: relative;
        }

        .progress-fill {
            background: #2563eb;
            height: 100%;
            transition: width 0.3s;
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 40px;
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
        }

        .question-info {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            font-size: 0.85em;
            color: #666;
            margin-bottom: 3px;
        }

        .info-value {
            font-size: 1.1em;
            font-weight: 600;
            color: #333;
        }

        .timer {
            font-size: 1.5em;
            font-weight: 700;
            color: #667eea;
        }

        .timer.warning {
            color: #f59e0b;
            animation: pulse 1s infinite;
        }

        .timer.danger {
            color: #ef4444;
        }

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

        .question-content {
            padding: 30px 40px;
        }

        .question-category {
            display: none;
        }

        .question-text {
            font-size: 1.1em;
            line-height: 1.7;
            color: #111827;
            margin-bottom: 20px;
            font-weight: 500;
        }

        .options-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 30px 0;
        }

        .option {
            padding: 16px 20px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 15px;
            background: white;
        }

        .option:hover:not(.disabled) {
            background: #f9fafb;
            border-color: #9ca3af;
        }

        .option.selected {
            background: #eff6ff;
            border-color: #2563eb;
        }

        .option.correct {
            background: #f0fdf4;
            border-color: #10b981;
        }

        .option.incorrect {
            background: #fef2f2;
            border-color: #ef4444;
        }

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

        .option-letter {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid #d1d5db;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9em;
            color: #6b7280;
            flex-shrink: 0;
            position: relative;
        }

        .option.selected .option-letter {
            border-color: #2563eb;
            background: white;
        }

        .option.selected .option-letter::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #2563eb;
        }

        .option.correct .option-letter {
            border-color: #10b981;
            background: white;
        }

        .option.correct .option-letter::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #10b981;
        }

        .option.incorrect .option-letter {
            border-color: #ef4444;
            background: white;
        }

        .option.incorrect .option-letter::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #ef4444;
        }

        .option-text {
            flex: 1;
            font-size: 1em;
            color: #1f2937;
            line-height: 1.6;
        }

        .feedback {
            display: none;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .feedback.show {
            display: block;
        }

        .feedback.correct {
            background: #ecfdf5;
            border: 2px solid #10b981;
        }

        .feedback.incorrect {
            background: #fef2f2;
            border: 2px solid #ef4444;
        }

        .feedback-title {
            font-weight: 700;
            font-size: 1.1em;
            margin-bottom: 10px;
        }

        .feedback.correct .feedback-title {
            color: #10b981;
        }

        .feedback.incorrect .feedback-title {
            color: #ef4444;
        }

        .feedback-text {
            color: #333;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .feedback-reference {
            color: #666;
            font-size: 0.9em;
            font-style: italic;
        }

        .question-actions {
            display: block;
        }

        .btn {
            flex: 1;
            padding: 12px 24px;
            font-size: 0.95em;
            font-weight: 600;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            min-width: 120px;
        }

        .btn-primary {
            background: #2563eb;
            color: white;
        }

        .btn-primary:hover:not(:disabled) {
            background: #1d4ed8;
        }

        .btn-secondary {
            background: white;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .btn-secondary:hover:not(:disabled) {
            background: #f9fafb;
        }

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

        .bookmark-btn {
            padding: 10px 14px;
            height: 44px;
            border-radius: 6px;
            background: white;
            border: 1px solid #d1d5db;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.95em;
            font-weight: 500;
            transition: all 0.2s;
            flex-shrink: 0;
            color: #374151;
        }

        .bookmark-btn .bookmark-icon {
            font-size: 1.1em;
        }

        .bookmark-btn:hover {
            border-color: #f59e0b;
            background: #fffbeb;
        }

        .bookmark-btn.bookmarked {
            background: #fef3c7;
            border-color: #f59e0b;
            color: #b45309;
        }

        /* Results Screen */
        .results-screen {
            display: none;
            padding: 40px;
        }

        .results-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .score-circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            font-weight: 700;
            position: relative;
        }

        .score-circle.pass {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }

        .score-circle.fail {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
        }

        .results-title {
            font-size: 2em;
            margin-bottom: 10px;
            color: #333;
        }

        .results-subtitle {
            font-size: 1.2em;
            color: #666;
        }

        .results-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: #f9fafb;
            padding: 25px;
            border-radius: 10px;
            text-align: center;
            border: 2px solid #e0e0e0;
        }

        .stat-value {
            font-size: 2.5em;
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #666;
            font-size: 0.95em;
        }

        .category-breakdown {
            margin-bottom: 30px;
        }

        .category-breakdown h3 {
            margin-bottom: 20px;
            color: #333;
        }

        .category-result {
            background: #f9fafb;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .category-name {
            font-weight: 600;
            color: #333;
        }

        .category-score {
            font-weight: 700;
            color: #667eea;
        }

        .review-section {
            margin-bottom: 30px;
        }

        .review-section h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .review-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .results-actions {
            display: flex;
            gap: 15px;
        }

        /* Review Mode */
        .review-mode {
            display: block;
        }
        
        .review-mode.hidden {
            display: none;
        }
        
        .review-mode-header {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 40px;
            background: white;
            border-bottom: 2px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .review-mode-header h2 {
            margin: 0;
            color: #333;
        }

        .review-list {
            max-height: 60vh;
            overflow-y: auto;
            padding: 20px 0;
        }

        .review-item {
            background: #f9fafb;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 20px;
            border: 2px solid #e0e0e0;
        }

        .review-item.incorrect-answer {
            border-color: #fca5a5;
        }

        .review-question-text {
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            font-size: 1.05em;
        }

        .review-answer {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
        }

        .review-answer.user {
            background: #fef2f2;
            color: #991b1b;
        }

        .review-answer.correct {
            background: #ecfdf5;
            color: #065f46;
        }

        .review-explanation {
            background: white;
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
            border-left: 3px solid #667eea;
        }

        /* Responsive */
        @media (max-width: 768px) {
            body {
                padding: 0;
            }

            .container {
                border-radius: 0;
            }

            .header {
                flex-direction: column;
                padding: 12px 15px;
                gap: 8px;
            }
            
            .header-left, .header-right {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .header-center {
                order: -1;
            }

            .header h1 {
                font-size: 1.4em;
            }
            
            .header-btn {
                padding: 6px 10px;
                font-size: 0.8em;
            }

            .mode-buttons {
                grid-template-columns: 1fr;
            }

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

            .question-header {
                flex-direction: column;
                gap: 15px;
                padding: 15px 20px;
            }

            .question-header > div:last-child {
                width: 100%;
                justify-content: space-between;
            }

            .question-info {
                width: 100%;
                justify-content: space-between;
            }

            .question-content {
                padding: 20px;
            }

            .question-text {
                font-size: 1.1em;
            }

            .question-actions > div {
                flex-direction: column;
            }

            .question-actions .btn {
                width: 100%;
            }

            .results-stats {
                grid-template-columns: 1fr;
            }

            .review-buttons {
                flex-direction: column;
            }

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

        .hidden {
            display: none !important;
        }

        /* Bookmark Modal */
        /* Timer Expired Modal */
        .timer-expired-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.75);
            z-index: 2000;
            padding: 20px;
            overflow-y: auto;
        }

        .timer-expired-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timer-expired-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 480px;
            width: 100%;
            padding: 36px 32px 28px 32px;
            position: relative;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }

        [data-theme="dark"] .timer-expired-modal-content {
            background: #1e293b;
            color: #f1f5f9;
        }

        .timer-expired-icon {
            font-size: 3em;
            margin-bottom: 12px;
        }

        .timer-expired-title {
            font-size: 1.6em;
            font-weight: 700;
            color: #ef4444;
            margin-bottom: 10px;
        }

        [data-theme="dark"] .timer-expired-title {
            color: #f87171;
        }

        .timer-expired-body {
            font-size: 1em;
            color: #444;
            margin-bottom: 8px;
            line-height: 1.6;
        }

        [data-theme="dark"] .timer-expired-body {
            color: #cbd5e1;
        }

        .timer-expired-unanswered {
            font-size: 0.95em;
            color: #f59e0b;
            font-weight: 600;
            margin-bottom: 24px;
        }

        [data-theme="dark"] .timer-expired-unanswered {
            color: #fbbf24;
        }

        .timer-expired-buttons {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .timer-expired-grade-btn {
            padding: 12px 28px;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
        }

        .timer-expired-grade-btn:hover {
            background: #059669;
        }

        .timer-expired-exit-btn {
            padding: 12px 28px;
            background: #6b7280;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
        }

        .timer-expired-exit-btn:hover {
            background: #4b5563;
        }

        /* Unanswered questions warning near Grade button */
        .unanswered-warning {
            font-size: 0.82em;
            color: #f59e0b;
            font-weight: 600;
            margin-top: 4px;
            text-align: center;
            display: none;
        }

        [data-theme="dark"] .unanswered-warning {
            color: #fbbf24;
        }

        .bookmark-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            padding: 20px;
            overflow-y: auto;
        }

        .bookmark-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bookmark-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 600px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            padding: 30px;
            position: relative;
        }

        .bookmark-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e0e0e0;
        }

        .bookmark-modal-header h2 {
            color: #333;
            margin: 0;
        }

        .bookmark-close-btn {
            background: none;
            border: none;
            font-size: 2em;
            color: #999;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .bookmark-close-btn:hover {
            background: #f0f0f0;
            color: #333;
        }

        .bookmark-list-item {
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }

        .bookmark-list-item:hover {
            border-color: #667eea;
            background: #f9fafb;
            transform: translateX(5px);
        }

        .bookmark-list-item.current {
            border-color: #f59e0b;
            background: #fef3c7;
        }

        .bookmark-question-number {
            font-weight: 700;
            color: #667eea;
            margin-bottom: 5px;
        }

        .bookmark-question-preview {
            color: #333;
            font-size: 0.95em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .bookmark-empty {
            text-align: center;
            padding: 40px;
            color: #999;
        }

        .bookmark-empty-icon {
            font-size: 3em;
            margin-bottom: 10px;
        }

        /* Help Modal */
        .help-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10001;
            padding: 20px;
            overflow-y: auto;
        }

        .help-modal.show {
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .help-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            padding: 30px;
            margin-top: 20px;
        }

        .help-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e0e0e0;
        }

        .help-modal-header h2 {
            color: #333;
            margin: 0;
        }

        .help-close-btn {
            background: none;
            border: none;
            font-size: 2em;
            color: #999;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .help-close-btn:hover {
            background: #f0f0f0;
            color: #333;
        }

        .help-content {
            color: #333;
            line-height: 1.6;
        }

        .help-content h2 {
            color: #667eea;
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.4em;
        }

        .help-content h3 {
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 1.15em;
        }

        .help-content p {
            margin-bottom: 10px;
        }

        .help-content ul, .help-content ol {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .help-content li {
            margin-bottom: 8px;
        }

        .help-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .help-content th, .help-content td {
            border: 1px solid #e0e0e0;
            padding: 10px;
            text-align: left;
        }

        .help-content th {
            background: #f9fafb;
            font-weight: 600;
        }

        .help-content code {
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }

        .help-content strong {
            color: #667eea;
        }

        .help-content hr {
            border: none;
            border-top: 2px solid #e0e0e0;
            margin: 20px 0;
        }

        .help-tip {
    background: #f0f4ff;
    border-left: 4px solid #667eea;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 0 8px 8px 0;
    color: #1e3a5c;
}

/* Dark mode for Help Modal */
[data-theme="dark"] .help-content {
    color: #e2e8f0;
}

[data-theme="dark"] .help-content h2 {
    color: #818cf8;
}

[data-theme="dark"] .help-content h3 {
    color: #a5b4fc;
}

[data-theme="dark"] .help-content p,
[data-theme="dark"] .help-content li {
    color: #cbd5e1;
}

[data-theme="dark"] .help-content strong {
    color: #f1f5f9;
}

[data-theme="dark"] .help-tip {
    background: #1e3a5f;
    border-left-color: #818cf8;
    color: #e0f2fe;
}

[data-theme="dark"] .help-tip strong {
    color: #bfdbfe;
}

/* Help tip variants */
.help-tip-success {
    background: #ecfdf5;
    border-left-color: #10b981;
    color: #065f46;
}

.help-tip-success strong {
    color: #047857;
}

.help-tip-example {
    background: #f0f9ff;
    border-left-color: #0284c7;
    color: #0c4a6e;
}

.help-tip-example strong {
    color: #0369a1;
}

.help-tip-example em {
    color: #0369a1;
}

.help-tip-example li {
    color: #164e63;
}

/* Dark mode for help tip variants */
[data-theme="dark"] .help-tip-success {
    background: #064e3b;
    border-left-color: #34d399;
    color: #d1fae5;
}

[data-theme="dark"] .help-tip-success strong {
    color: #6ee7b7;
}

[data-theme="dark"] .help-tip-example {
    background: #1e3a5f;
    border-left-color: #38bdf8;
    color: #e0f2fe;
}

[data-theme="dark"] .help-tip-example strong {
    color: #7dd3fc;
}

[data-theme="dark"] .help-tip-example em {
    color: #7dd3fc;
}

[data-theme="dark"] .help-tip-example li {
    color: #bae6fd;
}

/* Dark mode for Help Modal tables */
[data-theme="dark"] .help-content table {
    border-color: #475569;
}

[data-theme="dark"] .help-content th,
[data-theme="dark"] .help-content td {
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .help-content tr:first-child th,
[data-theme="dark"] .help-content tr:first-child td,
[data-theme="dark"] .help-content thead th,
[data-theme="dark"] .help-content thead td {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white !important;
}

[data-theme="dark"] .help-content tr:nth-child(odd):not(:first-child) td {
    background-color: #334155;
}

[data-theme="dark"] .help-content tr:nth-child(even) td {
    background-color: #1e293b;
}
/* Dark mode for code/keyboard keys in Help Modal */
[data-theme="dark"] .help-content code {
    background: #475569 !important;
    color: #f1f5f9 !important;
    border: 1px solid #64748b !important;
}

        .help-tip strong {
            color: #667eea;
        }

        /* Feedback Modal */
        .feedback-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100dvh;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10001;
            padding: 20px;
            overflow: hidden;
        }

        .feedback-modal.show {
            display: grid;
            place-items: center;
        }

        .feedback-modal-content {
            background: white;
            border-radius: 15px;
            max-width: 500px;
            width: 100%;
            max-height: calc(100dvh - 40px);
            overflow-y: auto;
            padding: 30px;
        }

        .feedback-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e0e0e0;
        }

        .feedback-modal-header h2 {
            color: #333;
            margin: 0;
        }

        .feedback-close-btn {
            background: none;
            border: none;
            font-size: 2em;
            color: #999;
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .feedback-close-btn:hover {
            background: #f0f0f0;
            color: #333;
        }

        .feedback-category-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .feedback-category-btn {
            padding: 20px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .feedback-category-btn:hover {
            border-color: #667eea;
            background: #f0f4ff;
            transform: translateY(-2px);
        }

        .feedback-category-btn .icon {
            font-size: 1.5em;
            margin-bottom: 8px;
        }

        .feedback-category-btn .label {
            font-weight: 600;
            color: #333;
            font-size: 0.95em;
        }

        .feedback-email-info {
            background: #f9fafb;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            color: #666;
            font-size: 0.9em;
        }

        .feedback-email-info strong {
            color: #667eea;
        }

        /* Calculator */
        .calculator-btn {
            padding: 10px 14px;
            border-radius: 6px;
            background: #2563eb;
            color: white;
            border: none;
            font-size: 0.95em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 44px;
        }

        .calculator-btn .calc-icon {
            font-size: 1.1em;
        }

        .calculator-btn:hover {
            background: #1d4ed8;
        }

        .calculator-modal {
            display: none;
            position: fixed;
            bottom: 100px;
            right: 20px;
            z-index: 1000;
        }

        .calculator-modal.show {
            display: block;
        }

        .calculator {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            width: 280px;
        }

        .calculator-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .calculator-header h3 {
            margin: 0;
            color: #333;
            font-size: 1.1em;
        }

        .calculator-close {
            background: none;
            border: none;
            font-size: 1.5em;
            color: #999;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .calculator-close:hover {
            background: #f0f0f0;
            color: #333;
        }

        .calculator-display {
            background: #f0f0f0;
            padding: 15px;
            border-radius: 8px;
            text-align: right;
            font-size: 1.8em;
            font-weight: 600;
            margin-bottom: 15px;
            min-height: 50px;
            word-wrap: break-word;
            color: #333;
        }

        .calculator-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .calc-btn {
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 1.2em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            background: #f9fafb;
            color: #333;
        }

        .calc-btn:hover {
            background: #e5e7eb;
            transform: scale(1.05);
        }

        .calc-btn.operator {
            background: #667eea;
            color: white;
        }

        .calc-btn.operator:hover {
            background: #5a6fd6;
        }

        .calc-btn.equals {
            background: #10b981;
            color: white;
        }

        .calc-btn.equals:hover {
            background: #059669;
        }

        .calc-btn.clear {
            background: #ef4444;
            color: white;
        }

        .calc-btn.clear:hover {
            background: #dc2626;
        }

        .calc-btn.span-2 {
            grid-column: span 2;
        }

        /* Analytics Panel */
        .analytics-panel {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border: 2px solid #cbd5e1;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
        }

        .analytics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e2e8f0;
        }

        .analytics-header h3 {
            color: var(--text-secondary);
            margin: 0;
            font-size: 1.3em;
        }

        .analytics-header .clear-btn {
            background: #ef4444;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.8em;
            cursor: pointer;
            transition: all 0.2s;
        }

        .analytics-header .clear-btn:hover {
            background: #dc2626;
        }

        .analytics-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .analytics-stat {
            background: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #e2e8f0;
        }

        .analytics-stat-value {
            font-size: 1.8em;
            font-weight: 700;
            color: #667eea;
        }

        .analytics-stat-label {
            font-size: 0.85em;
            color: #64748b;
            margin-top: 5px;
        }

        /* Focus row: Focus on Weak Areas + Hide/Show Details — side by side */
        .analytics-focus-row {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        /* Collapse toggle — matches Focus button size/weight, distinct colour */
        .analytics-collapse-btn {
            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 600;
            margin-top: 12px;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .analytics-collapse-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(71, 85, 105, 0.4);
        }

        [data-theme="dark"] .analytics-collapse-btn {
            background: linear-gradient(135deg, #475569 0%, #334155 100%);
        }

        [data-theme="dark"] .analytics-collapse-btn:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        }

        /* Collapsible section: category bars only */
        .analytics-collapsible {
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.25s ease;
            max-height: 2000px;
            opacity: 1;
        }

        .analytics-collapsible.collapsed {
            max-height: 0;
            opacity: 0;
        }

        .analytics-categories {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }

        .analytics-categories h4 {
            color: var(--text-secondary);
            margin-bottom: 12px;
            font-size: 1em;
        }

        .analytics-category-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: white;
            border-radius: 6px;
            margin-bottom: 8px;
            border: 1px solid #e2e8f0;
        }

        .analytics-category-item.weak {
            border-left: 4px solid #f59e0b;
            background: #fffbeb;
        }

        .analytics-category-item.strong {
            border-left: 4px solid #10b981;
            background: #ecfdf5;
        }

        .analytics-category-name {
            font-weight: 500;
            color: #334155;
        }

        .analytics-category-score {
            font-weight: 700;
        }

        .analytics-category-score.weak {
            color: #d97706;
        }

        .analytics-category-score.strong {
            color: #059669;
        }

        .analytics-empty {
            text-align: center;
            padding: 30px;
            color: #64748b;
        }

        .analytics-empty-icon {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        /* Progress comparison */
        .progress-comparison {
            background: #f0f4ff;
            border: 2px solid #667eea;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
            text-align: center;
        }

        .progress-comparison h4 {
            color: #667eea;
            margin-bottom: 15px;
        }

        .progress-comparison-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .progress-stat {
            text-align: center;
        }

        .progress-stat-label {
            font-size: 0.85em;
            color: #64748b;
        }

        .progress-stat-value {
            font-size: 1.1em;
            font-weight: 600;
            color: #334155;
        }

        .progress-stat-change {
            font-size: 0.9em;
            font-weight: 600;
        }

        .progress-stat-change.positive {
            color: #10b981;
        }

        .progress-stat-change.negative {
            color: #ef4444;
        }

        .progress-stat-change.neutral {
            color: #64748b;
        }

        /* Exam Readiness Panel */
        .exam-readiness-panel {
            background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
            border: 2px solid #f59e0b;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
        }

        .exam-readiness-panel.achieved {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            border-color: #10b981;
        }

        .exam-readiness-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .exam-readiness-header h3 {
            color: #92400e;
            margin: 0;
            font-size: 1.2em;
        }

        .exam-readiness-panel.achieved .exam-readiness-header h3 {
            color: #065f46;
        }

        .exam-readiness-badge {
            background: #10b981;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 600;
        }

        .exam-readiness-description {
            color: #78716c;
            font-size: 0.9em;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .exam-readiness-panel.achieved .exam-readiness-description {
            color: #047857;
        }

        .score-slots-container {
            margin-bottom: 20px;
        }

        .score-slots-label {
            font-size: 0.85em;
            color: #78716c;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .score-slots {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .score-slot {
            width: 65px;
            height: 65px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1em;
            transition: all 0.3s;
        }

        .score-slot.empty {
            background: #e5e7eb;
            border: 2px dashed #9ca3af;
            color: #9ca3af;
        }

        .score-slot.passing {
            background: #10b981;
            border: 2px solid #059669;
            color: white;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
        }

        .score-slot.failing {
            background: #ef4444;
            border: 2px solid #dc2626;
            color: white;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
        }

        .score-slot-number {
            font-size: 0.65em;
            opacity: 0.8;
            margin-top: 2px;
        }

        .score-slot.empty .score-slot-number {
            display: none;
        }

        .exam-readiness-progress {
            background: #fef3c7;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }

        .exam-readiness-panel.achieved .exam-readiness-progress {
            background: #d1fae5;
        }

        .progress-bar-container {
            background: #fde68a;
            border-radius: 10px;
            height: 12px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .exam-readiness-panel.achieved .progress-bar-container {
            background: #a7f3d0;
        }

        .progress-bar-fill {
            background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        .exam-readiness-panel.achieved .progress-bar-fill {
            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        }

        .progress-text {
            font-size: 0.9em;
            color: #92400e;
            font-weight: 500;
        }

        .exam-readiness-panel.achieved .progress-text {
            color: #065f46;
        }

        .exam-readiness-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .readiness-stat {
            text-align: center;
        }

        .readiness-stat-value {
            font-size: 1.3em;
            font-weight: 700;
            color: #92400e;
        }

        .exam-readiness-panel.achieved .readiness-stat-value {
            color: #065f46;
        }

        .readiness-stat-label {
            font-size: 0.8em;
            color: #78716c;
        }

        /* Exam Ready Modal */
        .exam-ready-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .exam-ready-modal.show {
            display: flex;
        }

        .exam-ready-modal-content {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            border-radius: 20px;
            padding: 40px;
            max-width: 550px;
            width: 100%;
            text-align: center;
            border: 3px solid #10b981;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            animation: modalPop 0.4s ease;
        }

        @keyframes modalPop {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        .exam-ready-icon {
            font-size: 4em;
            margin-bottom: 20px;
        }

        .exam-ready-title {
            font-size: 2em;
            color: #065f46;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .exam-ready-subtitle {
            color: #047857;
            font-size: 1.1em;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        .exam-ready-scores {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .exam-ready-score {
            background: #10b981;
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 1.1em;
        }

        .exam-ready-message {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
            color: #065f46;
            font-size: 0.95em;
            line-height: 1.6;
            border: 1px solid #a7f3d0;
        }

        .exam-ready-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .exam-ready-btn {
            padding: 14px 28px;
            border-radius: 10px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }

        .exam-ready-btn.primary {
            background: #10b981;
            color: white;
        }

        .exam-ready-btn.primary:hover {
            background: #059669;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
        }

        .exam-ready-btn.secondary {
            background: white;
            color: #065f46;
            border: 2px solid #10b981;
        }

        .exam-ready-btn.secondary:hover {
            background: #ecfdf5;
        }

        /* Focus on Weak Areas Button */
        .focus-weak-btn {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95em;
            font-weight: 600;
            margin-top: 12px;
            transition: all 0.3s;
            display: none;
        }

        .focus-weak-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
        }

        .focus-weak-btn.show {
            display: inline-block;
        }

        /* Keyboard shortcuts hint */
        .keyboard-hints {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 18px;
            border-radius: 8px;
            font-size: 0.85em;
            z-index: 500;
            max-width: 280px;
            display: none;
        }
        
        .keyboard-hints-close {
            position: absolute;
            top: 8px;
            right: 10px;
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 1.2em;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .keyboard-hints-close:hover {
            color: white;
        }

        .keyboard-hints.show {
            display: block;
        }

        .keyboard-hints h5 {
            margin: 0 0 8px 0;
            padding-right: 20px;
            color: #a5b4fc;
            font-size: 0.95em;
        }

        .keyboard-hints ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .keyboard-hints li {
            margin-bottom: 4px;
        }

        .keyboard-hints kbd {
            background: #374151;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            margin-right: 8px;
        }

        .keyboard-toggle-btn {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9em;
            z-index: 499;
            transition: all 0.2s;
        }

        .keyboard-toggle-btn:hover {
            background: #5a6fd6;
        }

        @media (max-width: 1024px) {
            .keyboard-toggle-btn,
            .keyboard-hints {
                /* Show on tablets but with close button available */
            }
        }
        
        @media (max-width: 480px) {
            .keyboard-toggle-btn,
            .keyboard-hints {
                display: none !important;
            }
        }

        /* Confetti */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0;
            animation: confetti-fall 3s ease-out forwards;
        }

        @keyframes confetti-fall {
            0% {
                opacity: 1;
                transform: translateY(-100px) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translateY(100vh) rotate(720deg);
            }
        }

        /* Dark mode overrides */
        [data-theme="dark"] .container {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] .mode-btn {
            background: var(--bg-tertiary);
            border-color: var(--border-strong);
        }

        [data-theme="dark"] .mode-btn:hover {
            border-color: var(--accent-secondary);
        }

        [data-theme="dark"] .mode-btn.active {
            border-color: var(--accent-secondary);
            background: rgba(129, 140, 248, 0.15);
        }

        [data-theme="dark"] .mode-btn h3,
        [data-theme="dark"] .category-selection h3,
        [data-theme="dark"] .results-title {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .mode-btn p {
            color: var(--text-tertiary);
        }

        [data-theme="dark"] .categories-grid {
            border-color: var(--border-strong);
        }

        [data-theme="dark"] .category-item {
            background: var(--bg-secondary);
            border-bottom-color: var(--border-color);
        }

        [data-theme="dark"] .category-item:hover {
            background: var(--bg-tertiary);
        }

        [data-theme="dark"] .category-label {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .test-config {
            background: var(--bg-tertiary);
        }

        [data-theme="dark"] .question-header {
            background: var(--bg-tertiary);
            border-bottom-color: var(--border-color);
        }

        [data-theme="dark"] .question-text {
            color: var(--text-primary);
        }

        [data-theme="dark"] .option {
            background: var(--bg-secondary);
            border-color: var(--border-strong);
        }

        [data-theme="dark"] .option:hover:not(.disabled) {
            background: var(--bg-tertiary);
        }

        [data-theme="dark"] .option.selected {
            background: rgba(59, 130, 246, 0.15);
            border-color: var(--accent-primary);
        }

        [data-theme="dark"] .option-text {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .btn-secondary {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-color: var(--border-strong);
        }

        [data-theme="dark"] .bookmark-btn {
            background: var(--bg-tertiary);
            border-color: var(--border-strong);
            color: var(--text-secondary);
        }

        [data-theme="dark"] .bookmark-modal-content,
        [data-theme="dark"] .help-modal-content,
        [data-theme="dark"] .feedback-modal-content {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] .bookmark-modal-header h2,
        [data-theme="dark"] .help-modal-header h2,
        [data-theme="dark"] .feedback-modal-header h2 {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .help-content {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .calculator {
            background: var(--bg-secondary);
        }

        [data-theme="dark"] .calculator-display {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }

        [data-theme="dark"] .calc-btn {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        [data-theme="dark"] .stat-card,
        [data-theme="dark"] .category-result,
        [data-theme="dark"] .review-item {
            background: var(--bg-tertiary);
            border-color: var(--border-strong);
        }

        /* Dark mode for results screen */
        [data-theme="dark"] .results-subtitle {
            color: #94a3b8;
        }

        [data-theme="dark"] .stat-card .stat-value {
            color: #818cf8;
        }

        [data-theme="dark"] .stat-card .stat-label {
            color: #cbd5e1;
        }

        [data-theme="dark"] .review-section h3 {
            color: #e2e8f0;
        }

        [data-theme="dark"] .category-name {
            color: #e2e8f0;
        }

        [data-theme="dark"] .category-score {
            color: #818cf8;
        }

        [data-theme="dark"] .analytics-panel {
            background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
            border-color: var(--border-strong);
        }

        [data-theme="dark"] .analytics-stat {
            background: var(--bg-secondary);
            border-color: var(--border-color);
        }

        [data-theme="dark"] .analytics-category-item {
            background: var(--bg-secondary);
            border-color: var(--border-color);
        }

        [data-theme="dark"] .analytics-category-item.weak {
            background: rgba(245, 158, 11, 0.1);
            border-left-color: #f59e0b;
        }

        [data-theme="dark"] .analytics-category-item.strong {
            background: rgba(16, 185, 129, 0.1);
            border-left-color: #34d399;
        }

        [data-theme="dark"] .analytics-category-name {
            color: var(--text-secondary);
        }

        [data-theme="dark"] .study-guide-nav {
            background: var(--bg-secondary);
            border-bottom-color: var(--border-strong);
        }

        [data-theme="dark"] .review-mode-header {
            background: var(--bg-secondary);
            border-bottom-color: var(--border-strong);
        }

        /* ============================================
           DEMO MODE STYLES
           ============================================ */
        
        #demoBanner {
            animation: slideDown 0.3s ease-out;
        }
        
        @keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .category-item.locked {
            opacity: 0.6;
            cursor: not-allowed;
            position: relative;
        }
        
        .category-item.locked::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(0,0,0,0.03) 10px,
                rgba(0,0,0,0.03) 20px
            );
            pointer-events: none;
            border-radius: inherit;
        }
        
        .category-item.locked .category-checkbox {
            cursor: not-allowed;
        }
        
        .category-item.locked:hover {
            transform: none;
            box-shadow: none;
        }
        
        .locked-badge {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }
        
        [data-theme="dark"] #demoBanner {
            background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
        }
        
        [data-theme="dark"] .category-item.locked {
            opacity: 0.5;
        }

        /* ============================================
           STUDY GUIDE SEARCH STYLES
           ============================================ */

        /* Search band — sits directly below the blue header */
        .sg-search-band {
            display: none;
            background: linear-gradient(135deg, #1e3a5f 0%, #1a5490 100%);
            padding: 18px 40px 20px 40px;
            border-bottom: 3px solid rgba(255,255,255,0.15);
        }

        .sg-search-band.visible {
            display: block;
        }

        .sg-search-label {
            color: rgba(255,255,255,0.9);
            font-size: 0.82em;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .sg-search-label span {
            background: rgba(255,255,255,0.18);
            border-radius: 4px;
            padding: 2px 8px;
            margin-left: 8px;
            font-size: 0.88em;
            letter-spacing: 0;
            text-transform: none;
            font-weight: 500;
            vertical-align: middle;
        }

        .sg-search-box {
            display: flex;
            align-items: center;
            gap: 12px;
            background: white;
            border: none;
            border-radius: 10px;
            padding: 12px 18px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15);
            transition: box-shadow 0.2s;
        }

        .sg-search-box:focus-within {
            box-shadow: 0 4px 18px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.4);
        }

        .sg-search-icon {
            font-size: 1.2em;
            flex-shrink: 0;
            color: #6b7280;
        }

        .sg-search-input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: 1.05em;
            color: #111827;
            font-family: inherit;
        }

        .sg-search-input::placeholder {
            color: #9ca3af;
        }

        .sg-search-clear {
            background: none;
            border: none;
            cursor: pointer;
            color: #9ca3af;
            font-size: 1.1em;
            padding: 0 4px;
            line-height: 1;
            display: none;
            transition: color 0.15s;
        }

        .sg-search-clear:hover {
            color: #374151;
        }

        .sg-search-clear.visible {
            display: block;
        }

        /* Results drop-down panel */
        .sg-search-results-panel {
            display: none;
            position: absolute;
            left: 40px;
            right: 40px;
            top: 100%;
            background: var(--bg-secondary);
            border: 1px solid var(--border-strong);
            border-top: none;
            border-radius: 0 0 12px 12px;
            box-shadow: 0 8px 24px var(--shadow-strong);
            z-index: 500;
            max-height: 480px;
            overflow-y: auto;
            padding: 12px 16px 16px 16px;
        }

        .sg-search-results-panel.visible {
            display: block;
        }

        .sg-search-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
            min-height: 18px;
        }

        .sg-search-status {
            font-size: 0.78em;
            color: rgba(255,255,255,0.7);
        }

        .sg-search-hint {
            font-size: 0.78em;
            color: rgba(255,255,255,0.55);
        }

        .sg-result-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 13px 16px;
            margin-bottom: 8px;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .sg-result-card:last-child {
            margin-bottom: 0;
        }

        .sg-result-card:hover {
            border-color: var(--accent-primary);
            box-shadow: 0 2px 8px var(--shadow);
        }

        .sg-result-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
            flex-wrap: wrap;
        }

        .sg-result-guide-badge {
            background: linear-gradient(135deg, #1a5490, #2878b8);
            color: white;
            font-size: 0.7em;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 20px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .sg-result-heading {
            font-size: 0.93em;
            font-weight: 600;
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }

        .sg-result-snippet {
            font-size: 0.85em;
            color: var(--text-tertiary);
            line-height: 1.5;
            margin-bottom: 9px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .sg-result-snippet mark {
            background: #fef08a;
            color: #713f12;
            border-radius: 2px;
            padding: 0 2px;
        }

        [data-theme="dark"] .sg-result-snippet mark {
            background: #854d0e;
            color: #fef9c3;
        }

        .sg-result-open-btn {
            background: var(--accent-primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 5px 13px;
            font-size: 0.83em;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
        }

        .sg-result-open-btn:hover {
            background: var(--accent-hover);
        }

        .sg-no-results {
            text-align: center;
            padding: 24px 20px;
            color: var(--text-muted);
            font-size: 0.92em;
        }

        .sg-indexing-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78em;
            color: rgba(255,255,255,0.65);
            margin-top: 6px;
        }

        .sg-spinner {
            width: 12px;
            height: 12px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: sg-spin 0.7s linear infinite;
            flex-shrink: 0;
        }

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

        /* Wrapper for the band so the results panel can use position:absolute */
        .sg-search-band-inner {
            position: relative;
        }

        @media (max-width: 600px) {
            .sg-search-band {
                padding: 14px 16px 16px 16px;
            }
            .sg-search-results-panel {
                left: 16px;
                right: 16px;
            }
        }
        /* ============================================
           INLINE STUDY GUIDE SEARCH (below Select Study Guide heading)
           ============================================ */

        .sg-inline-search-container {
            margin: 0 0 20px 0;
        }

        .sg-inline-search-container.hidden {
            display: none;
        }

        .sg-inline-heading {
            color: var(--text-secondary);
            font-size: 1em;
            font-weight: 600;
            margin: 0 0 12px 0;
            line-height: 1.4;
        }

        .sg-inline-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-secondary);
            border: 2px solid var(--accent-primary);
            border-radius: 10px;
            padding: 10px 16px;
            transition: box-shadow 0.2s;
        }

        .sg-inline-search-box:focus-within {
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        /* Inline input uses CSS variable so it works in both light and dark mode */
        .sg-inline-search-box .sg-search-input {
            color: var(--text-primary);
        }

        .sg-inline-search-box .sg-search-input::placeholder {
            color: var(--text-muted);
        }

        .sg-inline-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 7px;
            min-height: 18px;
        }

        .sg-inline-hint {
            font-size: 0.8em;
            color: var(--text-muted);
        }

        /* Inline results: not absolutely positioned — flows in the document */
        .sg-inline-results {
            position: static !important;
            border-radius: 10px !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: 0 4px 16px var(--shadow) !important;
            margin-top: 10px;
            max-height: 420px;
        }

        

/* ==========================================================
   PHASE 2 MODERN UI OVERRIDES
   Goal: visual refresh only. No app logic, IDs, or JS hooks changed.
   ========================================================== */

:root {
    --bg-primary: #0b1220;
    --bg-secondary: #101827;
    --bg-tertiary: #172235;
    --bg-input: #0f172a;
    --text-primary: #e5edf8;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.28);
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-hover: #2563eb;
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.13);
    --success-border: rgba(34, 197, 94, 0.45);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.12);
    --error-border: rgba(239, 68, 68, 0.45);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.13);
    --shadow: rgba(0, 0, 0, 0.24);
    --shadow-strong: rgba(0, 0, 0, 0.42);
    --card-bg: #172235;
    --toggle-bg: #334155;
    --modern-radius: 18px;
    --modern-radius-sm: 12px;
    --modern-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    --modern-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.18);
}

html {
    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.20), transparent 32%), #0b1220;
}

body {
    background:
        radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.18), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(34, 197, 94, 0.10), transparent 28%),
        var(--bg-primary);
    color: var(--text-primary);
    padding: 24px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.container {
    max-width: 1240px;
    background: rgba(16, 24, 39, 0.86);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--modern-shadow);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.header {
    background: rgba(15, 23, 42, 0.92);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 18px 22px;
    gap: 16px;
}

.header h1 {
    font-size: 1.7rem;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.header p {
    color: var(--text-tertiary);
    font-size: 0.92rem;
}

.header-btn {
    background: rgba(30, 41, 59, 0.78);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 10px 15px;
    box-shadow: none;
}

.header-btn:hover {
    background: rgba(59, 130, 246, 0.16);
    border-color: rgba(96, 165, 250, 0.65);
    color: #fff;
    transform: translateY(-1px);
}

.setup-screen {
    padding: 28px;
}

.analytics-panel,
.mode-selection,
.test-config,
.category-selection,
.exam-readiness-panel,
.progress-comparison,
.results-screen .stat-card,
.category-result,
.review-item {
    background: rgba(23, 34, 53, 0.78) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--modern-radius) !important;
    box-shadow: var(--modern-shadow-soft);
}

.analytics-panel {
    padding: 24px;
}

.analytics-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 18px;
}

.analytics-header h3,
.mode-selection-title,
.config-title,
.category-selection h3,
.results-title,
.category-breakdown h3,
.review-section h3 {
    color: var(--text-primary) !important;
    letter-spacing: -0.025em;
}

.analytics-header .clear-btn {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-radius: 999px;
    padding: 8px 12px;
}

.analytics-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.analytics-stat {
    background: rgba(15, 23, 42, 0.58) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px;
    padding: 18px 16px;
}

.analytics-stat-value {
    color: var(--accent-secondary);
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.analytics-stat-label {
    color: var(--text-tertiary);
}

.focus-weak-btn,
.analytics-collapse-btn,
.select-all-btn,
.test-supplement-btn,
.btn-primary,
.start-button {
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.22);
}

.focus-weak-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.analytics-collapse-btn {
    background: rgba(51, 65, 85, 0.9) !important;
    border: 1px solid var(--border-strong);
}

.mode-selection {
    padding: 24px;
    margin-bottom: 24px;
}

.mode-selection-subtitle,
.config-help-text,
.toggle-help-text,
.category-count,
.results-subtitle {
    color: var(--text-tertiary) !important;
}

.mode-buttons {
    gap: 18px;
}

.mode-btn {
    background: rgba(15, 23, 42, 0.58) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px;
    padding: 28px 22px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mode-btn:hover {
    border-color: rgba(96, 165, 250, 0.7) !important;
    background: rgba(30, 41, 59, 0.78) !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

.mode-btn.active {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.20), rgba(59, 130, 246, 0.06)) !important;
    border-color: rgba(96, 165, 250, 0.85) !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.32), 0 18px 36px rgba(37, 99, 235, 0.16) !important;
}

.mode-btn h3 {
    color: var(--text-primary) !important;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.mode-btn p {
    color: var(--text-tertiary) !important;
    line-height: 1.45;
}

.test-supplement-container {
    background: rgba(37, 99, 235, 0.11) !important;
    border: 1px solid rgba(59, 130, 246, 0.34) !important;
    border-radius: 18px;
}

.test-supplement-note {
    color: #bfdbfe !important;
}

.category-selection {
    padding: 22px;
    margin-bottom: 24px;
}

.category-selection-controls {
    gap: 10px;
}

.category-control-btn,
.preset-btn,
.btn-secondary,
.bookmark-btn,
.calculator-btn,
.study-guide-back-btn {
    border-radius: 12px !important;
}

.clear-all-btn,
.btn-secondary,
.preset-btn {
    background: rgba(15, 23, 42, 0.55) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-strong) !important;
}

.clear-all-btn:hover,
.btn-secondary:hover:not(:disabled),
.preset-btn:hover {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
    color: #fff !important;
}

.categories-grid {
    border: none !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
}

.category-item {
    background: rgba(15, 23, 42, 0.58) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px;
    padding: 15px 16px;
}

.category-item:hover {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    transform: translateY(-1px);
}

.category-item.selected {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.68) !important;
}

.category-checkbox {
    accent-color: var(--accent-primary);
}

.category-label {
    color: var(--text-secondary) !important;
    font-size: 0.95rem;
}

.test-config {
    padding: 24px;
}

.question-count-input {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: 12px;
}

.preset-btn.active {
    background: var(--accent-primary) !important;
    color: #fff !important;
    border-color: var(--accent-primary) !important;
}

.toggle {
    background: rgba(51, 65, 85, 0.95);
    border: 1px solid var(--border-strong);
}

.toggle.active {
    background: var(--accent-primary);
}

.start-button {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    min-height: 58px;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    position: sticky;
    bottom: 18px;
    z-index: 50;
}

.start-button:hover:not(:disabled) {
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.33);
}

.start-button:disabled {
    background: rgba(148, 163, 184, 0.35) !important;
    color: rgba(226, 232, 240, 0.65);
}

/* Study guide search */
.sg-search-band {
    background: rgba(15, 23, 42, 0.78);
    border-bottom: 1px solid var(--border-color);
    padding: 18px 28px;
}

.sg-search-box,
.sg-inline-search-box {
    background: rgba(15, 23, 42, 0.82) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.sg-search-input {
    color: var(--text-primary) !important;
}

.sg-search-input::placeholder {
    color: var(--text-muted) !important;
}

.sg-result-card {
    background: rgba(15, 23, 42, 0.94) !important;
    border-radius: 14px;
}

/* Question screen */
.question-screen {
    background: transparent;
}

.progress-bar {
    background: rgba(30, 41, 59, 0.86);
    height: 8px;
}

.progress-fill {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.question-header {
    background: rgba(15, 23, 42, 0.72) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 18px 32px;
}

.info-label {
    color: var(--text-tertiary) !important;
}

.info-value,
.timer {
    color: var(--text-primary) !important;
}

.question-content {
    padding: 30px 32px 36px;
}

.question-main {
    background: rgba(23, 34, 53, 0.78);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--modern-shadow-soft);
}

.question-text {
    color: var(--text-primary) !important;
    font-size: 1.14rem;
    line-height: 1.65;
    letter-spacing: -0.01em;
}

.option {
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px;
    padding: 16px 18px;
}

.option:hover:not(.disabled) {
    background: rgba(30, 41, 59, 0.86) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    transform: translateY(-1px);
}

.option.selected {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.72) !important;
}

.option.correct {
    background: var(--success-bg) !important;
    border-color: var(--success-border) !important;
}

.option.incorrect {
    background: var(--error-bg) !important;
    border-color: var(--error-border) !important;
}

.option-letter {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

.option-text {
    color: var(--text-secondary) !important;
}

.feedback {
    border-radius: 16px;
    border-width: 1px !important;
}

.feedback.correct {
    background: var(--success-bg) !important;
    border-color: var(--success-border) !important;
}

.feedback.incorrect {
    background: var(--error-bg) !important;
    border-color: var(--error-border) !important;
}

.feedback-text,
.feedback-reference {
    color: var(--text-secondary) !important;
}

.inline-figure-panel,
.calculator,
.bookmark-modal-content,
.help-modal-content,
.feedback-modal-content,
.timer-expired-modal-content {
    background: rgba(23, 34, 53, 0.98) !important;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    color: var(--text-primary);
}

/* Results screen */
.results-screen {
    padding: 32px;
}

.score-circle {
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.stat-card {
    border-width: 1px !important;
}

.stat-value {
    color: var(--accent-secondary) !important;
}

.stat-label,
.category-name,
.review-question-text {
    color: var(--text-secondary) !important;
}

.review-explanation {
    background: rgba(15, 23, 42, 0.68) !important;
    color: var(--text-secondary);
    border-left-color: var(--accent-primary);
}

/* Keyboard shortcuts */
.keyboard-toggle-btn {
    background: rgba(59, 130, 246, 0.95);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.3);
}

.keyboard-hints {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

@media (max-width: 900px) {
    body { padding: 0; }
    .container { border-radius: 0; }
    .setup-screen, .question-content, .results-screen { padding: 18px; }
    .analytics-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .categories-grid { grid-template-columns: 1fr; }
    .mode-buttons { grid-template-columns: 1fr; }
    .start-button { bottom: 10px; }
}

@media (max-width: 520px) {
    .analytics-stats { grid-template-columns: 1fr; }
    .question-header { padding: 14px 18px; }
    .question-main { padding: 18px; }
}

/* =========================================================
   Phase 2.1 Light Mode Fix
   The Phase 2 visual polish was dark-first. These overrides
   restore a complete light theme when data-theme="light".
   ========================================================= */

html:not([data-theme="dark"]) {
    --modern-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
    --modern-shadow-card: 0 18px 42px rgba(15, 23, 42, 0.10);
}

html:not([data-theme="dark"]) body {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .container {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10) !important;
}

html:not([data-theme="dark"]) .setup-screen,
html:not([data-theme="dark"]) .results-screen,
html:not([data-theme="dark"]) .question-screen {
    background: transparent !important;
}

html:not([data-theme="dark"]) .analytics-panel,
html:not([data-theme="dark"]) .mode-selection,
html:not([data-theme="dark"]) .test-config,
html:not([data-theme="dark"]) .exam-readiness-panel,
html:not([data-theme="dark"]) .test-supplement-container,
html:not([data-theme="dark"]) .question-main,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .category-result,
html:not([data-theme="dark"]) .review-item,
html:not([data-theme="dark"]) .progress-comparison {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--modern-shadow-soft) !important;
}

html:not([data-theme="dark"]) .analytics-stat,
html:not([data-theme="dark"]) .mode-btn,
html:not([data-theme="dark"]) .category-item,
html:not([data-theme="dark"]) .option,
html:not([data-theme="dark"]) .preset-btn,
html:not([data-theme="dark"]) .btn-secondary,
html:not([data-theme="dark"]) .bookmark-btn,
html:not([data-theme="dark"]) .inline-figure-btn,
html:not([data-theme="dark"]) .calc-btn {
    background: #ffffff !important;
    border-color: #dbe3ee !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .mode-btn:hover,
html:not([data-theme="dark"]) .category-item:hover,
html:not([data-theme="dark"]) .option:hover:not(.disabled),
html:not([data-theme="dark"]) .btn-secondary:hover:not(:disabled),
html:not([data-theme="dark"]) .bookmark-btn:hover {
    background: #f8fafc !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
}

html:not([data-theme="dark"]) .mode-btn.active,
html:not([data-theme="dark"]) .category-item.selected,
html:not([data-theme="dark"]) .option.selected {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
}

html:not([data-theme="dark"]) .question-header,
html:not([data-theme="dark"]) .study-guide-nav,
html:not([data-theme="dark"]) .review-mode-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: #dbe3ee !important;
}

html:not([data-theme="dark"]) .progress-bar {
    background: #e2e8f0 !important;
}

html:not([data-theme="dark"]) .question-text,
html:not([data-theme="dark"]) .option-text,
html:not([data-theme="dark"]) .mode-selection-title,
html:not([data-theme="dark"]) .mode-btn h3,
html:not([data-theme="dark"]) .config-title,
html:not([data-theme="dark"]) .category-label,
html:not([data-theme="dark"]) .results-title,
html:not([data-theme="dark"]) .category-breakdown h3,
html:not([data-theme="dark"]) .review-section h3,
html:not([data-theme="dark"]) .stat-label,
html:not([data-theme="dark"]) .category-name,
html:not([data-theme="dark"]) .review-question-text,
html:not([data-theme="dark"]) .info-value,
html:not([data-theme="dark"]) .timer {
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .mode-selection-subtitle,
html:not([data-theme="dark"]) .mode-btn p,
html:not([data-theme="dark"]) .config-help-text,
html:not([data-theme="dark"]) .toggle-help-text,
html:not([data-theme="dark"]) .info-label,
html:not([data-theme="dark"]) .results-subtitle,
html:not([data-theme="dark"]) .category-count,
html:not([data-theme="dark"]) .stat-label {
    color: var(--text-muted) !important;
}

html:not([data-theme="dark"]) .option-letter {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html:not([data-theme="dark"]) .sg-search-band {
    background: #ffffff !important;
    border-bottom-color: #dbe3ee !important;
}

html:not([data-theme="dark"]) .sg-search-label,
html:not([data-theme="dark"]) .sg-search-status,
html:not([data-theme="dark"]) .sg-search-hint,
html:not([data-theme="dark"]) .sg-inline-hint {
    color: var(--text-muted) !important;
}

html:not([data-theme="dark"]) .sg-search-box,
html:not([data-theme="dark"]) .sg-inline-search-box,
html:not([data-theme="dark"]) .sg-search-results-panel,
html:not([data-theme="dark"]) .sg-result-card {
    background: #ffffff !important;
    border-color: #dbe3ee !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .inline-figure-panel,
html:not([data-theme="dark"]) .calculator,
html:not([data-theme="dark"]) .bookmark-modal-content,
html:not([data-theme="dark"]) .help-modal-content,
html:not([data-theme="dark"]) .feedback-modal-content,
html:not([data-theme="dark"]) .timer-expired-modal-content {
    background: #ffffff !important;
    border-color: #dbe3ee !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .calculator-display,
html:not([data-theme="dark"]) .review-explanation {
    background: #f8fafc !important;
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .feedback.correct {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
}

html:not([data-theme="dark"]) .feedback.incorrect {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
}

html:not([data-theme="dark"]) .feedback-text,
html:not([data-theme="dark"]) .feedback-reference {
    color: var(--text-secondary) !important;
}

/* =========================================================
   Phase 2.2 Light Mode Readability Fix
   Phase 2 made :root dark by default. In light mode, reset
   the theme variables first so all variable-based text colors
   become readable again.
   ========================================================= */

html:not([data-theme="dark"]) {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-input: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --border-color: #dbe3ee;
    --border-strong: #cbd5e1;
    --accent-primary: #2563eb;
    --accent-secondary: #2563eb;
    --accent-hover: #1d4ed8;
    --success: #16a34a;
    --success-bg: #ecfdf5;
    --success-border: #10b981;
    --error: #dc2626;
    --error-bg: #fef2f2;
    --error-border: #ef4444;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --shadow: rgba(15, 23, 42, 0.08);
    --shadow-strong: rgba(15, 23, 42, 0.16);
    --card-bg: #ffffff;
    --slider-bg: #cbd5e1;
    --toggle-bg: #cbd5e1;
}

html:not([data-theme="dark"]) .mode-selection-title,
html:not([data-theme="dark"]) .config-title,
html:not([data-theme="dark"]) .category-selection h3,
html:not([data-theme="dark"]) .sg-inline-heading,
html:not([data-theme="dark"]) .setup-step-title,
html:not([data-theme="dark"]) .analytics-header h3,
html:not([data-theme="dark"]) .results-title,
html:not([data-theme="dark"]) .category-breakdown h3,
html:not([data-theme="dark"]) .review-section h3,
html:not([data-theme="dark"]) .mode-btn h3,
html:not([data-theme="dark"]) .category-label,
html:not([data-theme="dark"]) .config-item label,
html:not([data-theme="dark"]) .toggle-container span,
html:not([data-theme="dark"]) .question-text,
html:not([data-theme="dark"]) .option-text,
html:not([data-theme="dark"]) .info-value,
html:not([data-theme="dark"]) .stat-value,
html:not([data-theme="dark"]) .category-name,
html:not([data-theme="dark"]) .review-question-text {
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .mode-selection-subtitle,
html:not([data-theme="dark"]) .mode-btn p,
html:not([data-theme="dark"]) .test-supplement-note,
html:not([data-theme="dark"]) .config-help-text,
html:not([data-theme="dark"]) .toggle-help-text,
html:not([data-theme="dark"]) .category-count,
html:not([data-theme="dark"]) .info-label,
html:not([data-theme="dark"]) .stat-label,
html:not([data-theme="dark"]) .results-subtitle,
html:not([data-theme="dark"]) .available-count {
    color: var(--text-tertiary) !important;
}

html:not([data-theme="dark"]) .test-supplement-note strong,
html:not([data-theme="dark"]) .feedback-title,
html:not([data-theme="dark"]) .sg-result-heading {
    color: var(--text-primary) !important;
}

html:not([data-theme="dark"]) .header {
    background: #1e293b !important;
    color: #ffffff !important;
}

html:not([data-theme="dark"]) .header h1,
html:not([data-theme="dark"]) .header p,
html:not([data-theme="dark"]) .header-btn {
    color: #ffffff !important;
}

html:not([data-theme="dark"]) .header p {
    opacity: 0.85;
}

html:not([data-theme="dark"]) .start-button:disabled {
    background: #cbd5e1 !important;
    color: #475569 !important;
}

html:not([data-theme="dark"]) .category-item.locked {
    opacity: 0.78;
}

html:not([data-theme="dark"]) .category-item.locked .category-label,
html:not([data-theme="dark"]) .category-item.locked .category-count {
    color: #64748b !important;
}

/* =========================================================
   PHASE 3 UX LAYOUT UPGRADE
   Keeps existing JS engine intact; improves layout, hierarchy,
   mode cards, category chips, settings, and start CTA.
   ========================================================= */

/* Page shell refinement */
.setup-screen {
    padding: 28px 34px 120px 34px !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-card {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
    padding: 26px !important;
    margin: 0 !important;
}

[data-theme="dark"] .setup-card {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24) !important;
}

.setup-step-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.setup-step-kicker span {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    font-size: 0.78rem;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.section-title,
.mode-selection-title,
.config-title {
    color: var(--text-primary) !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
}

.section-subtitle,
.mode-selection-subtitle {
    color: var(--text-tertiary) !important;
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
    margin: 0 0 22px 0 !important;
}

/* Progress card: cleaner and more dashboard-like */
.analytics-panel.setup-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)) !important;
}

.analytics-header {
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
}

.analytics-header h3 {
    color: var(--text-primary) !important;
    font-size: 1.25rem !important;
}

.analytics-stats {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
    gap: 14px !important;
}

.analytics-stat {
    border-radius: 16px !important;
    border: 1px solid var(--border-color) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    padding: 18px !important;
}

[data-theme="dark"] .analytics-stat {
    background: rgba(15, 23, 42, 0.38) !important;
}

.analytics-stat-value {
    font-size: 2.1rem !important;
    line-height: 1 !important;
    color: var(--accent-primary) !important;
}

.analytics-stat-label {
    color: var(--text-tertiary) !important;
    font-size: 0.82rem !important;
    margin-top: 8px !important;
}

/* Mode cards */
.mode-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-top: 18px !important;
}

.mode-btn {
    position: relative;
    min-height: 160px;
    padding: 28px 22px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.mode-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 42%);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.mode-btn:hover {
    border-color: var(--accent-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.16) !important;
}

.mode-btn:hover::before,
.mode-btn.active::before {
    opacity: 1;
}

.mode-btn.active {
    border: 2px solid var(--accent-primary) !important;
    background: linear-gradient(180deg, rgba(59,130,246,0.12), var(--bg-secondary)) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10), 0 18px 38px rgba(37, 99, 235, 0.16) !important;
}

.mode-btn.active::after {
    content: "✓";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

.mode-btn h3 {
    color: var(--text-primary) !important;
    font-size: 1.18rem !important;
    margin: 0 0 10px 0 !important;
}

.mode-btn p {
    color: var(--text-tertiary) !important;
    font-size: 0.93rem !important;
    line-height: 1.45 !important;
    max-width: 260px;
}

/* Test supplement becomes a compact resource card */
.test-supplement-container {
    margin-top: 22px !important;
    padding: 20px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(59, 130, 246, 0.24) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(14, 165, 233, 0.08)) !important;
}

.test-supplement-btn {
    border-radius: 12px !important;
    padding: 12px 20px !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22) !important;
}

.test-supplement-note {
    color: var(--text-tertiary) !important;
    max-width: 820px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Category selector as cards/chips while keeping checkboxes intact */
.category-selection-controls {
    margin: 4px 0 14px 0 !important;
    gap: 10px !important;
}

.category-control-btn {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-weight: 700 !important;
}

.categories-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.category-item {
    position: relative;
    min-height: 68px;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    background: var(--bg-secondary) !important;
    padding: 14px 16px !important;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
    overflow: hidden;
}

.category-item:hover:not(.locked):not(.disabled) {
    transform: translateY(-1px);
    border-color: var(--accent-primary) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12) !important;
}

.category-item.selected {
    border-color: var(--accent-primary) !important;
    background: rgba(59, 130, 246, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
}

.category-item.selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: white;
    font-weight: 800;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-checkbox {
    width: 20px !important;
    height: 20px !important;
    margin-right: 10px !important;
    accent-color: var(--accent-primary);
}

.category-label {
    color: var(--text-primary) !important;
    align-items: center !important;
    line-height: 1.35 !important;
    padding-right: 22px;
}

.category-label strong {
    color: var(--text-muted) !important;
    font-weight: 800 !important;
}

.category-count {
    color: var(--accent-primary) !important;
    font-weight: 800 !important;
}

.category-item.locked {
    opacity: 0.76 !important;
    background: var(--bg-tertiary) !important;
}

.locked-badge {
    border-radius: 999px !important;
    padding: 4px 9px !important;
    font-size: 0.72rem !important;
}

/* Settings: clearer rows and better presets */
.test-config.setup-card {
    background: var(--bg-secondary) !important;
}

.config-item {
    padding: 18px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--border-color);
}

.config-item:first-of-type {
    border-top: 0;
    padding-top: 0 !important;
}

.config-item label {
    color: var(--text-primary) !important;
    font-size: 0.96rem !important;
    margin-bottom: 10px !important;
}

.question-count-input-row {
    gap: 12px !important;
}

.question-count-input,
.preset-btn {
    border-radius: 12px !important;
}

.preset-btn {
    min-width: 72px;
    padding: 11px 16px !important;
}

.preset-btn.active {
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.toggle-help-text,
.config-help-text {
    color: var(--text-tertiary) !important;
    font-size: 0.84rem !important;
}

/* Start action panel: more prominent CTA without changing button ID */
.start-action-panel {
    position: sticky;
    bottom: 18px;
    z-index: 300;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-theme="dark"] .start-action-panel {
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
}

.start-action-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.start-action-summary strong {
    color: var(--text-primary);
    font-size: 1.02rem;
}

.start-action-summary span {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.start-button {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.30) !important;
    font-size: 1.05rem !important;
}

.start-button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.38) !important;
}

.start-button:disabled {
    background: var(--border-strong) !important;
    box-shadow: none !important;
}

/* Question screen small polish for visual consistency */
.question-header,
.question-content,
.results-screen,
.review-mode-header {
    color: var(--text-primary);
}

.option {
    border-radius: 14px !important;
    padding: 16px 18px !important;
}

.feedback {
    border-radius: 16px !important;
}

/* Light mode readability guardrails */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .container,
html:not([data-theme="dark"]) .setup-card,
html:not([data-theme="dark"]) .mode-btn,
html:not([data-theme="dark"]) .category-item,
html:not([data-theme="dark"]) .test-config {
    color: #0f172a !important;
}

html:not([data-theme="dark"]) .mode-btn p,
html:not([data-theme="dark"]) .section-subtitle,
html:not([data-theme="dark"]) .mode-selection-subtitle,
html:not([data-theme="dark"]) .config-help-text,
html:not([data-theme="dark"]) .toggle-help-text,
html:not([data-theme="dark"]) .start-action-summary span {
    color: #475569 !important;
}

/* Responsive layout */
@media (max-width: 980px) {
    .setup-screen {
        padding: 22px 18px 120px 18px !important;
    }
    .mode-buttons,
    .categories-grid {
        grid-template-columns: 1fr !important;
    }
    .analytics-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .start-action-panel {
        grid-template-columns: 1fr;
        bottom: 10px;
    }
}

@media (max-width: 560px) {
    .setup-card {
        padding: 20px !important;
        border-radius: 18px !important;
    }
    .analytics-stats {
        grid-template-columns: 1fr !important;
    }
    .mode-btn {
        min-height: 132px;
    }
    .category-selection-controls,
    .question-preset-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .category-control-btn,
    .preset-btn {
        width: 100%;
    }
}

/* =========================================================
   PHASE 4: Always-visible Start Practice CTA
   This keeps the original #startButton and JS behavior intact.
   It only changes the presentation of the existing start-action-panel.
   ========================================================= */

.setup-screen {
    padding-bottom: 150px !important;
}

.start-action-panel {
    position: fixed !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    width: min(1040px, calc(100vw - 40px)) !important;
    z-index: 5000 !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
    pointer-events: auto !important;
}

.start-action-panel::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.10));
    z-index: -1;
    pointer-events: none;
}

.start-action-summary strong::before {
    content: '🚀 ';
}

html:not([data-theme="dark"]) .start-action-panel {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(203, 213, 225, 0.95) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="dark"] .start-action-panel {
    background: rgba(15, 23, 42, 0.94) !important;
    border-color: rgba(51, 65, 85, 0.95) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.48) !important;
}

@media (max-width: 720px) {
    .setup-screen {
        padding-bottom: 190px !important;
    }

    .start-action-panel {
        width: calc(100vw - 24px) !important;
        bottom: 12px !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .start-action-summary {
        text-align: center;
    }
}

/* Phase 4.1: make category topic tiles feel fully clickable */
.category-item,
.category-item .category-label,
.category-item .category-label * {
    cursor: pointer;
}

.category-item .category-checkbox {
    pointer-events: none;
}

.category-item:not(.locked):not(.disabled):focus-within,
.category-item:not(.locked):not(.disabled):hover {
    transform: translateY(-1px);
}

/* =========================================================
   Phase 4.2 Contrast & Readability Fixes
   Improves text contrast in both dark and light mode without
   changing app logic or element IDs.
   ========================================================= */

:root {
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-muted: #a8b5c8;
}

/* Dark mode: make secondary/help text readable on dark cards */
[data-theme="dark"] .mode-selection-subtitle,
[data-theme="dark"] .mode-btn p,
[data-theme="dark"] .config-help-text,
[data-theme="dark"] .toggle-help-text,
[data-theme="dark"] .info-label,
[data-theme="dark"] .results-subtitle,
[data-theme="dark"] .category-count,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .exam-readiness-description,
[data-theme="dark"] .score-slots-label,
[data-theme="dark"] .progress-text,
[data-theme="dark"] .readiness-stat-label,
[data-theme="dark"] .test-supplement-note,
[data-theme="dark"] .sg-search-hint,
[data-theme="dark"] .sg-search-status,
[data-theme="dark"] .sg-inline-hint {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .mode-btn h3,
[data-theme="dark"] .category-label,
[data-theme="dark"] .config-title,
[data-theme="dark"] .mode-selection-title,
[data-theme="dark"] .question-text,
[data-theme="dark"] .option-text,
[data-theme="dark"] .analytics-header h3,
[data-theme="dark"] .exam-readiness-header h3,
[data-theme="dark"] .results-title,
[data-theme="dark"] .category-breakdown h3,
[data-theme="dark"] .review-section h3 {
    color: #f8fafc !important;
}

/* Improve exam-readiness panel contrast */
[data-theme="dark"] .exam-readiness-header h3 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .exam-readiness-progress {
    background: rgba(245, 158, 11, 0.18) !important;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .score-slot.empty {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #64748b !important;
}

[data-theme="dark"] .progress-bar-container {
    background: rgba(253, 230, 138, 0.35) !important;
}

/* Dark mode: selected/active cards should not dim their text */
[data-theme="dark"] .mode-btn.active h3,
[data-theme="dark"] .mode-btn.active p,
[data-theme="dark"] .category-item.selected .category-label,
[data-theme="dark"] .category-item.selected .category-count {
    color: #ffffff !important;
}

/* Light mode: replace washed-out muted text with stronger slate tones */
html:not([data-theme="dark"]) {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-input: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-tertiary: #334155;
    --text-muted: #475569;
    --border-color: #cbd5e1;
    --border-strong: #94a3b8;
}

html:not([data-theme="dark"]) .mode-selection-subtitle,
html:not([data-theme="dark"]) .mode-btn p,
html:not([data-theme="dark"]) .config-help-text,
html:not([data-theme="dark"]) .toggle-help-text,
html:not([data-theme="dark"]) .info-label,
html:not([data-theme="dark"]) .results-subtitle,
html:not([data-theme="dark"]) .category-count,
html:not([data-theme="dark"]) .stat-label,
html:not([data-theme="dark"]) .exam-readiness-description,
html:not([data-theme="dark"]) .score-slots-label,
html:not([data-theme="dark"]) .progress-text,
html:not([data-theme="dark"]) .readiness-stat-label,
html:not([data-theme="dark"]) .test-supplement-note,
html:not([data-theme="dark"]) .setup-step-helper,
html:not([data-theme="dark"]) .category-selected-summary,
html:not([data-theme="dark"]) .sg-search-hint,
html:not([data-theme="dark"]) .sg-search-status,
html:not([data-theme="dark"]) .sg-inline-hint {
    color: #475569 !important;
}

html:not([data-theme="dark"]) .mode-btn h3,
html:not([data-theme="dark"]) .category-label,
html:not([data-theme="dark"]) .config-title,
html:not([data-theme="dark"]) .mode-selection-title,
html:not([data-theme="dark"]) .question-text,
html:not([data-theme="dark"]) .option-text,
html:not([data-theme="dark"]) .analytics-header h3,
html:not([data-theme="dark"]) .results-title,
html:not([data-theme="dark"]) .category-breakdown h3,
html:not([data-theme="dark"]) .review-section h3 {
    color: #0f172a !important;
}

html:not([data-theme="dark"]) .category-count {
    color: #2563eb !important;
    font-weight: 700;
}

/* Light mode buttons: avoid gray-on-gray low contrast */
html:not([data-theme="dark"]) .clear-all-btn,
html:not([data-theme="dark"]) .preset-btn,
html:not([data-theme="dark"]) .btn-secondary {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

html:not([data-theme="dark"]) .clear-all-btn:hover,
html:not([data-theme="dark"]) .preset-btn:hover,
html:not([data-theme="dark"]) .btn-secondary:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #3b82f6 !important;
}

html:not([data-theme="dark"]) .preset-btn.active,
html:not([data-theme="dark"]) .select-all-btn,
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .start-button:not(:disabled) {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

html:not([data-theme="dark"]) .question-count-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html:not([data-theme="dark"]) .question-count-input::placeholder {
    color: #2563eb !important;
    opacity: 1;
}

html:not([data-theme="dark"]) .category-checkbox {
    accent-color: #2563eb;
}

html:not([data-theme="dark"]) .category-item.locked,
html:not([data-theme="dark"]) .category-item.locked .category-label,
html:not([data-theme="dark"]) .category-item.locked .category-count {
    color: #64748b !important;
}

html:not([data-theme="dark"]) .locked-badge {
    color: #ffffff !important;
}

/* Light mode exam-readiness panel */
html:not([data-theme="dark"]) .exam-readiness-header h3 {
    color: #92400e !important;
}

html:not([data-theme="dark"]) .exam-readiness-progress {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a;
}

html:not([data-theme="dark"]) .score-slot.empty {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #64748b !important;
}

/* Disabled start button: make clear but readable */
.start-button:disabled,
html:not([data-theme="dark"]) .start-button:disabled,
[data-theme="dark"] .start-button:disabled {
    background: #cbd5e1 !important;
    color: #475569 !important;
    border: 1px solid #94a3b8 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .start-button:disabled {
    background: rgba(51, 65, 85, 0.95) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

html:not([data-theme="dark"]) .analytics-header .clear-btn,
html:not([data-theme="dark"]) .clear-btn {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fca5a5 !important;
}

html:not([data-theme="dark"]) .analytics-header .clear-btn:hover,
html:not([data-theme="dark"]) .clear-btn:hover {
    background: #fecaca !important;
    color: #7f1d1d !important;
    border-color: #ef4444 !important;
}

/* =========================================================
   PHASE 5 - Question + Results Screen UX Polish
   Safe CSS-only upgrade; preserves all existing IDs/JS hooks.
   ========================================================= */

/* -----------------------------
   Question screen layout
------------------------------ */
.question-screen {
    background: transparent;
}

.question-screen .progress-bar {
    height: 10px;
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    margin: 18px 28px 0;
    overflow: hidden;
}

.question-screen .progress-fill {
    background: linear-gradient(90deg, var(--accent-primary), #60a5fa);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.45);
}

.question-header {
    margin: 18px 28px 0;
    padding: 18px 22px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    box-shadow: 0 18px 45px rgba(0,0,0,0.16);
}

.question-info {
    gap: 16px;
}

.question-info .info-item {
    min-width: 120px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: var(--text-muted);
}

.info-value {
    margin-top: 4px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.timer {
    padding: 11px 15px;
    border-radius: 14px;
    border: 1px solid rgba(59,130,246,.35);
    background: rgba(59,130,246,.12);
    color: #93c5fd;
    font-size: 1.1rem;
}

.question-content {
    padding: 24px 28px 32px;
}

.question-with-figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 38%);
    gap: 22px;
    align-items: start;
}

.question-main {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.question-category {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(59,130,246,.14);
    color: var(--accent-primary);
    border: 1px solid rgba(59,130,246,.35);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.question-text {
    margin-bottom: 22px;
    color: var(--text-primary);
    font-size: clamp(1.15rem, 1.35vw, 1.45rem);
    line-height: 1.58;
    font-weight: 750;
}

.options-container {
    gap: 14px;
    margin: 22px 0;
}

.option {
    min-height: 64px;
    padding: 17px 18px;
    border-radius: 16px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-tertiary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.option:hover:not(.disabled) {
    transform: translateY(-1px);
    border-color: rgba(59,130,246,.75);
    box-shadow: 0 12px 28px rgba(59,130,246,.14);
}

.option-letter {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 850;
}

.option-letter::after {
    display: none !important;
}

.option-text {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 600;
}

.option.selected {
    background: rgba(59,130,246,.16);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.option.selected .option-letter {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

.option.correct {
    background: rgba(34,197,94,.15);
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}

.option.correct .option-letter {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.option.correct .option-letter::before {
    content: '✓';
}

.option.incorrect {
    background: rgba(239,68,68,.13);
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(239,68,68,.14);
}

.option.incorrect .option-letter {
    background: var(--error);
    border-color: var(--error);
    color: #fff;
}

.option.incorrect .option-letter::before {
    content: '×';
}

.feedback {
    margin-top: 20px;
    padding: 20px 22px;
    border-radius: 18px;
    border-width: 1.5px;
}

.feedback.correct {
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.55);
}

.feedback.incorrect {
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.55);
}

.feedback-title {
    font-size: 1.05rem;
    font-weight: 850;
}

.feedback-text {
    color: var(--text-primary);
    font-size: .98rem;
}

.feedback-reference {
    color: var(--text-secondary);
}

.question-actions,
.question-content > div[style*="justify-content: space-between"] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 14px;
    margin-top: 18px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

.question-content > div[style*="justify-content: space-between"] {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
}

.question-content > div[style*="justify-content: space-between"] > div {
    flex-wrap: wrap;
}

#nextBtn:not(.hidden) {
    display: inline-flex;
    width: auto;
    min-width: 190px;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
    color: #fff;
    box-shadow: 0 12px 28px rgba(37,99,235,.28);
}

.calculator-btn,
.bookmark-btn,
#viewBookmarksBtn,
#prevQuestionBtn,
#nextQuestionBtn,
#exitToMenuBtn {
    border-radius: 13px !important;
    min-height: 44px;
}

.inline-figure-panel {
    position: sticky;
    top: 18px;
    background: var(--bg-secondary);
    border-color: var(--border-color);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.inline-figure-header {
    border-bottom-color: var(--border-color);
}

.inline-figure-title {
    color: var(--text-primary);
}

.inline-figure-container {
    border-radius: 16px;
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.inline-figure-btn {
    border-radius: 11px;
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.inline-figure-btn.expand-btn {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* -----------------------------
   Results screen
------------------------------ */
.results-screen {
    padding: 32px;
}

.results-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 26px;
    text-align: left;
    margin-bottom: 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 22px 55px rgba(0,0,0,.18);
}

.score-circle {
    width: 178px;
    height: 178px;
    margin: 0;
    box-shadow: 0 20px 45px rgba(0,0,0,.22);
}

.score-circle.pass {
    background: radial-gradient(circle at 35% 25%, #86efac, #22c55e 40%, #15803d 100%);
}

.score-circle.fail {
    background: radial-gradient(circle at 35% 25%, #fca5a5, #ef4444 42%, #991b1b 100%);
}

.results-title {
    color: var(--text-primary);
    font-size: clamp(1.7rem, 2.2vw, 2.45rem);
    margin-bottom: 8px;
}

.results-subtitle {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.results-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.results-stats .stat-card {
    border-radius: 18px;
    padding: 22px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 35px rgba(0,0,0,.14);
}

.results-stats .stat-value {
    font-size: 2.1rem;
    color: var(--accent-primary);
}

.results-stats .stat-label {
    color: var(--text-secondary);
    font-weight: 750;
}

.category-breakdown,
.review-section,
.results-actions,
.progress-comparison {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.category-breakdown h3,
.review-section h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 18px;
}

.category-result {
    border-radius: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 14px 16px;
}

.category-name {
    color: var(--text-primary);
}

.category-score {
    color: var(--accent-primary);
}

.review-buttons,
.results-actions {
    gap: 12px;
}

.results-actions {
    display: flex;
    margin-top: 18px;
}

.results-actions .btn,
.review-buttons .btn {
    border-radius: 14px;
    min-height: 46px;
}

.review-mode-header {
    margin: 0 28px 18px;
    border-radius: 0 0 18px 18px;
}

.review-list .review-item {
    border-radius: 18px;
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 14px 35px rgba(0,0,0,.12);
}

.review-question-text {
    color: var(--text-primary);
    font-size: 1.08rem;
}

.review-explanation {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 14px;
}

/* -----------------------------
   Light theme refinements
------------------------------ */
html:not([data-theme="dark"]) .question-header,
html:not([data-theme="dark"]) .question-main,
html:not([data-theme="dark"]) .inline-figure-panel,
html:not([data-theme="dark"]) .question-actions,
html:not([data-theme="dark"]) .question-content > div[style*="justify-content: space-between"],
html:not([data-theme="dark"]) .results-header,
html:not([data-theme="dark"]) .results-stats .stat-card,
html:not([data-theme="dark"]) .category-breakdown,
html:not([data-theme="dark"]) .review-section,
html:not([data-theme="dark"]) .results-actions,
html:not([data-theme="dark"]) .progress-comparison {
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

html:not([data-theme="dark"]) .option {
    background: #fff;
    border-color: #d5deea;
}

html:not([data-theme="dark"]) .option:hover:not(.disabled) {
    background: #f8fbff;
}

html:not([data-theme="dark"]) .question-info .info-item,
html:not([data-theme="dark"]) .category-result,
html:not([data-theme="dark"]) .review-explanation,
html:not([data-theme="dark"]) .inline-figure-container,
html:not([data-theme="dark"]) .inline-figure-btn {
    background: #f8fafc;
}

html:not([data-theme="dark"]) .question-category {
    background: #eff6ff;
}

html:not([data-theme="dark"]) .timer {
    background: #eff6ff;
    color: #1d4ed8;
}

/* -----------------------------
   Responsive polishing
------------------------------ */
@media (max-width: 980px) {
    .question-with-figure {
        display: flex;
        flex-direction: column;
    }

    .inline-figure-panel {
        position: static;
        max-width: 100%;
        width: 100%;
    }

    .results-header {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

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

@media (max-width: 680px) {
    .question-screen .progress-bar,
    .question-header,
    .review-mode-header {
        margin-left: 14px;
        margin-right: 14px;
    }

    .question-content,
    .results-screen {
        padding: 16px 14px 24px;
    }

    .question-header {
        flex-direction: column;
        align-items: stretch;
    }

    .question-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .question-main {
        padding: 20px;
        border-radius: 18px;
    }

    .option {
        align-items: flex-start;
    }

    .results-stats {
        grid-template-columns: 1fr;
    }

    .results-actions,
    .review-buttons {
        flex-direction: column;
    }
}

/* Phase 5.1: figures open in a separate browser window, so center the question card and remove the empty right rail. */
.question-with-figure {
    grid-template-columns: minmax(0, min(980px, 100%)) !important;
    justify-content: center !important;
}

.question-main {
    width: 100% !important;
}

.inline-figure-panel,
.inline-figure-panel.show {
    display: none !important;
}


/* User Guide Table of Contents */
.user-guide-toc {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    margin: 22px 0 26px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.user-guide-toc-header {
    margin-bottom: 14px;
}

.user-guide-toc .user-guide-toc-header h3 {
    margin: 0 0 4px 0;
    color: var(--text-primary);
    font-size: 1.08rem;
}

.user-guide-toc-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.user-guide-toc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.user-guide-toc-grid a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    color: var(--accent-primary) !important;
    text-decoration: none !important;
    font-weight: 650;
    line-height: 1.25;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.user-guide-toc-grid a:hover {
    transform: translateY(-1px);
    border-color: var(--accent-primary) !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
    background: #eff6ff;
    text-decoration: none !important;
}

.user-guide-jump-select {
    display: none;
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.help-content h2[id] {
    scroll-margin-top: 24px;
}

html[data-theme="dark"] .user-guide-toc {
    background: #0f172a;
    border-color: #334155;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .user-guide-toc-grid a {
    background: #1e293b;
    border-color: #334155 !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] .user-guide-toc-grid a:hover {
    background: #1e3a5f;
    border-color: #60a5fa !important;
    box-shadow: 0 6px 14px rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .user-guide-jump-select {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

@media (max-width: 768px) {
    .user-guide-toc {
        padding: 16px;
        margin: 18px 0 22px;
    }

    .user-guide-jump-select {
        display: block;
    }

    .user-guide-toc-grid {
        display: none;
    }
}


/* Guided Setup Flow */
.setup-step {
    position: relative;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.setup-step-active {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.10);
}

.setup-step-complete {
    border-color: rgba(16, 185, 129, 0.35);
}

.setup-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f59e0b;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.setup-step-complete .setup-step-badge {
    background: #10b981;
}

.setup-section-heading {
    margin-bottom: 14px;
}

.setup-step-helper {
    margin: 6px 0 0 38px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.category-selection .setup-step-title,
.category-selection .category-selection-heading,
.category-selection .sg-inline-heading {
    color: #f8fafc !important;
}

.category-selection .setup-step-helper,
.category-selection .category-selected-summary,
.category-selection .sg-inline-hint,
.category-selection .sg-search-status {
    color: #cbd5e1 !important;
}

.category-selection .sg-inline-search-container + .category-selection-controls,
.category-selection .sg-inline-search-container ~ .category-selected-summary {
    color: #cbd5e1 !important;
}

.category-selection-controls {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.category-selection-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.category-selected-summary {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.92rem;
}

.category-item {
    min-height: 54px;
}

.category-item.selected {
    border-left: 4px solid var(--accent-primary);
    background: #eff6ff;
}

.start-cta-panel {
    position: sticky;
    bottom: 16px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
    margin-top: 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.start-cta-copy h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
}

.start-cta-copy p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
}

.start-cta-panel .start-button {
    width: auto;
    min-width: 240px;
    color: white !important;
}

html[data-theme="dark"] .setup-step-active {
    border-color: rgba(251, 191, 36, 0.46);
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.12);
}

html[data-theme="dark"] .start-cta-panel {
    background: rgba(15, 23, 42, 0.96);
    border-color: #334155;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .start-cta-copy h3,
html[data-theme="dark"] .start-cta-copy p {
    color: #f1f5f9;
}

html[data-theme="dark"] .start-cta-panel .start-button:not(:disabled) {
    background: linear-gradient(135deg, #3b82f6 0%, #7c3aed 100%);
    color: #ffffff !important;
}

html[data-theme="dark"] .start-cta-panel .start-button:disabled {
    background: #475569;
    color: #e2e8f0 !important;
    opacity: 1;
}

/* Results Coaching */
.results-coaching-panel {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    margin-bottom: 30px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.results-coaching-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    font-size: 1.7rem;
    flex-shrink: 0;
}

.results-coaching-copy {
    flex: 1;
}

.results-coaching-copy h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
}

.results-coaching-copy p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.results-coaching-btn {
    flex: 0 0 auto;
}

.category-result-modern {
    display: block;
}

.category-result-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.category-result-bar {
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border-color);
}

.category-result-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent-primary), var(--success));
}

html[data-theme="dark"] .results-coaching-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .category-result {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .results-coaching-icon {
    background: #1e3a5f;
}

@media (max-width: 768px) {
    .setup-step-helper {
        margin-left: 0;
    }

    .start-cta-panel {
        bottom: max(10px, env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 12px;
    }

    .start-cta-panel .start-button {
        width: 100%;
        min-width: 0;
    }

    .results-coaching-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .results-coaching-btn {
        width: 100%;
    }

    .category-result-top {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Analytics clarification text */
.analytics-header-with-subtitle {
    align-items: flex-start;
    gap: 16px;
}

.analytics-subtitle {
    margin: 4px 0 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 500;
}

html[data-theme="dark"] .analytics-subtitle {
    color: #cbd5e1;
}

@media (max-width: 768px) {
    .analytics-header-with-subtitle {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Local storage notice blocks */
.local-storage-note {
    margin-top: 12px;
    padding: 12px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--accent-primary);
    border-radius: 8px;
    color: #1e3a8a;
    font-size: 0.92rem;
    line-height: 1.5;
}

.local-storage-note strong {
    color: #1d4ed8;
}

.local-storage-note-compact {
    margin-top: 8px;
    font-size: 0.86rem;
}

.exam-local-storage-note {
    margin-top: 12px;
}

.guide-local-storage-note {
    margin: 12px 0 16px 0;
}

html[data-theme="dark"] .local-storage-note {
    background: #172554;
    border-color: #1d4ed8;
    border-left-color: #60a5fa;
    color: #bfdbfe;
}

html[data-theme="dark"] .local-storage-note strong {
    color: #dbeafe;
}

/* Important Notice (Enhanced) */
.important-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(217,119,6,0.12));
    border: 1px solid rgba(245,158,11,0.65);
    border-left: 6px solid #f59e0b;
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 18px;
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.15), 0 8px 22px rgba(0,0,0,0.22);
}

.important-notice-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(245,158,11,0.22);
    color: #fbbf24;
    font-size: 20px;
}

.important-notice-title {
    display: block;
    margin-bottom: 4px;
    color: #fbbf24;
    font-size: 17px;
    font-weight: 800;
}

.important-notice-text {
    font-size: 15px;
    line-height: 1.55;
    color: #f8fafc;
}

html[data-theme="light"] .important-notice {
    background: #fff7ed;
    border-color: #fb923c;
}

html[data-theme="light"] .important-notice-title {
    color: #c2410c;
}

html[data-theme="light"] .important-notice-text {
    color: #7c2d12;
}

/* Dark mode enhancement */
html[data-theme="dark"] .important-notice {
    background: linear-gradient(135deg, rgba(245,158,11,0.24), rgba(120,53,15,0.22));
    border-color: rgba(251,191,36,0.75);
    border-left-color: #fbbf24;
}

@media (max-width: 768px) {
    .local-storage-note {
        font-size: 0.88rem;
        padding: 11px 12px;
    }
}

/* AKTR Retake Prep */
.aktr-entry-panel {
    background: var(--bg-tertiary, #f8fafc);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.aktr-input-row {
    display: flex;
    gap: 12px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.aktr-code-input {
    flex: 1;
    min-width: 220px;
    padding: 12px 14px;
    border: 2px solid var(--border-strong, #cbd5e1);
    border-radius: 8px;
    background: var(--bg-input, #fff);
    color: var(--text-primary, #111827);
    font-size: 1rem;
    font-weight: 600;
}

.aktr-bulk-input {
    width: 100%;
    min-height: 90px;
    padding: 12px 14px;
    border: 2px solid var(--border-strong, #cbd5e1);
    border-radius: 8px;
    background: var(--bg-input, #fff);
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
    resize: vertical;
    margin-bottom: 12px;
}

.aktr-code-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.aktr-code-chip {
    border: 1px solid var(--accent-primary, #2563eb);
    background: var(--bg-secondary, #fff);
    color: var(--accent-primary, #2563eb);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 700;
    cursor: pointer;
}

.aktr-code-chip span {
    margin-left: 6px;
}

.aktr-validation-summary {
    margin-top: 15px;
}

.aktr-summary-card {
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-primary, #111827);
    line-height: 1.6;
}

.aktr-warning {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--warning-bg, #fff7ed);
    border-left: 4px solid var(--warning, #f59e0b);
    color: var(--text-primary, #111827);
}

.aktr-code-details {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.aktr-code-detail {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-primary, #111827);
    font-size: 0.95rem;
    line-height: 1.4;
}

.aktr-code-detail strong {
    color: var(--accent-primary, #2563eb);
}

.mode-btn.demo-locked-mode {
    cursor: pointer;
    opacity: 0.82;
}

.mode-btn.demo-locked-mode::after {
    content: none !important;
}

.mode-btn.demo-locked-mode:hover {
    border-color: var(--warning, #f59e0b) !important;
    box-shadow: 0 16px 36px rgba(245, 158, 11, 0.16) !important;
}

.demo-lock-badge {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--warning-bg, #fffbeb);
    color: var(--warning, #d97706);
    border: 1px solid rgba(245, 158, 11, 0.42);
    font-size: 0.78rem;
    font-weight: 800;
}

.demo-mode-explainer {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--warning-bg, #fffbeb);
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-left: 4px solid var(--warning, #f59e0b);
    color: var(--text-primary, #111827);
    line-height: 1.55;
    font-size: 0.95rem;
}

.demo-mode-explainer strong {
    color: var(--warning, #d97706);
}

.sg-search-box,
.sg-inline-search-box,
html:not([data-theme="dark"]) .sg-search-box,
html:not([data-theme="dark"]) .sg-inline-search-box {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14), 0 16px 34px rgba(217, 119, 6, 0.16) !important;
}

.sg-search-box:focus-within,
.sg-inline-search-box:focus-within,
html:not([data-theme="dark"]) .sg-search-box:focus-within,
html:not([data-theme="dark"]) .sg-inline-search-box:focus-within {
    border-color: #d97706 !important;
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.24), 0 18px 38px rgba(217, 119, 6, 0.2) !important;
}

@media (min-width: 900px) {
    .mode-buttons .mode-btn[data-mode="aktr"] {
        grid-column: 2;
    }
}

/* Light theme still uses a dark category/study-guide panel, so panel chrome text must stay light. */
html:not([data-theme="dark"]) .category-selection > .setup-section-heading h3,
html:not([data-theme="dark"]) .category-selection > .setup-section-heading .setup-step-title,
html:not([data-theme="dark"]) .category-selection > .setup-section-heading .category-selection-heading,
html:not([data-theme="dark"]) .category-selection .sg-inline-heading {
    color: #f8fafc !important;
}

html:not([data-theme="dark"]) .category-selection > .setup-section-heading .setup-step-helper,
html:not([data-theme="dark"]) .category-selection .category-selected-summary,
html:not([data-theme="dark"]) .category-selection .sg-inline-hint,
html:not([data-theme="dark"]) .category-selection .sg-search-status,
html:not([data-theme="dark"]) .category-selection .sg-inline-footer,
html:not([data-theme="dark"]) .category-selection .sg-inline-footer * {
    color: #dbeafe !important;
}