:root {
    /* High Contrast Palette (Light Mode Default) */
    --primary: #047857; /* Emerald 700 */
    --primary-dark: #022c22; /* Emerald 950 */
    --primary-light: #ECFDF5; /* Emerald 50 */
    --accent: #B45309; /* Amber 700 - Darkened for better text contrast */
    --bg-gradient: linear-gradient(135deg, #F0FDF4 0%, #F0F9FF 100%);
    --card-bg: #FFFFFF;
    --text-main: #020617; /* Slate 950 */
    --text-sec: #334155; /* Slate 700 */
    
    /* Reverted Global Border: Slate 300 */
    --border-color: #CBD5E1; 
    
    /* Specific Higher Contrast Border for Quiz Widget: Slate 400 */
    --widget-border: #94A3B8;

    --stats-bg: #F0FDF4; /* Mint Tint */
    --stats-border: #D1FAE5; /* Mint Border */
    --header-bg: rgba(255, 255, 255, 0.95);
    
    /* Updated Feedback Colors */
    --correct-bg: #dcfce7; 
    --correct-border: #15803d; 
    --correct-text: #14532d; 
    
    --wrong-bg: #ffe4e6; 
    --wrong-border: #be123c; 
    --wrong-text: #881337; 
    
    /* Stats Specific High Contrast Colors */
    --stat-label: #334155; /* Slate 700 */
    --stat-val-green: #15803d; /* Green 700 */
    --stat-val-red: #be123c; /* Rose 700 */
    --stat-val-accent: #B45309; /* Amber 700 */

    /* Effects */
    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --card-radius: 16px;
    --transition: all 0.2s ease-in-out;
}

/* Dark Mode Palette */
[data-theme="dark"] {
    --primary: #34D399; /* Emerald 400 - Lighter for dark bg */
    --primary-dark: #A7F3D0; /* Emerald 200 - Very light for headings */
    --primary-light: #064E3B; /* Emerald 900 - Dark bg for chips/badges */
    --accent: #FBBF24; /* Amber 400 */
    --bg-gradient: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); /* Slate 900 to 800 */
    --card-bg: #1E293B; /* Slate 800 */
    --text-main: #F8FAFC; /* Slate 50 */
    --text-sec: #94A3B8; /* Slate 400 */
    
    /* Reverted Global Border for Dark Mode: Slate 700 */
    --border-color: #334155; 
    
    /* Specific Higher Contrast Border for Widget Dark Mode: Slate 600 */
    --widget-border: #475569;

    --stats-bg: #111827; /* Gray 900 */
    --stats-border: #374151; /* Gray 700 */
    --header-bg: rgba(15, 23, 42, 0.95); /* Slate 900 */
    
    --correct-bg: #064E3B;
    --correct-border: #059669;
    --correct-text: #ECFDF5;
    
    --wrong-bg: #881337;
    --wrong-border: #E11D48;
    --wrong-text: #FFF1F2;
    
    /* Stats Specific Dark Mode Colors */
    --stat-label: #94A3B8; /* Slate 400 */
    --stat-val-green: #34D399; /* Emerald 400 */
    --stat-val-red: #FB7185; /* Rose 400 */
    --stat-val-accent: #FBBF24; /* Amber 400 */
    
    --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* --- Mobile First Base Styles --- */
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

/* --- Header --- */
header {
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.08); /* Darker border */
    padding: 0; 
    position: static; 
    z-index: 100;
    height: 60px; 
    box-sizing: border-box; 
    display: flex;
    align-items: center;
    margin-bottom: 30px; /* Reduced from 95px to 30px */
    transition: background 0.3s ease;
}

[data-theme="dark"] header { border-bottom: 1px solid rgba(255,255,255,0.05); }

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* Slightly reduced gap for better fit */
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0; /* Allows shrinking */
}

.brand-name { 
    margin: 0; 
    font-size: 1rem; 
    font-weight: 800; 
    color: var(--primary-dark);
    letter-spacing: -0.02em;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    white-space: nowrap;
}

.brand-sub {
    font-size: 0.7rem;
    font-weight: 600; 
    color: var(--text-sec);
    opacity: 1; 
}

/* Hide brand subtitle on small screens to fit buttons */
@media (max-width: 420px) {
    .brand-sub { display: none; }
}

