/* ============================================
   UPSC GEOGRAPHY LEARNING SYSTEM
   Complete Stylesheet with Theme Animations
   ============================================ */

/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. CSS Variables & Root
   2. Reset & Base Styles
   3. Typography
   4. Animated Background
   5. Layout & Containers
   6. Header Styles
   7. Category Navigation
   8. Filter Bar
   9. Stats Overview
   10. Topic Cards Grid
   11. Loading & Empty States
   12. Modal Styles
   13. Mind Map Styles
   14. Memory Hooks
   15. Concept Blocks
   16. Diagrams Section
   17. Quick Facts
   18. UPSC Traps
   19. Revision Box
   20. PYQs Section
   21. Bookmarks Sidebar
   22. Toast Notifications
   23. Profile/Dashboard Page
   24. Theme Animations
   25. Responsive Design
   26. Utility Classes
   ============================================ */

/* ============================================
   1. CSS VARIABLES & ROOT
   ============================================ */
:root {
    /* Primary Earth Tones */
    --earth-core: #FF4444;
    --earth-mantle: #FF6B35;
    --earth-crust: #8B4513;
    --earth-surface: #228B22;
    
    /* Ocean Blues */
    --ocean-deep: #0a1628;
    --ocean-mid: #1a4a6e;
    --ocean-surface: #00CED1;
    --ocean-foam: #E0FFFF;
    
    /* Sky Colors */
    --sky-night: #000428;
    --sky-dawn: #004e92;
    --sky-day: #87CEEB;
    --sky-sunset: #FF6B6B;
    
    /* Mountain/Ice */
    --snow-white: #FFFFFF;
    --ice-blue: #E8F4F8;
    --glacier: #A8DADC;
    --rock-gray: #5D6D7E;
    
    /* Vegetation */
    --forest-dark: #0a1f0a;
    --forest-mid: #228B22;
    --forest-light: #90EE90;
    --desert-sand: #EDC9AF;
    
    /* Category Colors */
    --cat-geomorphology: #FF6B6B;
    --cat-climatology: #4ECDC4;
    --cat-oceanography: #00B4D8;
    --cat-biogeography: #2ECC71;
    --cat-landforms: #8B4513;
    --cat-india-physical: #9B59B6;
    --cat-india-climate: #3498DB;
    --cat-india-drainage: #00CED1;
    --cat-india-resources: #F39C12;
    --cat-economic: #F1C40F;
    --cat-human: #E91E63;
    --cat-models: #708090;
    --cat-environment: #27AE60;
    
    /* UI Colors */
    --bg-primary: #0a0f1a;
    --bg-secondary: #0d1525;
    --bg-tertiary: #111b2b;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-hover: rgba(255, 255, 255, 0.08);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-muted: rgba(255, 255, 255, 0.3);
    
    /* Border Colors */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-medium: rgba(255, 255, 255, 0.2);
    
    /* Accent Colors */
    --accent-primary: #00D4FF;
    --accent-secondary: #7B68EE;
    --accent-success: #2ECC71;
    --accent-warning: #F39C12;
    --accent-danger: #E74C3C;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.3);
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-Index Scale */
    --z-background: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;
    
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

/* Light Theme Variables */
[data-theme="light"] {
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef1f5;
    --bg-card: rgba(0, 0, 0, 0.03);
    --bg-card-hover: rgba(0, 0, 0, 0.06);
    --bg-glass: rgba(255, 255, 255, 0.8);
    
    --text-primary: #1a1a2e;
    --text-secondary: rgba(26, 26, 46, 0.7);
    --text-tertiary: rgba(26, 26, 46, 0.5);
    
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-light: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.15);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ============================================
   2. RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

ul, ol {
    list-style: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Selection */
::selection {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* Focus Visible */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ============================================
   3. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

.text-gradient {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   4. ANIMATED BACKGROUND
   ============================================ */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    overflow: hidden;
    pointer-events: none;
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    transition: background var(--transition-smooth);
}

.particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.floating-elements {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Particle Base */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}

/* Theme: Default */
.theme-default .bg-gradient {
    background: linear-gradient(135deg, #0a0f1a 0%, #0d1525 50%, #111b2b 100%);
}

/* Theme: Dashboard */
.theme-dashboard .bg-gradient {
    background: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #1a3a5c 100%);
}

.globe-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    opacity: 0.1;
}

.globe-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    opacity: 0.3;
}

.globe-ring.ring-1 {
    width: 200px;
    height: 200px;
    animation: pulseRing 4s ease-in-out infinite;
}

.globe-ring.ring-2 {
    width: 300px;
    height: 300px;
    animation: pulseRing 4s ease-in-out infinite 1s;
}

.globe-ring.ring-3 {
    width: 400px;
    height: 400px;
    animation: pulseRing 4s ease-in-out infinite 2s;
}

.globe-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    animation: float 6s ease-in-out infinite;
}

@keyframes pulseRing {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.1; }
}

@keyframes float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-20px); }
}

/* ============================================
   5. LAYOUT & CONTAINERS
   ============================================ */
.app-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: var(--z-base);
}

.main-content {
    flex: 1;
    padding: var(--space-lg);
    max-width: var(--container-2xl);
    margin: 0 auto;
    width: 100%;
}

/* ============================================
   6. HEADER STYLES
   ============================================ */
.main-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(10, 15, 26, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-md) var(--space-lg);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: var(--container-2xl);
    margin: 0 auto;
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.logo-container {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon {
    font-size: 32px;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
}

.logo-rings {
    position: absolute;
    inset: 0;
}

.logo-rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    opacity: 0.3;
}

.logo-rings .ring-1 {
    width: 40px;
    height: 40px;
    animation: ringPulse 3s ease-in-out infinite;
}

.logo-rings .ring-2 {
    width: 52px;
    height: 52px;
    animation: ringPulse 3s ease-in-out infinite 0.5s;
}

.logo-rings .ring-3 {
    width: 64px;
    height: 64px;
    animation: ringPulse 3s ease-in-out infinite 1s;
}

@keyframes ringPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.1; transform: translate(-50%, -50%) scale(1.1); }
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary), #7B68EE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-tagline {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Search */
.search-container {
    position: relative;
    flex: 1;
    max-width: 500px;
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    transition: all var(--transition-normal);
}

.search-wrapper:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

.search-icon {
    font-size: var(--text-lg);
    margin-right: var(--space-sm);
    opacity: 0.5;
}

.search-input {
    flex: 1;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text-primary);
    min-width: 0;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-shortcut {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.search-clear {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-glass);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.search-clear:hover {
    background: var(--accent-danger);
    color: white;
}

.search-input:not(:placeholder-shown) ~ .search-shortcut {
    display: none;
}

.search-input:not(:placeholder-shown) ~ .search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search Results */
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    z-index: var(--z-dropdown);
}

.search-results.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-results-content {
    padding: var(--space-sm);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-result-item:hover {
    background: var(--bg-card-hover);
}

.search-result-icon {
    font-size: var(--text-2xl);
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.search-result-category {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.search-no-results {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-tertiary);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Progress Indicator */
.progress-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.progress-indicator:hover {
    background: var(--bg-card-hover);
}

.progress-ring {
    position: relative;
    width: 32px;
    height: 32px;
}

.circular-chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray var(--transition-smooth);
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    font-weight: 700;
    color: var(--accent-primary);
}

.progress-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    display: none;
}

@media (min-width: 768px) {
    .progress-label {
        display: block;
    }
}

/* Header Buttons */
.header-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.header-btn:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.btn-icon {
    font-size: var(--text-xl);
}

.btn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-full);
    padding: 0 4px;
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
    width: 64px;
    height: 32px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    padding: 4px;
    cursor: pointer;
    transition: background var(--transition-normal);
}

.theme-toggle:hover {
    background: var(--bg-card-hover);
}

.theme-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-sm);
    transition: opacity var(--transition-normal);
}

.theme-icon.sun {
    left: 8px;
    opacity: 0.3;
}

.theme-icon.moon {
    right: 8px;
    opacity: 1;
}

.toggle-slider {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border-radius: 50%;
    transition: transform var(--transition-smooth);
}

[data-theme="light"] .theme-icon.sun { opacity: 1; }
[data-theme="light"] .theme-icon.moon { opacity: 0.3; }
[data-theme="light"] .toggle-slider {
    transform: translateX(-32px);
}
/* ============================================
   7. CATEGORY NAVIGATION
   ============================================ */
.category-nav {
    position: sticky;
    top: 73px;
    z-index: calc(var(--z-sticky) - 1);
    background: rgba(10, 15, 26, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-md) 0;
}