.brand-icon { font-size: 1.2rem; color: var(--primary); }

.theme-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.theme-btn:hover { background: var(--border-color); color: var(--text-main); }

.reset-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    padding: 8px 12px; 
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700; 
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.reset-btn:hover { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }
[data-theme="dark"] .reset-btn:hover { background: #7F1D1D; color: #FECACA; border-color: #991B1B; }

/* --- Progress Bar --- */
.progress-container {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0%;
    transition: width 0.3s ease;
}

/* --- Breadcrumbs --- */
.breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-sec);
}

.breadcrumb-list li a {
    text-decoration: none;
    color: var(--text-sec);
    transition: color 0.2s;
    font-weight: 500;
}

.breadcrumb-list li a:hover {
    color: var(--primary);
}

.breadcrumb-list li::after {
    content: "›";
    margin-left: 8px;
    color: #94A3B8; 
}

.breadcrumb-list li:last-child::after {
    content: "";
}

.breadcrumb-list li:last-child {
    font-weight: 700;
    color: var(--primary-dark);
}

/* --- Main Layout (Mobile First: Stacked) --- */
main {
    flex: 1;
    width: 100%;
}

.main-layout {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    width: 100%;
    box-sizing: border-box;
    align-items: start; 
}

/* --- Hero Section --- */
.hero-section {
    padding-top: 0;
    text-align: center; 
}

.hero-badge {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--primary-light);
}
[data-theme="dark"] .hero-badge { 
    color: var(--text-main); 
    border-color: var(--primary); 
}

.hero-title {
    font-size: 38px; 
    font-weight: 900; 
    line-height: 1.1;
    margin: 0 0 20px 0;
    /* Darker gradient for text */
    background: linear-gradient(135deg, var(--primary) 0%, #065F46 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .hero-title {
    background: linear-gradient(135deg, var(--primary) 0%, #34D399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 14px; /* Updated to 14px */
    line-height: 1.6;
    color: var(--text-sec);
    margin: 0 auto 30px;
    max-width: 100%;
    font-weight: 500; 
}

/* NEW: Hero Quick Start Button */
.hero-cta-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(180, 83, 9, 0.4);
    margin-bottom: 25px;
}

.hero-cta-btn:hover {
    background: #92400E; /* Darker Amber */
    transform: translateY(-2px);
    box-shadow: 0 6px 8px -1px rgba(180, 83, 9, 0.5);
}

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

/* --- Compact Subject Tags --- */
.subjects-container {
    margin-bottom: 25px;
    text-align: left;
}

.subjects-title {
    font-size: 0.75rem;
    color: var(--text-main); 
    text-transform: uppercase;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
    font-weight: 800;
    text-align: center; 
    opacity: 1;
}

.subject-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; 
    justify-content: center; 
}

.subject-tag {
    background: var(--card-bg); 
    border: 1px solid var(--border-color); 
    padding: 5px 10px; 
    border-radius: 8px; 
    font-size: 0.75rem; 
    font-weight: 600;
    color: var(--text-sec);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.subject-tag i {
    color: var(--primary);
    font-size: 0.8rem;
}

.subject-tag:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
[data-theme="dark"] .subject-tag:hover { background: var(--primary-light); color: var(--text-main); }

/* --- Compact Features List (Flexbox) --- */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; 
    justify-content: center; 
}

.feature-item {
    background: var(--card-bg);
    padding: 8px 12px; 
    border-radius: 8px;
    display: inline-flex; 
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    white-space: nowrap; 
}

/* Fix CLS: Reserve fixed space for icons immediately */
.feature-item i, .subject-tag i { 
    color: var(--primary); 
    width: 1.25em; 
    text-align: center;
    display: inline-block;
}

/* --- Quiz Widget --- */
.quiz-widget-wrapper {
    position: relative;
    top: 0;
}

.quiz-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--glass-shadow);
    padding: 15px;
    /* Updated to use specific higher contrast border variable */
    border: 1px solid var(--widget-border); 
    display: flex;
    flex-direction: column;
    /* Strict dimensions for compactness on mobile */
    height: auto;
    min-height: 350px;
    max-height: 70vh; 
    animation: slideIn 0.3s ease-out;
    transition: background 0.3s ease, border-color 0.3s ease;
}

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