.category-scroll-wrapper {
    position: relative;
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.category-scroll {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-xs) 0;
    scroll-behavior: smooth;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: var(--text-xl);
    z-index: 10;
    opacity: 0;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.category-scroll-wrapper:hover .scroll-btn {
    opacity: 1;
}

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

.scroll-btn.scroll-left {
    left: 0;
}

.scroll-btn.scroll-right {
    right: 0;
}

/* Category Pills */
.category-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.category-pill:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.category-pill.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

.category-pill.active .pill-count {
    background: rgba(0, 0, 0, 0.2);
    color: var(--bg-primary);
}

.pill-icon {
    font-size: var(--text-lg);
}

.pill-text {
    font-size: var(--text-sm);
    font-weight: 500;
}

.pill-count {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 6px;
    background: var(--bg-glass);
    border-radius: var(--radius-full);
    color: var(--text-tertiary);
}

.pill-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-normal);
    background: radial-gradient(circle at center, var(--pill-color, var(--accent-primary)) 0%, transparent 70%);
}

.category-pill:hover .pill-glow {
    opacity: 0.1;
}

/* Category-specific colors on hover */
.category-pill[data-category="geomorphology"]:hover { border-color: var(--cat-geomorphology); }
.category-pill[data-category="climatology"]:hover { border-color: var(--cat-climatology); }
.category-pill[data-category="oceanography"]:hover { border-color: var(--cat-oceanography); }
.category-pill[data-category="biogeography"]:hover { border-color: var(--cat-biogeography); }
.category-pill[data-category="landforms"]:hover { border-color: var(--cat-landforms); }
.category-pill[data-category="india-physical"]:hover { border-color: var(--cat-india-physical); }
.category-pill[data-category="india-climate"]:hover { border-color: var(--cat-india-climate); }
.category-pill[data-category="india-drainage"]:hover { border-color: var(--cat-india-drainage); }
.category-pill[data-category="india-resources"]:hover { border-color: var(--cat-india-resources); }
.category-pill[data-category="economic"]:hover { border-color: var(--cat-economic); }
.category-pill[data-category="human"]:hover { border-color: var(--cat-human); }
.category-pill[data-category="models"]:hover { border-color: var(--cat-models); }
.category-pill[data-category="environment"]:hover { border-color: var(--cat-environment); }

/* ============================================
   8. FILTER BAR
   ============================================ */
.filter-bar {
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-md) var(--space-lg);
}

.filter-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: var(--container-2xl);
    margin: 0 auto;
    flex-wrap: wrap;
}

.active-filters {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.filter-label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.filter-tag.active-category {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.filter-options {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Filter Dropdown */
.filter-dropdown {
    position: relative;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

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

.dropdown-arrow {
    font-size: var(--text-xs);
    transition: transform var(--transition-fast);
}

.filter-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    z-index: var(--z-dropdown);
}

.filter-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: var(--bg-card-hover);
}

.dropdown-item.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.dropdown-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

/* Difficulty Badges */
.difficulty-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.difficulty-badge.easy {
    background: rgba(46, 204, 113, 0.2);
    color: #2ECC71;
}

.difficulty-badge.medium {
    background: rgba(243, 156, 18, 0.2);
    color: #F39C12;
}

.difficulty-badge.hard {
    background: rgba(231, 76, 60, 0.2);
    color: #E74C3C;
}

/* Relevance Stars */
.relevance-stars {
    color: var(--accent-warning);
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.view-btn:hover {
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* ============================================
   9. STATS OVERVIEW
   ============================================ */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.stat-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    font-size: var(--text-3xl);
}

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

.stat-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

@media (max-width: 1024px) {
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-overview {
        grid-template-columns: 1fr;
    }
}
/* ============================================
   10. TOPIC CARDS GRID
   ============================================ */
.topics-container {
    position: relative;
    min-height: 400px;
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    animation: fadeInUp 0.6s ease-out;
}

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

/* Topic Card */
.topic-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.topic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, var(--accent-primary));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.topic-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(255, 255, 255, 0.06) 0%, 
                transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.topic-card:hover {
    transform: translateY(-8px);
    border-color: var(--card-accent, var(--accent-primary));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(var(--card-accent-rgb, 0, 212, 255), 0.1);
}

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

.topic-card:hover::after {
    opacity: 1;
}

/* Card Header */
.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.card-icon-wrapper {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    font-size: 28px;
    transition: all var(--transition-normal);
}

.topic-card:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(var(--card-accent-rgb, 0, 212, 255), 0.1);
}

.card-icon-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, var(--card-accent, var(--accent-primary)) 0%, transparent 70%);
    opacity: 0;
    filter: blur(15px);
    transition: opacity var(--transition-normal);
}

.topic-card:hover .card-icon-glow {
    opacity: 0.3;
}

.card-bookmark {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
}

.topic-card:hover .card-bookmark {
    opacity: 1;
    transform: translateY(0);
}

.card-bookmark:hover {
    background: var(--accent-warning);
    transform: scale(1.1);
}

.card-bookmark.bookmarked {
    opacity: 1;
    background: var(--accent-warning);
}

/* Card Content */
.card-content {
    margin-bottom: var(--space-md);
}

.card-category {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    background: var(--bg-glass);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--card-accent, var(--text-tertiary));
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    line-height: var(--leading-tight);
}

.card-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.card-difficulty {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.card-difficulty.easy {
    background: rgba(46, 204, 113, 0.15);
    color: #2ECC71;
}

.card-difficulty.medium {
    background: rgba(243, 156, 18, 0.15);
    color: #F39C12;
}

.card-difficulty.hard {
    background: rgba(231, 76, 60, 0.15);
    color: #E74C3C;
}

.card-relevance {
    display: flex;
    gap: 2px;
}

.card-relevance .star {
    font-size: 12px;
    color: var(--text-muted);
}

.card-relevance .star.filled {
    color: var(--accent-warning);
}

.card-progress {
    position: relative;
    width: 40px;
    height: 40px;
}

.card-progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.card-progress-bg {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 3;
}

.card-progress-fill {
    fill: none;
    stroke: var(--accent-success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray var(--transition-smooth);
}

.card-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
}

.card-completed-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--accent-success);
    border-radius: 50%;
    font-size: 14px;
}

/* Card Hover Preview */
.card-preview {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    background: linear-gradient(to top, var(--bg-secondary) 0%, transparent 100%);
    transform: translateY(100%);
    opacity: 0;
    transition: all var(--transition-normal);
}

.topic-card:hover .card-preview {
    transform: translateY(0);
    opacity: 1;
}

.preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.preview-tag {
    padding: 2px 6px;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Category-specific Card Accents */
.topic-card[data-category="geomorphology"] {
    --card-accent: var(--cat-geomorphology);
    --card-accent-rgb: 255, 107, 107;
}

.topic-card[data-category="climatology"] {
    --card-accent: var(--cat-climatology);
    --card-accent-rgb: 78, 205, 196;
}

.topic-card[data-category="oceanography"] {
    --card-accent: var(--cat-oceanography);
    --card-accent-rgb: 0, 180, 216;
}

.topic-card[data-category="biogeography"] {
    --card-accent: var(--cat-biogeography);
    --card-accent-rgb: 46, 204, 113;
}

.topic-card[data-category="landforms"] {
    --card-accent: var(--cat-landforms);
    --card-accent-rgb: 139, 69, 19;
}

.topic-card[data-category="india-physical"] {
    --card-accent: var(--cat-india-physical);
    --card-accent-rgb: 155, 89, 182;
}

.topic-card[data-category="india-climate"] {
    --card-accent: var(--cat-india-climate);
    --card-accent-rgb: 52, 152, 219;
}

.topic-card[data-category="india-drainage"] {
    --card-accent: var(--cat-india-drainage);
    --card-accent-rgb: 0, 206, 209;
}

.topic-card[data-category="india-resources"] {
    --card-accent: var(--cat-india-resources);
    --card-accent-rgb: 243, 156, 18;
}

.topic-card[data-category="economic"] {
    --card-accent: var(--cat-economic);
    --card-accent-rgb: 241, 196, 15;
}

.topic-card[data-category="human"] {
    --card-accent: var(--cat-human);
    --card-accent-rgb: 233, 30, 99;
}

.topic-card[data-category="models"] {
    --card-accent: var(--cat-models);
    --card-accent-rgb: 112, 128, 144;
}

.topic-card[data-category="environment"] {
    --card-accent: var(--cat-environment);
    --card-accent-rgb: 39, 174, 96;
}

/* List View */
.topics-grid.list-view {
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.topics-grid.list-view .topic-card {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
}

.topics-grid.list-view .card-header {
    margin-bottom: 0;
    margin-right: var(--space-lg);
}

.topics-grid.list-view .card-icon-wrapper {
    width: 48px;
    height: 48px;
    font-size: 24px;
}

.topics-grid.list-view .card-content {
    flex: 1;
    margin-bottom: 0;
    margin-right: var(--space-lg);
}

.topics-grid.list-view .card-footer {
    border-top: none;
    padding-top: 0;
    flex-shrink: 0;
}

/* ============================================
   11. LOADING & EMPTY STATES
   ============================================ */
.loading-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
}

.loading-spinner {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: var(--space-lg);
}

.spinner-ring {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: 50%;
}

.spinner-ring:nth-child(1) {
    border-top-color: var(--accent-primary);
    animation: spinClockwise 1.5s linear infinite;
}

.spinner-ring:nth-child(2) {
    inset: 10px;
    border-right-color: var(--cat-geomorphology);
    animation: spinCounterClockwise 1.2s linear infinite;
}

.spinner-ring:nth-child(3) {
    inset: 20px;
    border-bottom-color: var(--cat-biogeography);
    animation: spinClockwise 0.9s linear infinite;
}

.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: pulse 1.5s ease-in-out infinite;
}

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

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

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

.loading-text {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.loading-progress {
    width: 200px;
    height: 4px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.loading-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-full);
    animation: loadingProgress 2s ease-in-out infinite;
}

@keyframes loadingProgress {
    0% { width: 0%; transform: translateX(0); }
    50% { width: 70%; }
    100% { width: 100%; transform: translateX(0); }
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
}

.empty-state.hidden {
    display: none;
}

.empty-illustration {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-lg);
}

.empty-icon {
    font-size: 64px;
    opacity: 0.5;
}

.empty-circles {
    position: absolute;
    inset: 0;
}

.empty-circles .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed var(--border-light);
    border-radius: 50%;
    opacity: 0.3;
}

.empty-circles .circle:nth-child(1) {
    width: 80px;
    height: 80px;
    animation: emptyPulse 3s ease-in-out infinite;
}

.empty-circles .circle:nth-child(2) {
    width: 100px;
    height: 100px;
    animation: emptyPulse 3s ease-in-out infinite 0.5s;
}

.empty-circles .circle:nth-child(3) {
    width: 120px;
    height: 120px;
    animation: emptyPulse 3s ease-in-out infinite 1s;
}

@keyframes emptyPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.15; }
}

.empty-title {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.empty-text {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    margin-bottom: var(--space-lg);
}

.reset-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: all var(--transition-normal);
}

.reset-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   12. MODAL STYLES
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    max-height: 95vh;
    margin: var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform var(--transition-smooth);
    box-shadow: var(--shadow-xl);
}

.modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.modal-back {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.modal-back:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.back-arrow {
    font-size: var(--text-lg);
}

.modal-title-area {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    justify-content: center;
}

.modal-icon {
    font-size: var(--text-3xl);
}

.modal-titles {
    text-align: center;
}

.modal-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.modal-category {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.modal-badges {
    display: flex;
    gap: var(--space-sm);
    margin-right: var(--space-md);
}

.modal-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    transition: all var(--transition-fast);
}

.modal-btn:hover {
    background: var(--bg-card-hover);
    transform: scale(1.05);
}

.modal-btn.close-btn:hover {
    background: var(--accent-danger);
    color: white;
}

.bookmark-btn.bookmarked {
    background: var(--accent-warning);
}

/* Modal Navigation Tabs */
.modal-nav {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--space-lg);
    flex-shrink: 0;
    overflow-x: auto;
}

.nav-tabs {
    display: flex;
    gap: var(--space-xs);
    min-width: max-content;
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.nav-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.tab-icon {
    font-size: var(--text-lg);
}

/* Modal Content */
.modal-content {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.modal-theme-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.theme-gradient {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    transition: background var(--transition-smooth);
}

.theme-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.content-scroll {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow-y: auto;
    padding: var(--space-xl);
}

/* Content Sections */
.content-section {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.content-section.active {
    display: block;
}

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

.section-header {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.title-icon {
    font-size: var(--text-2xl);
}

.section-subtitle {
    font-size: var(--text-base);
    color: var(--text-tertiary);
}

/* Modal Footer */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

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

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

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

.nav-arrow {
    font-size: var(--text-lg);
}

.topic-progress {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.progress-current {
    color: var(--accent-primary);
    font-weight: 600;
}
/* ============================================
   13. MIND MAP STYLES
   ============================================ */
.mindmap-container {
    position: relative;
    min-height: 500px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.mindmap-canvas {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

/* Central Node */
.mindmap-central {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 150px;
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
    animation: centralPulse 3s ease-in-out infinite;
}

.central-text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--bg-primary);
    text-align: center;
    max-width: 120px;
}

@keyframes centralPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.4); }
    50% { box-shadow: 0 0 60px rgba(0, 212, 255, 0.6); }
}

/* Branches Container */
.mindmap-branches {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Branch */
.mindmap-branch {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}

.branch-line {
    position: absolute;
    height: 3px;
    background: var(--branch-color, var(--accent-primary));
    transform-origin: left center;
    opacity: 0.6;
}

.branch-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 2px solid var(--branch-color, var(--accent-primary));
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    max-width: 200px;
}

.branch-node:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(var(--branch-color-rgb, 0, 212, 255), 0.3);
}

.branch-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--branch-color, var(--text-primary));
    text-align: center;
    margin-bottom: var(--space-xs);
}

.branch-children {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.branch-child {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    text-align: center;
}

/* Mind Map Controls */
.mindmap-controls {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    display: flex;
    gap: var(--space-xs);
    background: var(--bg-secondary);
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.control-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

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

/* ============================================
   14. MEMORY HOOKS
   ============================================ */
.memory-hooks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.memory-hook-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.memory-hook-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--hook-color, var(--accent-primary));
}

.memory-hook-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--hook-color, var(--accent-primary));
}

.hook-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.hook-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    font-size: 24px;
}

.hook-meta {
    flex: 1;
}

.hook-type {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--hook-color, var(--accent-primary));
    margin-bottom: 2px;
}

.hook-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.hook-content {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    padding: var(--space-md);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--hook-color, var(--accent-primary));
}

/* Hook Types */
.memory-hook-card[data-type="mnemonic"] {
    --hook-color: #9B59B6;
}

.memory-hook-card[data-type="story"] {
    --hook-color: #3498DB;
}

.memory-hook-card[data-type="comparison"] {
    --hook-color: #E67E22;
}

.memory-hook-card[data-type="visual"] {
    --hook-color: #2ECC71;
}

.memory-hook-card[data-type="acronym"] {
    --hook-color: #E91E63;
}

/* ============================================
   15. CONCEPT BLOCKS
   ============================================ */
.concept-blocks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.concept-block {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    transition: all var(--transition-normal);
}

.concept-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-light);
}

.concept-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.concept-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-md);
    font-size: 22px;
}

.concept-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.concept-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.concept-point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    padding: var(--space-sm);
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.concept-point:hover {
    background: var(--bg-card-hover);
}

.point-bullet {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 8px;
    background: var(--accent-primary);
    border-radius: 50%;
}

.point-text {
    flex: 1;
}

.point-highlight {
    color: var(--accent-primary);
    font-weight: 600;
}
/* ============================================
   16. DIAGRAMS SECTION
   ============================================ */
.diagrams-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-lg);
}

.diagram-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.diagram-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-light);
}

.diagram-preview {
    position: relative;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.diagram-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    text-align: center;
}

.diagram-placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

.diagram-placeholder-text {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    max-width: 200px;
}

.diagram-visual {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--space-md);
}

/* Interactive Diagram Elements */
.diagram-interactive {
    position: relative;
    width: 100%;
    height: 100%;
}

.diagram-layer {
    position: absolute;
    inset: 0;
}

.diagram-hotspot {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--accent-primary);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    animation: hotspotPulse 2s ease-in-out infinite;
    z-index: 10;
}

.diagram-hotspot::before {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: hotspotRing 2s ease-in-out infinite;
}

@keyframes hotspotPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes hotspotRing {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0; }
}

.diagram-tooltip {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: 20;
}

.diagram-hotspot:hover + .diagram-tooltip,
.diagram-hotspot:focus + .diagram-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.diagram-info {
    padding: var(--space-lg);
}

.diagram-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.diagram-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    background: var(--bg-glass);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.diagram-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.diagram-expand-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    color: var(--text-secondary);
    opacity: 0;
    transition: all var(--transition-fast);
}

.diagram-card:hover .diagram-expand-btn {
    opacity: 1;
}

.diagram-expand-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* Comparison Chart Diagram */
.comparison-diagram {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: var(--space-md);
    background: var(--border-subtle);
}

.comparison-column {
    background: var(--bg-secondary);
    padding: var(--space-md);
}

.comparison-header {
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--column-color, var(--accent-primary));
    margin-bottom: var(--space-sm);
}

.comparison-item {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

/* Cross Section Diagram */
.cross-section-diagram {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
        #87CEEB 0%, 
        #87CEEB 20%, 
        #8B4513 20%, 
        #8B4513 40%,
        #FF6B35 40%,
        #FF6B35 70%,
        #FF4444 70%
    );
}

.cross-section-label {
    position: absolute;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: white;
}

/* ============================================
   17. QUICK FACTS
   ============================================ */
.quick-facts-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.quick-fact {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    cursor: default;
}

.quick-fact:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    transform: translateX(8px);
}

.fact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    font-size: 20px;
}

.fact-content {
    flex: 1;
}

.fact-text {
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.fact-highlight {
    color: var(--accent-primary);
    font-weight: 600;
}

.fact-number {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-warning);
}

.fact-tag {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-xs);
    padding: 2px 8px;
    background: var(--bg-glass);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Animated Facts Counter */