/* Widget Header */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.search-container {
    flex-grow: 1;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 8px 35px 8px 30px; 
    border-radius: 8px;
    border: 1px solid var(--border-color); 
    background: #F8FAFC;
    font-size: 16px; 
    box-sizing: border-box;
    outline: none;
    color: var(--text-main);
    transition: var(--transition);
}
[data-theme="dark"] .search-input { background: #0F172A; }
.search-input:focus { border-color: var(--primary); background: var(--card-bg); }
.search-input::placeholder { color: var(--text-sec); }

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--text-sec);
    pointer-events: none; 
}

/* Search Clear Button */
.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-sec);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: none; 
    transition: var(--transition);
    font-size: 0.8rem;
}
.search-clear:hover { 
    color: var(--wrong-border); 
    background: #FEE2E2;
}
[data-theme="dark"] .search-clear:hover { background: #7F1D1D; }
.search-container.active .search-clear { display: block; }

/* Highlight Search Terms */
mark.highlight {
    background-color: #FEF3C7; 
    color: #92400E; 
    padding: 0 2px;
    border-radius: 3px;
    font-weight: inherit;
    border-bottom: 2px solid #FCD34D;
}
[data-theme="dark"] mark.highlight { background: #78350F; color: #FEF3C7; border-color: #F59E0B; }

/* Empty State & Summary Card */
.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-sec);
}
.empty-state i {
    font-size: 2.5rem;
    color: var(--border-color);
    margin-bottom: 10px;
    display: block;
}
.empty-state p { margin: 0; font-size: 0.9rem; font-weight: 500; }
.empty-state button {
    margin-top: 15px;
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Summary specific styles */
.summary-score {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary);
    margin: 15px 0;
}
.summary-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    font-size: 0.9rem;
}

/* Text Size Controls */
.text-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}
.text-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    width: 28px; 
    height: 28px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.text-btn:hover { background: var(--border-color); color: var(--text-main); }

/* Bookmark Filter Button */
.bookmark-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    width: 28px; 
    height: 28px;
    border-radius: 6px;
    font-size: 0.9rem; /* Slightly larger icon */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.bookmark-btn:hover { 
    background: var(--border-color); 
    color: var(--accent); /* Amber for bookmark interaction */
}

.bookmark-btn.active {
    background: #FEF3C7; /* Light Amber */
    border-color: #F59E0B; /* Amber 500 */
    color: #B45309; /* Amber 700 */
}
[data-theme="dark"] .bookmark-btn.active {
    background: #78350F;
    border-color: #F59E0B;
    color: #FCD34D;
}

/* Mistake Filter Button */
.mistake-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.mistake-btn:hover {
    background: var(--border-color);
    color: var(--wrong-text);
}

.mistake-btn.active {
    background: #FFE4E6; /* Rose 100 */
    border-color: #E11D48; /* Rose 600 */
    color: #BE123C; /* Rose 700 */
}
[data-theme="dark"] .mistake-btn.active {
    background: #881337;
    border-color: #F43F5E;
    color: #FECDD3;
}

/* Shuffle Button */
.shuffle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.shuffle-btn:hover {
    background: var(--border-color);
    color: #7C3AED; /* Violet 600 */
}

.shuffle-btn.active {
    background: #EDE9FE; /* Violet 100 */
    border-color: #8B5CF6; /* Violet 500 */
    color: #6D28D9; /* Violet 700 */
}
[data-theme="dark"] .shuffle-btn.active {
    background: #4C1D95; /* Violet 900 */
    border-color: #7C3AED; /* Violet 600 */
    color: #DDD6FE; /* Violet 200 */
}

/* Quick Mode Button */
.quick-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.quick-btn:hover {
    background: var(--border-color);
    color: #0284c7; /* Sky 600 */
}

.quick-btn.active {
    background: #E0F2FE; /* Sky 100 */
    border-color: #0EA5E9; /* Sky 500 */
    color: #0369A1; /* Sky 700 */
}
[data-theme="dark"] .quick-btn.active {
    background: #0C4A6E; /* Sky 900 */
    border-color: #0284c7; /* Sky 600 */
    color: #BAE6FD; /* Sky 200 */
}