.fact-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.counter-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--accent-primary);
}

.counter-unit {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* ============================================
   18. UPSC TRAPS
   ============================================ */
.traps-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.trap-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.trap-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-light);
}

.trap-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
    border-bottom: 1px solid var(--border-subtle);
}

.trap-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.2);
    border-radius: var(--radius-lg);
    font-size: 24px;
}

.trap-label {
    flex: 1;
}

.trap-badge {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-danger);
    margin-bottom: 2px;
}

.trap-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.trap-content {
    padding: var(--space-lg);
}

.trap-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.trap-wrong,
.trap-right {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
}

.trap-wrong {
    background: rgba(231, 76, 60, 0.1);
    border-left: 4px solid var(--accent-danger);
}

.trap-right {
    background: rgba(46, 204, 113, 0.1);
    border-left: 4px solid var(--accent-success);
}

.trap-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.trap-section-icon {
    font-size: var(--text-lg);
}

.trap-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trap-wrong .trap-section-title {
    color: var(--accent-danger);
}

.trap-right .trap-section-title {
    color: var(--accent-success);
}

.trap-section-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.trap-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .trap-sections {
        grid-template-columns: 1fr auto 1fr;
    }
    
    .trap-arrow {
        display: flex;
    }
}

/* ============================================
   19. REVISION BOX
   ============================================ */
.revision-container {
    max-width: 800px;
    margin: 0 auto;
}

.revision-box {
    position: relative;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-hover) 100%);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    overflow: hidden;
}

.revision-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    opacity: 0.1;
}

.revision-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.revision-icon {
    font-size: var(--text-3xl);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.revision-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.revision-timer {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--accent-warning);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--bg-primary);
}

.revision-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.revision-point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.revision-point:hover {
    background: var(--bg-card-hover);
    transform: translateX(8px);
}

.revision-bullet {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--bg-primary);
}

.revision-text {
    flex: 1;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.revision-keyword {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Completion Area */
.completion-area {
    margin-top: var(--space-xl);
    text-align: center;
}

.mark-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-2xl);
    background: linear-gradient(135deg, var(--accent-success) 0%, #27AE60 100%);
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    transition: all var(--transition-normal);
}

.mark-complete-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.5);
}

.mark-complete-btn.completed {
    background: var(--bg-card);
    color: var(--accent-success);
    box-shadow: none;
    border: 2px solid var(--accent-success);
}

.mark-complete-btn .btn-icon {
    font-size: var(--text-xl);
}

/* ============================================
   20. PYQS SECTION
   ============================================ */
.pyqs-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.pyq-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.pyq-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}

.pyq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-subtle);
}

.pyq-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.pyq-year {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--bg-primary);
}

.pyq-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pyq-exam {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.pyq-paper {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.pyq-type {
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
}

.pyq-type.prelims {
    background: rgba(52, 152, 219, 0.2);
    color: #3498DB;
}

.pyq-type.mains {
    background: rgba(155, 89, 182, 0.2);
    color: #9B59B6;
}

.pyq-content {
    padding: var(--space-lg);
}

.pyq-question {
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}

.pyq-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.pyq-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pyq-option:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.pyq-option.selected {
    border-color: var(--accent-primary);
    background: rgba(0, 212, 255, 0.1);
}

.pyq-option.correct {
    border-color: var(--accent-success);
    background: rgba(46, 204, 113, 0.1);
}

.pyq-option.incorrect {
    border-color: var(--accent-danger);
    background: rgba(231, 76, 60, 0.1);
}

.option-letter {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.pyq-option.selected .option-letter {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.option-text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.pyq-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-glass);
    border-top: 1px solid var(--border-subtle);
}

.pyq-hint-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.pyq-hint-btn:hover {
    background: var(--accent-warning);
    color: var(--bg-primary);
}

.pyq-check-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--bg-primary);
    transition: all var(--transition-fast);
}

.pyq-check-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* PYQ Empty State */
.pyqs-empty {
    text-align: center;
    padding: var(--space-3xl);
}

.pyqs-empty-icon {
    font-size: 64px;
    opacity: 0.3;
    margin-bottom: var(--space-md);
}

.pyqs-empty-text {
    font-size: var(--text-lg);
    color: var(--text-tertiary);
}
/* ============================================
   21. BOOKMARKS SIDEBAR
   ============================================ */
.bookmarks-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 100%;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.bookmarks-sidebar.active {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.sidebar-close:hover {
    background: var(--accent-danger);
    color: white;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

.bookmarks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.bookmark-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bookmark-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    transform: translateX(4px);
}

.bookmark-icon {
    font-size: var(--text-2xl);
}

.bookmark-info {
    flex: 1;
    min-width: 0;
}

.bookmark-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-category {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.bookmark-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: 0;
    transition: all var(--transition-fast);
}

.bookmark-item:hover .bookmark-remove {
    opacity: 1;
}

.bookmark-remove:hover {
    background: var(--accent-danger);
    color: white;
}

.bookmarks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
}

.bookmarks-empty .empty-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: var(--space-md);
}

.bookmarks-empty p {
    font-size: var(--text-lg);
    color: var(--text-tertiary);
    margin-bottom: var(--space-xs);
}

.bookmarks-empty .empty-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.sidebar-footer {
    padding: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.clear-bookmarks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.clear-bookmarks:hover {
    background: var(--accent-danger);
    color: white;
}

/* ============================================
   22. TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-sm);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 450px;
    pointer-events: auto;
    animation: toastSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.removing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--text-lg);
}

.toast.success .toast-icon {
    background: rgba(46, 204, 113, 0.2);
    color: var(--accent-success);
}

.toast.error .toast-icon {
    background: rgba(231, 76, 60, 0.2);
    color: var(--accent-danger);
}

.toast.warning .toast-icon {
    background: rgba(243, 156, 18, 0.2);
    color: var(--accent-warning);
}

.toast.info .toast-icon {
    background: rgba(0, 212, 255, 0.2);
    color: var(--accent-primary);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.toast-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.toast-close:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ============================================
   KEYBOARD SHORTCUTS MODAL
   ============================================ */
.shortcuts-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.shortcuts-modal.active {
    opacity: 1;
    visibility: visible;
}

.shortcuts-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    max-width: 400px;
    width: 90%;
    transform: scale(0.95);
    transition: transform var(--transition-smooth);
}

.shortcuts-modal.active .shortcuts-content {
    transform: scale(1);
}

.shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.shortcuts-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
}

.shortcuts-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.shortcuts-close:hover {
    background: var(--accent-danger);
    color: white;
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

.shortcut-item kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--space-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-primary);
}

.shortcut-item span {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.scroll-top-btn {
    position: fixed;
    bottom: var(--space-lg);
    left: var(--space-lg);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    border-radius: 50%;
    color: var(--bg-primary);
    font-size: var(--text-xl);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: var(--z-sticky);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-xl) var(--space-lg);
    margin-top: auto;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    max-width: var(--container-2xl);
    margin: 0 auto;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
}

.footer-brand span:first-child {
    font-size: var(--text-xl);
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-link {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--accent-primary);
}

.footer-info {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
/* ============================================
   23. PROFILE/DASHBOARD PAGE
   ============================================ */
.profile-page {
    background: var(--bg-primary);
}

.profile-container {
    max-width: var(--container-xl);
    margin: 0 auto;
}

.profile-header {
    position: relative;
}

.back-home {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.back-home:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.page-title .title-icon {
    font-size: var(--text-2xl);
}

.page-title h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--text-primary);
}

/* Dashboard Content */
.dashboard-content {
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

/* Profile Section */
.profile-section {
    display: flex;
    justify-content: center;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    min-width: 500px;
}

.profile-avatar {
    position: relative;
    width: 100px;
    height: 100px;
}

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

.progress-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-svg .ring-bg {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 4;
}

.progress-ring-svg .ring-progress {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray var(--transition-smooth);
}

.avatar-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
}

.avatar-level {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--bg-primary);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.profile-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.profile-stats-mini {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mini-value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.mini-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.mini-divider {
    width: 1px;
    height: 30px;
    background: var(--border-subtle);
}

.edit-profile-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.edit-profile-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Stats Section */
.stats-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

/* Large Progress Card */
.stat-card.large-card {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
}

.stat-card .card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.stat-card .card-icon {
    font-size: var(--text-2xl);
}

.stat-card .card-header h4 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* Progress Circle Large */
.progress-circle-large {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto var(--space-xl);
}

.circle-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-svg .circle-bg {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 10;
}

.circle-svg .circle-progress {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease-out;
}

.progress-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-percent {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--text-primary);
}

.progress-center .progress-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.progress-details {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
}

.detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.detail-icon {
    font-size: var(--text-lg);
}

.detail-value {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.detail-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Streak Card */
.streak-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.streak-display {
    margin-bottom: var(--space-md);
}

.streak-number {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 700;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.streak-unit {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.streak-calendar {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.streak-day {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.streak-day.active {
    background: var(--accent-success);
    color: var(--bg-primary);
}

.streak-day.today {
    border: 2px solid var(--accent-primary);
}

.streak-message {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Time Card */
.time-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-display {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
}

.time-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.time-separator {
    font-size: var(--text-2xl);
    color: var(--text-muted);
    margin-bottom: 12px;
}

.time-graph {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
}

.time-bar {
    width: 12px;
    background: var(--accent-primary);
    border-radius: 2px 2px 0 0;
    transition: height var(--transition-normal);
}

/* Achievement Card */
.achievement-card {
    display: flex;
    flex-direction: column;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.achievement-badge {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    font-size: 20px;
    opacity: 0.3;
    filter: grayscale(1);
    transition: all var(--transition-normal);
}

.achievement-badge.unlocked {
    opacity: 1;
    filter: grayscale(0);
    animation: achievementUnlock 0.5s ease-out;
}

@keyframes achievementUnlock {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.achievement-progress {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* Category Progress Section */
.category-progress-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.category-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.category-progress-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.category-progress-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
}

.category-progress-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
    font-size: 22px;
}

.category-progress-info {
    flex: 1;
}

.category-progress-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.category-progress-bar {
    height: 8px;
    background: var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.category-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.category-progress-percent {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

/* Activity Section */
.activity-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.activity-timeline {
    position: relative;
    padding-left: var(--space-xl);
}

.activity-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    width: 2px;
    height: 100%;
    background: var(--border-subtle);
}

.activity-item {
    position: relative;
    padding: var(--space-md);
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.activity-item::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -26px;
    width: 12px;
    height: 12px;
    background: var(--accent-primary);
    border: 2px solid var(--bg-secondary);
    border-radius: 50%;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.activity-action {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.activity-action strong {
    color: var(--text-primary);
}

.activity-time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.activity-topic {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.activity-topic-icon {
    font-size: var(--text-lg);
}

.activity-topic-name {
    font-weight: 600;
    color: var(--text-primary);
}

.activity-empty {
    text-align: center;
    padding: var(--space-2xl);
}

.activity-empty .empty-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: var(--space-md);
}

.activity-empty p {
    color: var(--text-tertiary);
    margin-bottom: var(--space-xs);
}

.activity-empty .empty-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Bookmarks Section Dashboard */
.bookmarks-section .section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.view-all-link {
    font-size: var(--text-sm);
    color: var(--accent-primary);
    transition: color var(--transition-fast);
}

.view-all-link:hover {
    color: var(--text-primary);
}

.bookmarks-scroll {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-md);
    scrollbar-width: thin;
}

.bookmark-card {
    flex-shrink: 0;
    width: 200px;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.bookmark-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-light);
    transform: translateY(-4px);
}

.bookmark-card-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
}

.bookmark-card-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-card-category {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

#dashboardBookmarksEmpty {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl);
    text-align: center;
}

.start-link {
    color: var(--accent-primary);
    margin-top: var(--space-sm);
}

/* Weak Areas Section */
.weak-areas-section .section-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.weak-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.weak-area-card {
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent-warning);
}

.weak-area-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.weak-area-icon {
    font-size: var(--text-xl);
}

.weak-area-name {
    font-weight: 600;
    color: var(--text-primary);
}

.weak-area-stat {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.weak-area-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--accent-warning);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--bg-primary);
    transition: all var(--transition-fast);
}

.weak-area-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}

/* Recommendations Section */
.recommendations-section .section-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

.recommendation-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recommendation-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    transform: translateX(8px);
}

.recommendation-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border-radius: var(--radius-lg);
    font-size: 24px;
}

.recommendation-info {
    flex: 1;
}

.recommendation-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.recommendation-reason {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.recommendation-arrow {
    font-size: var(--text-xl);
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.recommendation-card:hover .recommendation-arrow {
    transform: translateX(4px);
    color: var(--accent-primary);
}

/* Settings Section */
.settings-section .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.settings-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.settings-card.danger {
    border-color: rgba(231, 76, 60, 0.3);
}

.settings-icon {
    font-size: var(--text-2xl);
}

.settings-info {
    flex: 1;
}

.settings-info h4 {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.settings-info p {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.settings-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.settings-btn.danger-btn:hover {
    background: var(--accent-danger);
    border-color: var(--accent-danger);
}

.import-label {
    display: inline-flex;
    cursor: pointer;
}

/* Edit Profile Modal */
#editProfileModal .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.edit-profile-container {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform var(--transition-smooth);
}

#editProfileModal.active .edit-profile-container {
    transform: scale(1);
}

.edit-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.edit-profile-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.edit-profile-content {
    padding: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.form-group input[type="text"] {
    width: 100%;
    padding: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.form-group input[type="text"]:focus {
    border-color: var(--accent-primary);
}

.avatar-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.avatar-option {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 24px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.avatar-option:hover {
    border-color: var(--border-light);
    transform: scale(1.05);
}

.avatar-option.active {
    border-color: var(--accent-primary);
    background: rgba(0, 212, 255, 0.1);
}

.edit-profile-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

.cancel-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.cancel-btn:hover {
    background: var(--bg-card-hover);
}

.save-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--bg-primary);
    transition: all var(--transition-fast);
}

.save-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* Reset Confirmation Modal */
.confirm-modal-container {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.confirm-icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
}

.confirm-modal-container h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.confirm-modal-container p {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-lg);
}

.confirm-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

.confirm-buttons .danger-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-danger);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: white;
}

/* Achievement Modal */
.achievement-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.achievement-modal.active {
    opacity: 1;
    visibility: visible;
}

.achievement-content {
    position: relative;
    text-align: center;
    padding: var(--space-2xl);
}

.achievement-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(243, 156, 18, 0.3) 0%, transparent 70%);
    animation: achievementGlow 2s ease-in-out infinite;
}

@keyframes achievementGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.achievement-badge {
    position: relative;
    font-size: 80px;
    animation: achievementBounce 0.6s ease-out;
}

@keyframes achievementBounce {
    0% { transform: scale(0) rotate(-180deg); }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.achievement-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--accent-warning);
    margin: var(--space-lg) 0 var(--space-sm);
}

.achievement-desc {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

.achievement-close {
    padding: var(--space-md) var(--space-2xl);
    background: var(--accent-warning);
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--bg-primary);
    transition: all var(--transition-fast);
}

.achievement-close:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.5);
}
/* ============================================
   24. THEME ANIMATIONS
   ============================================ */

/* ----------------------------------------
   THEME: TECTONIC (Plate Tectonics)
   ---------------------------------------- */
.theme-tectonic .theme-gradient {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1f1f 50%, #4a2020 100%);
}

.theme-tectonic .theme-particles .particle {
    background: radial-gradient(circle, #FF4444 0%, #FF6B35 100%);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

@keyframes tectonicFloat {
    0%, 100% { 
        transform: translateX(0) translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateX(15px) translateY(-10px) rotate(2deg); 
    }
    50% { 
        transform: translateX(-10px) translateY(15px) rotate(-1deg); 
    }
    75% { 
        transform: translateX(-15px) translateY(-5px) rotate(1deg); 
    }
}

.theme-tectonic .floating-plate {
    position: absolute;
    background: rgba(139, 69, 19, 0.3);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 20%;
    animation: tectonicFloat 20s ease-in-out infinite;
}

/* ----------------------------------------
   THEME: VOLCANIC
   ---------------------------------------- */
.theme-volcanic .theme-gradient {
    background: linear-gradient(135deg, #1a0505 0%, #3d0f0f 50%, #5a1010 100%);
}

.theme-volcanic .lava-bubble {
    position: absolute;
    bottom: -20px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #FF6B35 0%, #FF4444 50%, #8B0000 100%);
    border-radius: 50%;
    animation: lavaRise 4s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
}

@keyframes lavaRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-100px) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) scale(0.5);
        opacity: 0;
    }
}

.theme-volcanic .ember {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    animation: emberFloat 3s ease-out infinite;
}

@keyframes emberFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-150px) translateX(50px);
        opacity: 0;
    }
}

/* ----------------------------------------
   THEME: EARTHQUAKE
   ---------------------------------------- */
.theme-earthquake .theme-gradient {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #2d2d4a 100%);
}

@keyframes seismicWave {
    0%, 100% {
        transform: scaleX(1);
        opacity: 0.3;
    }
    50% {
        transform: scaleX(1.5);
        opacity: 0;
    }
}

.theme-earthquake .seismic-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #FFD93D 50%, transparent 100%);
    animation: seismicWave 2s ease-in-out infinite;
}

.theme-earthquake .crack {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 217, 61, 0.5) 50%, transparent 100%);
    animation: crackAppear 4s ease-in-out infinite;
}

@keyframes crackAppear {
    0%, 100% { opacity: 0; height: 0; }
    50% { opacity: 0.5; height: 100px; }
}

/* ----------------------------------------
   THEME: ATMOSPHERE
   ---------------------------------------- */
.theme-atmosphere .theme-gradient {
    background: linear-gradient(180deg, #000428 0%, #004e92 50%, #87CEEB 100%);
}

.theme-atmosphere .cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    filter: blur(5px);
    animation: cloudDrift 30s linear infinite;
}