/* Stats Dashboard - Modern Compact Strip */
.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 0; 
    margin-bottom: 12px;
    background: var(--stats-bg); 
    padding: 0; 
    border-radius: 8px;
    border: 1px solid var(--stats-border); 
    overflow: hidden; 
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 2px; /* Increased vertical padding */
    border-right: 1px solid var(--stats-border); 
    position: relative;
}

.stat-item:last-child {
    border-right: none;
}

.stat-label {
    font-size: 0.7rem; /* Increased size */
    color: var(--stat-label); 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 700;
}

.stat-value {
    font-size: 1rem; /* Increased size */
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}

.stat-value.green { color: var(--stat-val-green); }
.stat-value.red { color: var(--stat-val-red); }
.stat-value.accent { color: var(--stat-val-accent); }

/* Scrollable Content */
.quiz-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.quiz-content::-webkit-scrollbar { width: 4px; }
.quiz-content::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; }

/* Question Styles - Compact Font Sizes */
.q-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: var(--text-sec);
    font-weight: 700;
    text-transform: uppercase;
    position: relative; /* For bookmark positioning relative context if needed */
}

/* Individual Bookmark/Share Icon on Question Card */
.q-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.bookmark-icon, .share-icon {
    font-size: 1.1rem;
    color: var(--border-color); /* Default inactive color */
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 5px; /* Increase tap area */
}

.bookmark-icon:hover, .share-icon:hover {
    transform: scale(1.1);
    color: var(--accent);
}

.bookmark-icon.active {
    color: var(--accent);
    /* No animation on active state itself, just color change */
}

/* Share specific hover color */
.share-icon:hover { color: #0284c7; /* Sky 600 */ }


.q-text-en { 
    font-weight: 700; 
    margin-bottom: 6px; 
    line-height: 1.35; 
    color: var(--text-main); 
    font-size: 1.05rem; 
}

.q-text-hi { 
    font-family: 'Noto Sans Devanagari', sans-serif;
    color: var(--text-sec); 
    margin-bottom: 15px; 
    padding-bottom: 10px; 
    border-bottom: 1px dashed var(--border-color);
    line-height: 1.4;
    font-size: 0.95rem; 
}

/* Options Compact */
.options-list { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    counter-reset: quiz-opt-counter; 
}

.option-btn {
    padding: 10px 12px;
    border: 1px solid var(--border-color); 
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600; 
    text-align: left;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    gap: 12px; 
    color: var(--text-main);
}

.option-btn::before {
    counter-increment: quiz-opt-counter;
    content: counter(quiz-opt-counter, upper-alpha) ".";
    font-weight: 800;
    color: var(--primary);
    min-width: 18px; 
}

.option-btn:hover:not(.disabled) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--text-main);
    transform: translateX(2px);
}
[data-theme="dark"] .option-btn:hover:not(.disabled) { background: var(--primary-light); color: var(--text-main); }

/* Scannability States */
.option-btn.correct { 
    background: var(--correct-bg); 
    border-color: var(--correct-border); 
    color: var(--correct-text); 
    font-weight: 700;
}
.option-btn.wrong { 
    background: var(--wrong-bg); 
    border-color: var(--wrong-border); 
    color: var(--wrong-text); 
}

/* Dim unselected options */
.options-list.answered .option-btn:not(.correct):not(.wrong) {
    opacity: 0.5; 
    border-color: transparent;
    background: var(--bg-gradient); 
    color: var(--text-sec);
}
[data-theme="dark"] .options-list.answered .option-btn:not(.correct):not(.wrong) { background: #0F172A; }

.disabled { cursor: default; pointer-events: none; }
.status-icon { 
    font-weight: bold; 
    font-size: 1.1em;
    margin-left: auto; 
}

.feedback-msg {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    display: none;
}

/* Widget Footer Controls */
.widget-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

/* Jump Trigger - Compact Horizontal Side-by-Side */
.jump-trigger {
    display: flex;
    flex-direction: row; /* Horizontal Layout */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: rgba(0,0,0,0.02);
    transition: var(--transition);
    user-select: none;
    min-width: auto;
    gap: 12px; /* Space between number and label */
}

[data-theme="dark"] .jump-trigger { background: rgba(255,255,255,0.02); }

.jump-trigger:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    border-style: solid;
    transform: translateY(-1px);
}

.jump-trigger:active { transform: translateY(0) scale(0.98); }

.progress-text { 
    font-size: 0.9rem; 
    font-weight: 800; 
    color: var(--text-main); 
    line-height: 1;
}

.jump-label {
    font-size: 0.7rem;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0; /* No vertical margin needed for row layout */
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 12px; /* Inner padding for separator */
    border-left: 1px solid var(--border-color); /* Vertical separator line */
}

.jump-trigger:hover .jump-label i {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.6; }
}

.nav-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 16px; 
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 80px;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(4, 120, 87, 0.2);
}
.nav-btn:hover { background: var(--primary-dark); transform: translateY(-1px); color: white; }
.nav-btn:disabled { background: var(--border-color); color: var(--text-sec); cursor: not-allowed; box-shadow: none; transform: none; }

/* --- Site Footer --- */
.site-footer {
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    padding: 1rem 0; /* Reduced padding for compactness */
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--text-sec);
    /* Remove text-align: center if using flexbox for layout */
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-share-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.footer-share-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* Mobile check */
@media (max-width: 420px) {
    .footer-inner {
        flex-direction: column;
        gap: 10px;
    }
}

/* --- Modern Separator --- */
.section-separator {
    max-width: 1000px;
    margin: 10px auto 50px;
    height: 1px;
    border: none;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent); 
    width: 90%;
}

/* --- SEO Content Section --- */
.seo-content-wrapper {
    max-width: 1200px;
    margin: 0 auto 60px; 
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.seo-header {
    margin-bottom: 25px;
    text-align: center;
}

.seo-header h2 {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-weight: 800;
}

.seo-header p {
    color: var(--text-sec);
    font-size: 0.95rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    font-weight: 500;
}

.seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.seo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color); 
    border-radius: 12px;
    padding: 20px;
    transition: var(--transition);
}

.seo-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.seo-card h3 {
    font-size: 1rem;
    color: var(--text-main);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.seo-card h3 i {
    color: var(--primary);
    font-size: 1.1rem;
}

.seo-card p {
    font-size: 0.85rem;
    color: var(--text-sec);
    line-height: 1.5;
    margin-bottom: 12px;
    font-weight: 500;
}

.seo-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--text-sec);
    font-weight: 500;
}

.seo-list li {
    margin-bottom: 4px;
}

/* --- Desktop Enhancements (min-width: 900px) --- */
@media (min-width: 900px) {
    .main-layout {
        grid-template-columns: 1fr 1fr; 
        gap: 40px;
        padding: 30px 20px;
    }

    .hero-section {
        padding-top: 10px;
        text-align: left; 
    }

    .hero-title { font-size: 38px; } 
    .hero-desc { margin-left: 0; max-width: 95%; }
    
    .subjects-title { text-align: left; }
    .subject-tags { justify-content: flex-start; }

    /* Features Grid Desktop Alignment */
    .features-grid { 
        gap: 10px; 
        justify-content: flex-start; 
    }

    .quiz-widget-wrapper {
        position: sticky;
        top: 90px;
    }

    .quiz-card {
        padding: 20px;
        height: auto;
        max-height: 600px; 
        min-height: 450px;
    }
}

/* --- Mobile Specific Optimizations (Small Screens) --- */
@media (max-width: 600px) {
    /* Dashboard / Stats */
    .stats-dashboard { margin-bottom: 8px; }
    .stat-item { padding: 6px 2px; }
    .stat-label { font-size: 0.6rem; margin-bottom: 2px; }
    .stat-value { font-size: 0.85rem; }

    /* Footer Controls (Next/Prev/Jump) */
    .widget-controls { padding-top: 10px; }
    
    .nav-btn {
        padding: 8px 12px;
        font-size: 0.75rem; 
        min-width: 70px;
    }
    
    .jump-trigger {
        padding: 6px 10px;
        gap: 8px;
    }
    
    .progress-text { font-size: 0.8rem; }
    
    .jump-label {
        font-size: 0.65rem;
        padding-left: 8px;
    }
    
    /* Widget Header Buttons & Input */
    .widget-header { margin-bottom: 8px; padding-bottom: 8px; }
    .search-input { font-size: 0.85rem; padding-top: 6px; padding-bottom: 6px; }
    
    /* Control Buttons Row */
    .text-controls { gap: 2px; }
    .text-btn, .bookmark-btn, .mistake-btn, .shuffle-btn, .quick-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        border-radius: 4px;
    }
}