@keyframes cloudDrift {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100vw); }
}

.theme-atmosphere .air-current {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: airFlow 8s linear infinite;
}

@keyframes airFlow {
    0% { transform: translateX(-100%) scaleX(0.5); opacity: 0; }
    50% { opacity: 0.5; }
    100% { transform: translateX(100vw) scaleX(1.5); opacity: 0; }
}

/* ----------------------------------------
   THEME: WIND
   ---------------------------------------- */
.theme-wind .theme-gradient {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

.theme-wind .wind-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(78, 205, 196, 0.6) 30%, rgba(78, 205, 196, 0.6) 70%, transparent 100%);
    animation: windFlow 3s linear infinite;
}

@keyframes windFlow {
    0% { 
        transform: translateX(-100%) scaleX(0.3); 
        opacity: 0; 
    }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { 
        transform: translateX(100vw) scaleX(1); 
        opacity: 0; 
    }
}

.theme-wind .leaf {
    position: absolute;
    font-size: 16px;
    animation: leafBlow 8s linear infinite;
}

@keyframes leafBlow {
    0% { 
        transform: translateX(-50px) translateY(0) rotate(0deg); 
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateX(100vw) translateY(100px) rotate(720deg); 
        opacity: 0;
    }
}

/* ----------------------------------------
   THEME: CYCLONE
   ---------------------------------------- */
.theme-cyclone .theme-gradient {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%);
}

.theme-cyclone .spiral {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(119, 141, 169, 0.3);
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    animation: spiralRotate 10s linear infinite;
}

@keyframes spiralRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.5); opacity: 0; }
    50% { opacity: 0.5; }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.5); opacity: 0; }
}

.theme-cyclone .raindrop {
    position: absolute;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, transparent 0%, rgba(119, 141, 169, 0.6) 100%);
    animation: rainFall 1s linear infinite;
}

@keyframes rainFall {
    0% { transform: translateY(-20px) rotate(15deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(15deg); opacity: 0.3; }
}

/* ----------------------------------------
   THEME: MONSOON
   ---------------------------------------- */
.theme-monsoon .theme-gradient {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #1f4068 100%);
}

.theme-monsoon .monsoon-drop {
    position: absolute;
    width: 3px;
    height: 20px;
    background: linear-gradient(to bottom, transparent 0%, #4da8da 100%);
    border-radius: 0 0 50% 50%;
    animation: monsoonRain 0.8s linear infinite;
}

@keyframes monsoonRain {
    0% { 
        transform: translateY(-30px); 
        opacity: 0; 
    }
    10% { opacity: 0.8; }
    100% { 
        transform: translateY(100vh); 
        opacity: 0; 
    }
}

.theme-monsoon .splash {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 10px;
    border: 2px solid rgba(77, 168, 218, 0.5);
    border-radius: 50%;
    border-top: none;
    animation: splashEffect 1.5s ease-out infinite;
}

@keyframes splashEffect {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* ----------------------------------------
   THEME: OCEAN
   ---------------------------------------- */
.theme-ocean .theme-gradient {
    background: linear-gradient(180deg, #0a1628 0%, #0d2137 50%, #1a4a6e 100%);
}

.theme-ocean .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='rgba(0,206,209,0.1)' d='M0,60 C300,120 600,0 900,60 C1200,120 1200,120 1200,120 L0,120 Z'/%3E%3C/svg%3E");
    background-size: 600px 100px;
    animation: oceanWave 10s linear infinite;
}

@keyframes oceanWave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-600px); }
}

.theme-ocean .bubble {
    position: absolute;
    bottom: -20px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    animation: bubbleRise 6s ease-in infinite;
}

@keyframes bubbleRise {
    0% { 
        transform: translateY(0) translateX(0) scale(0.5); 
        opacity: 0; 
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.5; }
    100% { 
        transform: translateY(-100vh) translateX(30px) scale(1.2); 
        opacity: 0; 
    }
}

/* ----------------------------------------
   THEME: OCEAN CURRENT
   ---------------------------------------- */
.theme-current .theme-gradient {
    background: linear-gradient(135deg, #0a192f 0%, #172a45 50%, #1f4068 100%);
}

.theme-current .current-line {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #64ffda 30%, #64ffda 70%, transparent 100%);
    border-radius: 50%;
    animation: currentFlow 5s ease-in-out infinite;
}

@keyframes currentFlow {
    0% { 
        transform: translateX(-100%) scaleX(0.5); 
        opacity: 0; 
    }
    30% { opacity: 0.6; }
    70% { opacity: 0.6; }
    100% { 
        transform: translateX(100vw) scaleX(1.5); 
        opacity: 0; 
    }
}

.theme-current .plankton {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(100, 255, 218, 0.5);
    border-radius: 50%;
    animation: planktonDrift 15s linear infinite;
}

@keyframes planktonDrift {
    0% { transform: translate(0, 0); }
    25% { transform: translate(50px, -30px); }
    50% { transform: translate(100px, 20px); }
    75% { transform: translate(50px, 50px); }
    100% { transform: translate(0, 0); }
}

/* ----------------------------------------
   THEME: TIDE
   ---------------------------------------- */
.theme-tide .theme-gradient {
    background: linear-gradient(180deg, #0d1b2a 0%, #1b3a4b 50%, #2d6a7a 100%);
}

.theme-tide .tide-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to top, rgba(72, 202, 228, 0.2) 0%, transparent 100%);
    animation: tideMotion 8s ease-in-out infinite;
}

@keyframes tideMotion {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-50px); }
}

/* ----------------------------------------
   THEME: SOIL
   ---------------------------------------- */
.theme-soil .theme-gradient {
    background: linear-gradient(180deg, #2d1f1f 0%, #4a3728 50%, #5d4e37 100%);
}

.theme-soil .soil-layer {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.3;
}

.theme-soil .soil-layer:nth-child(1) {
    top: 30%;
    background: #8B4513;
}

.theme-soil .soil-layer:nth-child(2) {
    top: 50%;
    background: #A0522D;
}

.theme-soil .soil-layer:nth-child(3) {
    top: 70%;
    background: #6B4423;
}

.theme-soil .root {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, #228B22 0%, #8B4513 100%);
    animation: rootGrow 10s ease-out infinite;
}

@keyframes rootGrow {
    0% { height: 0; opacity: 0; }
    50% { height: 100px; opacity: 0.5; }
    100% { height: 150px; opacity: 0; }
}

/* ----------------------------------------
   THEME: FOREST
   ---------------------------------------- */
.theme-forest .theme-gradient {
    background: linear-gradient(180deg, #0a1f0a 0%, #1a3a1a 50%, #2d5a2d 100%);
}

.theme-forest .falling-leaf {
    position: absolute;
    font-size: 20px;
    animation: leafFall 10s linear infinite;
}

@keyframes leafFall {
    0% { 
        transform: translateY(-50px) rotate(0deg) translateX(0); 
        opacity: 0;
    }
    10% { opacity: 1; }
    25% { 
        transform: translateY(25vh) rotate(90deg) translateX(30px); 
    }
    50% { 
        transform: translateY(50vh) rotate(180deg) translateX(-20px); 
    }
    75% { 
        transform: translateY(75vh) rotate(270deg) translateX(40px); 
    }
    90% { opacity: 0.8; }
    100% { 
        transform: translateY(100vh) rotate(360deg) translateX(0); 
        opacity: 0;
    }
}

.theme-forest .firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #FFFF00;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFFF00, 0 0 20px #FFFF00;
    animation: fireflyGlow 4s ease-in-out infinite;
}

@keyframes fireflyGlow {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    25% { opacity: 1; transform: translate(20px, -30px); }
    50% { opacity: 0.5; transform: translate(-10px, -50px); }
    75% { opacity: 1; transform: translate(30px, -20px); }
}

/* ----------------------------------------
   THEME: BIOME
   ---------------------------------------- */
.theme-biome .theme-gradient {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5a4a 100%);
}

.theme-biome .ecosystem-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(46, 204, 113, 0.3);
    border-radius: 50%;
    animation: ecosystemPulse 4s ease-in-out infinite;
}

@keyframes ecosystemPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(0.8); 
        opacity: 0.5; 
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0; 
    }
}

/* ----------------------------------------
   THEME: HIMALAYA
   ---------------------------------------- */
.theme-himalaya .theme-gradient {
    background: linear-gradient(180deg, #0a1628 0%, #1a3a5c 50%, #87CEEB 100%);
}

.theme-himalaya .snowflake {
    position: absolute;
    color: white;
    font-size: 12px;
    opacity: 0.8;
    animation: snowFall 8s linear infinite;
}

@keyframes snowFall {
    0% { 
        transform: translateY(-20px) rotate(0deg); 
        opacity: 0; 
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { 
        transform: translateY(100vh) rotate(360deg); 
        opacity: 0; 
    }
}

.theme-himalaya .ice-crystal {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(232, 244, 248, 0.3);
    transform: rotate(45deg);
    animation: crystalShimmer 5s ease-in-out infinite;
}

@keyframes crystalShimmer {
    0%, 100% { opacity: 0.2; transform: rotate(45deg) scale(1); }
    50% { opacity: 0.5; transform: rotate(45deg) scale(1.1); }
}

/* ----------------------------------------
   THEME: RIVER
   ---------------------------------------- */
.theme-river .theme-gradient {
    background: linear-gradient(135deg, #0d2137 0%, #1a4a6e 50%, #2d7d9a 100%);
}

.theme-river .river-flow {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #00B4D8 30%, #00B4D8 70%, transparent 100%);
    animation: riverFlow 3s linear infinite;
}

@keyframes riverFlow {
    0% { transform: translateX(-100%) scaleX(0.5); opacity: 0; }
    20% { opacity: 0.7; }
    80% { opacity: 0.7; }
    100% { transform: translateX(100vw) scaleX(1.2); opacity: 0; }
}

.theme-river .water-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------
   THEME: PLATEAU
   ---------------------------------------- */
.theme-plateau .theme-gradient {
    background: linear-gradient(135deg, #2d1f1f 0%, #5d4e37 50%, #8b7355 100%);
}

.theme-plateau .dust-mote {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(205, 133, 63, 0.5);
    border-radius: 50%;
    animation: dustFloat 20s linear infinite;
}

@keyframes dustFloat {
    0% { transform: translate(0, 0); }
    25% { transform: translate(100px, 50px); }
    50% { transform: translate(50px, 100px); }
    75% { transform: translate(-50px, 50px); }
    100% { transform: translate(0, 0); }
}

/* ----------------------------------------
   THEME: COASTAL
   ---------------------------------------- */
.theme-coastal .theme-gradient {
    background: linear-gradient(180deg, #87CEEB 0%, #48cae4 50%, #0077b6 100%);
}

.theme-coastal .beach-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 80px;
    background: linear-gradient(to top, rgba(255, 228, 181, 0.3) 0%, transparent 100%);
    animation: beachWave 6s ease-in-out infinite;
}

@keyframes beachWave {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-50px) translateY(-20px); }
}

/* ----------------------------------------
   THEME: DESERT
   ---------------------------------------- */
.theme-desert .theme-gradient {
    background: linear-gradient(180deg, #1a0f05 0%, #3d2817 50%, #c2a679 100%);
}

.theme-desert .heat-shimmer {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(237, 201, 175, 0.05) 50%, 
        transparent 100%
    );
    animation: heatShimmer 3s ease-in-out infinite;
}

@keyframes heatShimmer {
    0%, 100% { transform: scaleY(1); opacity: 0.3; }
    50% { transform: scaleY(1.02); opacity: 0.5; }
}

.theme-desert .sand-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #EDC9AF;
    border-radius: 50%;
    animation: sandBlow 5s linear infinite;
}

@keyframes sandBlow {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(200px, 50px); opacity: 0; }
}
/* ----------------------------------------
   THEME: AGRICULTURE
   ---------------------------------------- */
.theme-agriculture .theme-gradient {
    background: linear-gradient(180deg, #0a1f0a 0%, #2d5a2d 50%, #90EE90 100%);
}

.theme-agriculture .crop {
    position: absolute;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to top, #8B4513 0%, #228B22 30%, #32CD32 100%);
    border-radius: 2px 2px 0 0;
    animation: cropSway 4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes cropSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.theme-agriculture .seed {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #DAA520;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    animation: seedDrift 8s linear infinite;
}

@keyframes seedDrift {
    0% { 
        transform: translateY(-20px) rotate(-45deg); 
        opacity: 0; 
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { 
        transform: translateY(100vh) translateX(100px) rotate(315deg); 
        opacity: 0; 
    }
}

/* ----------------------------------------
   THEME: INDUSTRY
   ---------------------------------------- */
.theme-industry .theme-gradient {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 50%, #4a4a6a 100%);
}

.theme-industry .smoke {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(112, 128, 144, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: smokeRise 6s ease-out infinite;
}

@keyframes smokeRise {
    0% { 
        transform: translateY(0) scale(0.5); 
        opacity: 0.6; 
    }
    50% { 
        transform: translateY(-150px) scale(1.5) translateX(30px); 
        opacity: 0.3; 
    }
    100% { 
        transform: translateY(-300px) scale(2.5) translateX(-20px); 
        opacity: 0; 
    }
}

.theme-industry .gear {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(112, 128, 144, 0.3);
    border-radius: 50%;
    animation: gearRotate 10s linear infinite;
}

.theme-industry .gear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(112, 128, 144, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@keyframes gearRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----------------------------------------
   THEME: POPULATION
   ---------------------------------------- */
.theme-population .theme-gradient {
    background: linear-gradient(135deg, #1a0a20 0%, #2d1a3a 50%, #4a2a5a 100%);
}

.theme-population .dot-pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(155, 89, 182, 0.6);
    border-radius: 50%;
    animation: dotPulse 3s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.6;
        box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.4);
    }
    50% { 
        transform: scale(1.2); 
        opacity: 1;
        box-shadow: 0 0 20px 10px rgba(155, 89, 182, 0);
    }
}

.theme-population .connection-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(155, 89, 182, 0.4) 50%, transparent 100%);
    animation: connectionPulse 4s ease-in-out infinite;
}

@keyframes connectionPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* ----------------------------------------
   THEME: ENVIRONMENT
   ---------------------------------------- */
.theme-environment .theme-gradient {
    background: linear-gradient(135deg, #0a2f1a 0%, #1a5a3a 50%, #2d8a5a 100%);
}

.theme-environment .globe-rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(39, 174, 96, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(60deg);
    animation: globeRotate 20s linear infinite;
}

@keyframes globeRotate {
    0% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); }
    100% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); }
}

.theme-environment .green-leaf {
    position: absolute;
    font-size: 16px;
    animation: greenFloat 10s ease-in-out infinite;
}

@keyframes greenFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(10deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(20px) rotate(-10deg); }
}

/* ----------------------------------------
   THEME: CLIMATE CHANGE
   ---------------------------------------- */
.theme-climate_change .theme-gradient {
    background: linear-gradient(135deg, #1a0a0a 0%, #3d2020 50%, #5a3030 100%);
}

.theme-climate_change .warning-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 3px solid rgba(231, 76, 60, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: warningPulse 2s ease-in-out infinite;
}

@keyframes warningPulse {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.5;
        border-color: rgba(231, 76, 60, 0.5);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.3); 
        opacity: 0;
        border-color: rgba(231, 76, 60, 0);
    }
}

.theme-climate_change .smoke-rise {
    position: absolute;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(100, 100, 100, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: pollutionRise 4s ease-out infinite;
}

@keyframes pollutionRise {
    0% { 
        transform: translateY(0) scale(0.5); 
        opacity: 0.5; 
    }
    100% { 
        transform: translateY(-200px) scale(2); 
        opacity: 0; 
    }
}

/* ----------------------------------------
   THEME: MODELS (Theories)
   ---------------------------------------- */
.theme-models .theme-gradient {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 50%, #3d3d5c 100%);
}

.theme-models .grid-line {
    position: absolute;
    background: rgba(112, 128, 144, 0.1);
}

.theme-models .grid-line.horizontal {
    left: 0;
    right: 0;
    height: 1px;
}

.theme-models .grid-line.vertical {
    top: 0;
    bottom: 0;
    width: 1px;
}

.theme-models .data-point {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: dataPointPulse 3s ease-in-out infinite;
}

@keyframes dataPointPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* ============================================
   25. RESPONSIVE DESIGN
   ============================================ */

/* Extra Large Screens (1536px+) */
@media (min-width: 1536px) {
    .topics-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Screens (1280px - 1535px) */
@media (max-width: 1535px) {
    .topics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Medium-Large Screens (1024px - 1279px) */
@media (max-width: 1279px) {
    .topics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-card.large-card {
        grid-column: span 2;
    }
    
    .profile-card {
        min-width: auto;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    
    .profile-info {
        text-align: center;
    }
    
    .profile-stats-mini {
        justify-content: center;
    }
}

/* Tablets (768px - 1023px) */
@media (max-width: 1023px) {
    :root {
        --space-lg: 20px;
        --space-xl: 28px;
        --space-2xl: 40px;
    }
    
    .header-content {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .search-container {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
    }
    
    .topics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .modal-container {
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-nav {
        padding: 0 var(--space-md);
    }
    
    .nav-tab {
        padding: var(--space-sm) var(--space-md);
    }
    
    .tab-text {
        display: none;
    }
    
    .tab-icon {
        font-size: var(--text-xl);
    }
    
    .mindmap-canvas {
        height: 400px;
    }
    
    .memory-hooks-container,
    .concept-blocks-container,
    .diagrams-container {
        grid-template-columns: 1fr;
    }
    
    .trap-sections {
        grid-template-columns: 1fr;
    }
    
    .trap-arrow {
        display: none;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-card.large-card {
        grid-column: span 2;
    }
    
    .category-progress-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile Landscape & Small Tablets (640px - 767px) */
@media (max-width: 767px) {
    :root {
        --space-md: 12px;
        --space-lg: 16px;
        --space-xl: 24px;
    }
    
    .main-header {
        padding: var(--space-sm) var(--space-md);
    }
    
    .brand-text {
        display: none;
    }
    
    .logo-container {
        width: 40px;
        height: 40px;
    }
    
    .logo-icon {
        font-size: 24px;
    }
    
    .header-actions {
        gap: var(--space-sm);
    }
    
    .progress-indicator {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .header-btn {
        width: 36px;
        height: 36px;
    }
    
    .theme-toggle {
        width: 52px;
        height: 28px;
    }
    
    .toggle-slider {
        width: 20px;
        height: 20px;
    }
    
    [data-theme="light"] .toggle-slider {
        transform: translateX(-24px);
    }
    
    .category-nav {
        top: 57px;
        padding: var(--space-sm) 0;
    }
    
    .category-scroll-wrapper {
        padding: 0 var(--space-md);
    }
    
    .category-pill {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .pill-text {
        display: none;
    }
    
    .pill-count {
        display: none;
    }
    
    .filter-bar {
        padding: var(--space-sm) var(--space-md);
    }
    
    .filter-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    
    .filter-options {
        justify-content: space-between;
    }
    
    .main-content {
        padding: var(--space-md);
    }
    
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .stat-card {
        padding: var(--space-md);
    }
    
    .stat-icon {
        font-size: var(--text-2xl);
    }
    
    .stat-value {
        font-size: var(--text-xl);
    }
    
    .topics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .topic-card {
        padding: var(--space-md);
        border-radius: var(--radius-lg);
    }
    
    .card-icon-wrapper {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    
    .card-title {
        font-size: var(--text-base);
    }
    
    .card-subtitle {
        display: none;
    }
    
    .bookmarks-sidebar {
        width: 100%;
    }
    
    .modal-header {
        padding: var(--space-sm) var(--space-md);
    }
    
    .modal-back .back-text {
        display: none;
    }
    
    .modal-title {
        font-size: var(--text-lg);
    }
    
    .modal-badges {
        display: none;
    }
    
    .content-scroll {
        padding: var(--space-md);
    }
    
    .section-title {
        font-size: var(--text-xl);
    }
    
    .mindmap-canvas {
        height: 350px;
    }
    
    .mindmap-central {
        min-width: 100px;
        min-height: 100px;
        padding: var(--space-md);
    }
    
    .central-text {
        font-size: var(--text-base);
        max-width: 80px;
    }
    
    .revision-box {
        padding: var(--space-lg);
    }
    
    .revision-title {
        font-size: var(--text-xl);
    }
    
    .pyq-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .pyq-year {
        width: 48px;
        height: 48px;
        font-size: var(--text-base);
    }
    
    /* Profile Page Mobile */
    .profile-card {
        flex-direction: column;
        padding: var(--space-lg);
    }
    
    .profile-avatar {
        width: 80px;
        height: 80px;
    }
    
    .avatar-icon {
        font-size: 36px;
    }
    
    .profile-name {
        font-size: var(--text-xl);
    }
    
    .profile-stats-mini {
        flex-wrap: wrap;
        gap: var(--space-md);
    }
    
    .mini-divider {
        display: none;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card.large-card {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .progress-circle-large {
        width: 150px;
        height: 150px;
    }
    
    .progress-percent {
        font-size: var(--text-3xl);
    }
    
    .streak-number {
        font-size: var(--text-4xl);
    }
    
    .achievements-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .achievement-badge {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
        bottom: var(--space-md);
    }
    
    .toast {
        min-width: auto;
        width: 100%;
    }
}

/* Mobile Portrait (up to 639px) */
@media (max-width: 639px) {
    .topics-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-overview {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-options {
        flex-wrap: wrap;
    }
    
    .filter-dropdown {
        flex: 1;
        min-width: calc(50% - var(--space-xs));
    }
    
    .filter-btn {
        width: 100%;
        justify-content: space-between;
    }
    
    .view-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .scroll-top-btn {
        width: 40px;
        height: 40px;
        bottom: var(--space-md);
        left: var(--space-md);
    }
    
    .shortcuts-content {
        padding: var(--space-lg);
    }
    
    .shortcut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* Very Small Screens (up to 374px) */
@media (max-width: 374px) {
    :root {
        --text-base: 0.875rem;
        --text-lg: 1rem;
        --text-xl: 1.125rem;
        --text-2xl: 1.25rem;
    }
    
    .stats-overview {
        grid-template-columns: 1fr;
    }
    
    .topic-card {
        padding: var(--space-sm);
    }
    
    .card-footer {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .card-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* Landscape Mode Fix */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-container {
        max-height: 100vh;
    }
    
    .content-scroll {
        padding: var(--space-sm) var(--space-md);
    }
    
    .mindmap-canvas {
        height: 250px;
    }
}

/* Print Styles */
@media print {
    .animated-background,
    .modal-overlay,
    .bookmarks-sidebar,
    .toast-container,
    .scroll-top-btn,
    .main-header,
    .category-nav,
    .filter-bar,
    .main-footer {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .topic-card {
        break-inside: avoid;
        border: 1px solid #ccc;
    }
}

/* ============================================
   26. UTILITY CLASSES
   ============================================ */

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flex Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* Alignment */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Spacing */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Z-Index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Transitions */
.transition-none { transition: none; }
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-smooth { transition: all var(--transition-smooth); }

/* Transforms */
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-0 { transform: rotate(0deg); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }
.rotate-270 { transform: rotate(270deg); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* User Select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Text */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-primary); }
.text-success { color: var(--accent-success); }
.text-warning { color: var(--accent-warning); }
.text-danger { color: var(--accent-danger); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-card { background-color: var(--bg-card); }
.bg-glass { background-color: var(--bg-glass); }

/* Shadows */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* Animation Utilities */
.animate-none { animation: none; }
.animate-spin { animation: spinClockwise 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

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

.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus Ring */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --border-subtle: rgba(255, 255, 255, 0.3);
        --border-light: rgba(255, 255, 255, 0.5);
        --text-secondary: rgba(255, 255, 255, 0.9);
    }
    
    .topic-card,
    .stat-card,
    .concept-block,
    .memory-hook-card {
        border-width: 2px;
    }
}

/* Dark Mode System Preference (if not using manual toggle) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        /* Light mode variables can be applied here */
    }
}|
/* ============================================
   FIX: SCROLL & OVERFLOW ISSUES
   ============================================ */

/* FIX: Category Navigation Scroll Buttons */
.category-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.category-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 8px 40px;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: bold;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    opacity: 0.9;
}

.scroll-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    transform: translateY(-50%) scale(1.1);
}

.scroll-btn.scroll-left {
    left: 0;
}

.scroll-btn.scroll-right {
    right: 0;
}

/* FIX: Modal Content Overflow */
.modal-container {
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    height: 95vh;
}

.modal-header {
    flex-shrink: 0;
}

.modal-nav {
    flex-shrink: 0;
    overflow-x: auto;
}

.modal-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0; /* Important for flex children */
}

.content-scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-xl);
    scroll-behavior: smooth;
}

.modal-footer {
    flex-shrink: 0;
}

/* FIX: Mind Map Container */
.mindmap-container {
    position: relative;
    width: 100%;
    min-height: 450px;
    max-height: 550px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.mindmap-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 450px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

/* FIX: Concept Blocks Scrollable */
.concept-blocks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    width: 100%;
}

/* FIX: Memory Hooks Container */
.memory-hooks-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    width: 100%;
}

/* FIX: Quick Facts Container */
.quick-facts-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

/* FIX: All Section Containers Full Width */
.content-section {
    width: 100%;
    padding-bottom: var(--space-2xl);
}

.content-section.active {
    display: block;
}

/* FIX: Diagrams Container */
.diagrams-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);
    width: 100%;
}

/* FIX: Traps Container */
.traps-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

/* FIX: Revision Container */
.revision-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* FIX: PYQs Container */
.pyqs-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

/* FIX: Section Headers */
.section-header {
    margin-bottom: var(--space-xl);
    text-align: center;
    width: 100%;
}

/* FIX: Mobile Scroll */
@media (max-width: 768px) {
    .content-scroll {
        padding: var(--space-md);
    }
    
    .mindmap-container {
        min-height: 350px;
        max-height: 400px;
    }
    
    .mindmap-canvas {
        min-height: 350px;
        padding: 40px 20px;
    }
    
    .concept-blocks-container,
    .memory-hooks-container,
    .diagrams-container {
        grid-template-columns: 1fr;
    }
    
    .modal-container {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* FIX: Ensure scrollbar appears when needed */
.content-scroll::-webkit-scrollbar {
    width: 8px;
}

.content-scroll::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.content-scroll::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

.content-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* FIX: Mind Map Scroll */
.mindmap-canvas::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mindmap-canvas::-webkit-scrollbar-track {
    background: transparent;
}

.mindmap-canvas::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}