/*
================================================================================
PROFINS XXIV - Component Library 2025 - REFACTORED & ORGANIZED
Organismo Judicial de Guatemala
Sistema de Diseño Completo con Paletas Personalizables y Parametrización
Versión: 2.1 (refactored and cleaned)
URL: https://legaltech.com.gt/themeoj/styles.css
================================================================================

TABLE OF CONTENTS:
================================================================================
I.    ROOT VARIABLES & THEME DEFINITIONS
II.   THEME SWITCHING CLASSES
III.  GLOBAL RESET & BASE STYLES
IV.   TYPOGRAPHY SYSTEM
V.    LAYOUT SYSTEM
VI.   CORE NAVIGATION & STRUCTURE
VII.  UI COMPONENTS
VIII. UTILITY CLASSES
IX.   ANIMATIONS & EFFECTS
X.    RESPONSIVE STYLES
XI.   DARK MODE STYLES
XII.  PRINT STYLES
XIII. ACCESSIBILITY ENHANCEMENTS
XIV.  SPECIALIZED COMPONENTS
XV.   CORRECTIONS & OVERRIDES
XVI. CREATIVE & ADVANCED COMPONENTS     
XVII. ADVANCED ANIMATIONS & MICRO-INTERACTIONS
XVIII. PREMIUM NOTIFICATION SYSTEM
XIX. INTELLIGENT FORM COMPONENTS
XX. ADVANCED TOOLTIP SYSTEM
XXI. INTELLIGENT TABLE COMPONENTS
XXII. ANIMATED GRADIENT EFFECTS
XXIII. ADVANCED DASHBOARD COMPONENTS
XXIV. GAMIFICATION COMPONENTS
XXV. PARTICLE EFFECTS & CSS PHYSICS  
XXVI. PWA & MOBILE-FIRST COMPONENTS
XXVII. PERFORMANCE OPTIMIZATIONS & FINAL UTILITIES


================================================================================
*/

/* ============================================================================ */
/* I. ROOT VARIABLES & THEME DEFINITIONS                                      */
/* ============================================================================ */
:root {
    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ================ SUPER TYPOGRAPHY SYSTEM ================ */
    --font-classic-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-classic-secondary: Georgia, "Times New Roman", Times, serif;
    --font-classic-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    --font-modern-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-modern-secondary: 'Lexend Deca', 'Inter', sans-serif;
    --font-modern-mono: 'JetBrains Mono', 'Fira Code', "SFMono-Regular", Consolas, monospace;

    /* Dynamic Typography Variables */
    --current-font-primary: var(--font-classic-primary);
    --current-font-secondary: var(--font-classic-secondary);
    --current-font-mono: var(--font-classic-mono);

    /* ================ ENHANCED SPACING SYSTEM ================ */
    --space-px: 1px;
    --space-0: 0;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;
    --space-72: 18rem;
    --space-80: 20rem;
    --space-96: 24rem;

    /* ================ ADVANCED RADIUS SYSTEM ================ */
    --radius-none: 0;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --radius-full: 9999px;

    /* ================ ENHANCED SHADOW SYSTEM ================ */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-none: 0 0 #0000;

    /* Colored Shadows for Interactive Elements */
    --shadow-primary-sm: 0 1px 3px 0 rgba(59, 130, 246, 0.2), 0 1px 2px 0 rgba(59, 130, 246, 0.12);
    --shadow-primary-md: 0 4px 6px -1px rgba(59, 130, 246, 0.2), 0 2px 4px -1px rgba(59, 130, 246, 0.12);
    --shadow-primary-lg: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);

    /* ================ ENHANCED TRANSITIONS ================ */
    --transition-none: none;
    --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Specialized Transitions */
    --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ================ ENHANCED Z-INDEX SYSTEM ================ */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
    --z-max: 2147483647;

    /* ================ LAYOUT GRID ENHANCEMENTS ================ */
    --grid-cols-1: repeat(1, minmax(0, 1fr));
    --grid-cols-2: repeat(2, minmax(0, 1fr));
    --grid-cols-3: repeat(3, minmax(0, 1fr));
    --grid-cols-4: repeat(4, minmax(0, 1fr));
    --grid-cols-5: repeat(5, minmax(0, 1fr));
    --grid-cols-6: repeat(6, minmax(0, 1fr));
    --grid-cols-7: repeat(7, minmax(0, 1fr));
    --grid-cols-8: repeat(8, minmax(0, 1fr));
    --grid-cols-9: repeat(9, minmax(0, 1fr));
    --grid-cols-10: repeat(10, minmax(0, 1fr));
    --grid-cols-11: repeat(11, minmax(0, 1fr));
    --grid-cols-12: repeat(12, minmax(0, 1fr));
    --grid-cols-auto: repeat(auto-fit, minmax(0, 1fr));
    --grid-cols-subgrid: subgrid;

    /* ================ ENHANCED COLOR PALETTE ================ */
    /* Semantic Colors with Extended Variants */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;
    --success-950: #052e16;

    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;
    --warning-950: #451a03;

    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    --danger-950: #450a0a;

    --info-50: #f0f9ff;
    --info-100: #e0f2fe;
    --info-200: #bae6fd;
    --info-300: #7dd3fc;
    --info-400: #38bdf8;
    --info-500: #0ea5e9;
    --info-600: #0284c7;
    --info-700: #0369a1;
    --info-800: #075985;
    --info-900: #0c4a6e;
    --info-950: #082f49;

    

    /* Base Palette (Header/Footer Consistency) */
    --base-primary-50: #eff6ff;
    --base-primary-100: #dbeafe;
    --base-primary-200: #bfdbfe;
    --base-primary-300: #93c5fd;
    --base-primary-400: #60a5fa;
    --base-primary-500: #3b82f6;
    --base-primary-600: #2563eb;
    --base-primary-700: #1d4ed8;
    --base-primary-800: #1e40af;
    --base-primary-900: #1e3a8a;

    /* Visual Theme Palettes */
    --theme-1-primary: #3b82f6; --theme-1-secondary: #1e40af; --theme-1-accent: #60a5fa;
    --theme-1-bg-color: #eff6ff; --theme-1-bg-gradient: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --theme-1-image-default: url('https://legaltech.com.gt/themeoj/img/1.png');

    --theme-2-primary: #10b981; --theme-2-secondary: #047857; --theme-2-accent: #34d399;
    --theme-2-bg-color: #f0fdf4; --theme-2-bg-gradient: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --theme-2-image-default: url('https://legaltech.com.gt/themeoj/img/2.png');

    --theme-3-primary: #f59e0b; --theme-3-secondary: #d97706; --theme-3-accent: #fbbf24;
    --theme-3-bg-color: #fffbeb; --theme-3-bg-gradient: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --theme-3-image-default: url('https://legaltech.com.gt/themeoj/img/3.png');

    --theme-4-primary: #ef4444; --theme-4-secondary: #dc2626; --theme-4-accent: #f87171;
    --theme-4-bg-color: #fef2f2; --theme-4-bg-gradient: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    --theme-4-image-default: url('https://legaltech.com.gt/themeoj/img/4.png');

    --theme-5-primary: #8b5cf6; --theme-5-secondary: #7c3aed; --theme-5-accent: #a78bfa;
    --theme-5-bg-color: #f5f3ff; --theme-5-bg-gradient: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    --theme-5-image-default: url('https://legaltech.com.gt/themeoj/img/5.png');

    --theme-6-primary: #06b6d4; --theme-6-secondary: #0891b2; --theme-6-accent: #22d3ee;
    --theme-6-bg-color: #ecfeff; --theme-6-bg-gradient: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    --theme-6-image-default: url('https://legaltech.com.gt/themeoj/img/6.png');

    --theme-7-primary: #f97316; --theme-7-secondary: #ea580c; --theme-7-accent: #fb923c;
    --theme-7-bg-color: #fff7ed; --theme-7-bg-gradient: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    --theme-7-image-default: url('https://legaltech.com.gt/themeoj/img/7.png');

    --theme-8-primary: #ec4899; --theme-8-secondary: #be185d; --theme-8-accent: #f472b6;
    --theme-8-bg-color: #fdf2f8; --theme-8-bg-gradient: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    --theme-8-image-default: url('https://legaltech.com.gt/themeoj/img/8.png');

    --theme-9-primary: #84cc16; --theme-9-secondary: #65a30d; --theme-9-accent: #a3e635;
    --theme-9-bg-color: #f7fee7; --theme-9-bg-gradient: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
    --theme-9-image-default: url('https://legaltech.com.gt/themeoj/img/9.png');

    --theme-10-primary: #64748b; --theme-10-secondary: #475569; --theme-10-accent: #94a3b8;
    --theme-10-bg-color: #f8fafc; --theme-10-bg-gradient: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --theme-10-image-default: url('https://legaltech.com.gt/themeoj/img/10.png');

    /* Dynamic Variables (Updated by JS) */
    --current-primary: var(--theme-1-primary);
    --current-secondary: var(--theme-1-secondary);
    --current-accent: var(--theme-1-accent);
    --current-bg-gradient: var(--theme-1-bg-gradient);
    --current-bg-color: var(--theme-1-bg-color);
    --current-image: var(--theme-1-image-default);
    --image-override-url: none;

    /* Semantic Colors */
    --success-500: #10b981; --success-600: #059669; --success-100: #d1fae5;
    --warning-500: #f59e0b; --warning-600: #d97706; --warning-100: #fef3c7;
    --danger-500: #ef4444; --danger-600: #dc2626; --danger-100: #fee2e2;
    --info-500: #3b82f6; --info-600: #2563eb; --info-100: #dbeafe;

    /* Neutral Colors */
    --neutral-0: #ffffff;
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* Typography */
    --font-display: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', Consolas, 'Courier New', monospace;
    --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; --text-6xl: 3.75rem;

    /* Spacing Scale */
    --space-px: 1px; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
    --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem;
    --space-9: 2.25rem; --space-10: 2.5rem; --space-11: 2.75rem; --space-12: 3rem;
    --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
    --space-28: 7rem; --space-32: 8rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-primary-colored: 0 4px 14px 0 rgba(59, 130, 246, 0.15);
    --shadow-emerald-colored: 0 4px 14px 0 rgba(16, 185, 129, 0.15);
    --shadow-amber-colored: 0 4px 14px 0 rgba(245, 158, 11, 0.15);
    --shadow-rose-colored: 0 4px 14px 0 rgba(244, 63, 94, 0.15);
    --shadow-purple-colored: 0 4px 14px 0 rgba(139, 92, 246, 0.15);
    --shadow-cyan-colored: 0 4px 14px 0 rgba(6, 182, 212, 0.15);
    --shadow-theme-colored: var(--shadow-primary-colored);

    /* Border Radius */
    --radius-none: 0; --radius-sm: 0.125rem; --radius-base: 0.25rem; --radius-md: 0.375rem;
    --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Special Effects & Gradients */
    --gradient-primary: linear-gradient(135deg, var(--current-primary) 0%, var(--current-secondary) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--neutral-100) 0%, var(--neutral-200) 100%);
    --gradient-success: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-600) 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger-500) 0%, var(--danger-600) 100%);
    --gradient-info: linear-gradient(135deg, var(--info-500) 0%, var(--info-600) 100%);
    --gradient-rainbow: linear-gradient(135deg, var(--base-primary-500) 0%, var(--theme-5-primary) 25%, var(--success-500) 50%, var(--warning-500) 75%, var(--danger-500) 100%);
    --gradient-subtle: linear-gradient(135deg, var(--neutral-0) 0%, var(--neutral-50) 100%);
    --backdrop-blur: blur(12px) saturate(180%);

    /* Z-Index Scale */
    --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030;
    --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080;
    --z-sidebar-mobile: 1045; --z-sidebar-overlay-mobile: 1044;
}

/* ============================================================================ */
/* II. THEME SWITCHING CLASSES                                                */
/* ============================================================================ */
.visual-theme-1 {
    --current-primary: var(--theme-1-primary); --current-secondary: var(--theme-1-secondary);
    --current-accent: var(--theme-1-accent); --current-bg-gradient: var(--theme-1-bg-gradient);
    --current-bg-color: var(--theme-1-bg-color); --current-image: var(--theme-1-image-default);
    --shadow-theme-colored: var(--shadow-primary-colored);
}
.visual-theme-2 {
    --current-primary: var(--theme-2-primary); --current-secondary: var(--theme-2-secondary);
    --current-accent: var(--theme-2-accent); --current-bg-gradient: var(--theme-2-bg-gradient);
    --current-bg-color: var(--theme-2-bg-color); --current-image: var(--theme-2-image-default);
    --shadow-theme-colored: var(--shadow-emerald-colored);
}
.visual-theme-3 {
    --current-primary: var(--theme-3-primary); --current-secondary: var(--theme-3-secondary);
    --current-accent: var(--theme-3-accent); --current-bg-gradient: var(--theme-3-bg-gradient);
    --current-bg-color: var(--theme-3-bg-color); --current-image: var(--theme-3-image-default);
    --shadow-theme-colored: var(--shadow-amber-colored);
}
.visual-theme-4 {
    --current-primary: var(--theme-4-primary); --current-secondary: var(--theme-4-secondary);
    --current-accent: var(--theme-4-accent); --current-bg-gradient: var(--theme-4-bg-gradient);
    --current-bg-color: var(--theme-4-bg-color); --current-image: var(--theme-4-image-default);
    --shadow-theme-colored: var(--shadow-rose-colored);
}
.visual-theme-5 {
    --current-primary: var(--theme-5-primary); --current-secondary: var(--theme-5-secondary);
    --current-accent: var(--theme-5-accent); --current-bg-gradient: var(--theme-5-bg-gradient);
    --current-bg-color: var(--theme-5-bg-color); --current-image: var(--theme-5-image-default);
    --shadow-theme-colored: var(--shadow-purple-colored);
}
.visual-theme-6 {
    --current-primary: var(--theme-6-primary); --current-secondary: var(--theme-6-secondary);
    --current-accent: var(--theme-6-accent); --current-bg-gradient: var(--theme-6-bg-gradient);
    --current-bg-color: var(--theme-6-bg-color); --current-image: var(--theme-6-image-default);
    --shadow-theme-colored: var(--shadow-cyan-colored);
}
.visual-theme-7 {
    --current-primary: var(--theme-7-primary); --current-secondary: var(--theme-7-secondary);
    --current-accent: var(--theme-7-accent); --current-bg-gradient: var(--theme-7-bg-gradient);
    --current-bg-color: var(--theme-7-bg-color); --current-image: var(--theme-7-image-default);
    --shadow-theme-colored: 0 4px 14px 0 rgba(249, 115, 22, 0.15);
}
.visual-theme-8 {
    --current-primary: var(--theme-8-primary); --current-secondary: var(--theme-8-secondary);
    --current-accent: var(--theme-8-accent); --current-bg-gradient: var(--theme-8-bg-gradient);
    --current-bg-color: var(--theme-8-bg-color); --current-image: var(--theme-8-image-default);
    --shadow-theme-colored: 0 4px 14px 0 rgba(236, 72, 153, 0.15);
}
.visual-theme-9 {
    --current-primary: var(--theme-9-primary); --current-secondary: var(--theme-9-secondary);
    --current-accent: var(--theme-9-accent); --current-bg-gradient: var(--theme-9-bg-gradient);
    --current-bg-color: var(--theme-9-bg-color); --current-image: var(--theme-9-image-default);
    --shadow-theme-colored: 0 4px 14px 0 rgba(132, 204, 22, 0.15);
}
.visual-theme-10 {
    --current-primary: var(--theme-10-primary); --current-secondary: var(--theme-10-secondary);
    --current-accent: var(--theme-10-accent); --current-bg-gradient: var(--theme-10-bg-gradient);
    --current-bg-color: var(--theme-10-bg-color); --current-image: var(--theme-10-image-default);
    --shadow-theme-colored: 0 4px 14px 0 rgba(100, 116, 139, 0.15);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--neutral-700);
    background-color: var(--neutral-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

/* Sidebar mobile overlay */
body.sidebar-mobile-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-sidebar-overlay-mobile);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

body.sidebar-mobile-open.sidebar-overlay-active::before {
    opacity: 1;
    visibility: visible;
}

/* ============================================================================ */
/* IV. SUPER ENHANCED TYPOGRAPHY SYSTEM                                       */
/* ============================================================================ */

/* Font Loading & Performance */
@font-display: swap;

/* Enhanced Base Typography */
body, input, textarea, select, button {
    font-family: var(--current-font-primary);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "cv02" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    font-variation-settings: "slnt" 0;
}

/* Enhanced Headings */
h1, h2, h3, h4, h5, h6, .heading {
    font-family: var(--current-font-secondary);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4) 0;
    color: var(--neutral-900);
    text-wrap: balance;
    scroll-margin-top: var(--space-16);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .heading {
    color: var(--neutral-50);
}

/* Typography Scale - Responsive & Comprehensive */
.text-xs { 
    font-size: 0.75rem; 
    line-height: 1rem; 
    letter-spacing: 0.025em;
}
.text-sm { 
    font-size: 0.875rem; 
    line-height: 1.25rem; 
    letter-spacing: 0.01em;
}
.text-base { 
    font-size: 1rem; 
    line-height: 1.5rem; 
    letter-spacing: 0;
}
.text-lg { 
    font-size: 1.125rem; 
    line-height: 1.75rem; 
    letter-spacing: -0.01em;
}
.text-xl { 
    font-size: 1.25rem; 
    line-height: 1.75rem; 
    letter-spacing: -0.015em;
}
.text-2xl { 
    font-size: 1.5rem; 
    line-height: 2rem; 
    letter-spacing: -0.02em;
}
.text-3xl { 
    font-size: 1.875rem; 
    line-height: 2.25rem; 
    letter-spacing: -0.025em;
}
.text-4xl { 
    font-size: 2.25rem; 
    line-height: 2.5rem; 
    letter-spacing: -0.03em;
}
.text-5xl { 
    font-size: 3rem; 
    line-height: 1; 
    letter-spacing: -0.035em;
}
.text-6xl { 
    font-size: 3.75rem; 
    line-height: 1; 
    letter-spacing: -0.04em;
}
.text-7xl { 
    font-size: 4.5rem; 
    line-height: 1; 
    letter-spacing: -0.045em;
}
.text-8xl { 
    font-size: 6rem; 
    line-height: 1; 
    letter-spacing: -0.05em;
}
.text-9xl { 
    font-size: 8rem; 
    line-height: 1; 
    letter-spacing: -0.055em;
}

/* Enhanced Heading Sizes with Responsive Scaling */
h1, .h1 { 
    font-size: clamp(2rem, 4vw + 1rem, 3rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.035em;
}
h2, .h2 { 
    font-size: clamp(1.75rem, 3vw + 1rem, 2.25rem);
    line-height: 1.15;
    font-weight: 650;
    letter-spacing: -0.03em;
}
h3, .h3 { 
    font-size: clamp(1.5rem, 2.5vw + 1rem, 1.875rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.025em;
}
h4, .h4 { 
    font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}
h5, .h5 { 
    font-size: clamp(1.125rem, 1.5vw + 1rem, 1.25rem);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.015em;
}
h6, .h6 { 
    font-size: clamp(1rem, 1vw + 1rem, 1.125rem);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Advanced Typography Utilities */
.font-primary { font-family: var(--current-font-primary); }
.font-secondary { font-family: var(--current-font-secondary); }
.font-mono { font-family: var(--current-font-mono); }

/* Extended Font Weights */
.font-thin { font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* Enhanced Text Styling */
.italic { font-style: italic; }
.not-italic { font-style: normal; }
.oblique { font-style: oblique; }

/* Advanced Line Heights */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
.leading-3 { line-height: .75rem; }
.leading-4 { line-height: 1rem; }
.leading-5 { line-height: 1.25rem; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-9 { line-height: 2.25rem; }
.leading-10 { line-height: 2.5rem; }

/* Advanced Letter Spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

/* Text Decoration */
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

.decoration-solid { text-decoration-style: solid; }
.decoration-double { text-decoration-style: double; }
.decoration-dotted { text-decoration-style: dotted; }
.decoration-dashed { text-decoration-style: dashed; }
.decoration-wavy { text-decoration-style: wavy; }

.decoration-auto { text-decoration-thickness: auto; }
.decoration-from-font { text-decoration-thickness: from-font; }
.decoration-0 { text-decoration-thickness: 0px; }
.decoration-1 { text-decoration-thickness: 1px; }
.decoration-2 { text-decoration-thickness: 2px; }
.decoration-4 { text-decoration-thickness: 4px; }
.decoration-8 { text-decoration-thickness: 8px; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-start { text-align: start; }
.text-end { text-align: end; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Overflow */
.truncate { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
.text-ellipsis { text-overflow: ellipsis; }
.text-clip { text-overflow: clip; }

/* Advanced Text Wrapping */
.text-wrap { text-wrap: wrap; }
.text-nowrap { text-wrap: nowrap; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Enhanced Code & Preformatted Text */
code, pre, .code {
    font-family: var(--current-font-mono);
    font-feature-settings: "kern" 0, "liga" 0, "calt" 0;
    font-variant-ligatures: none;
}

code {
    font-size: 0.875em;
    padding: 0.125em 0.375em;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    color: var(--neutral-800);
    font-weight: 500;
}

.dark code {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
    color: var(--neutral-200);
}

pre {
    padding: var(--space-4);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    line-height: 1.5;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.dark pre {
    background: var(--neutral-900);
    border-color: var(--neutral-700);
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* Enhanced Blockquotes */
blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--current-primary);
    background: var(--neutral-50);
    font-style: italic;
    position: relative;
}

.dark blockquote {
    background: var(--neutral-900);
    border-left-color: var(--current-accent);
}

blockquote::before {
    content: '"';
    font-size: 3rem;
    color: var(--current-primary);
    position: absolute;
    top: -0.5rem;
    left: var(--space-4);
    font-family: Georgia, serif;
}

blockquote p {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.6;
}

blockquote footer {
    margin-top: var(--space-2);
    font-style: normal;
    font-size: 0.875rem;
    color: var(--neutral-600);
}

.dark blockquote footer {
    color: var(--neutral-400);
}

blockquote footer::before {
    content: '— ';
}

/* Lists Enhancement */
ul, ol {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

ul li, ol li {
    margin: var(--space-1) 0;
    line-height: 1.6;
}

ul li::marker {
    color: var(--current-primary);
}

ol li::marker {
    color: var(--current-primary);
    font-weight: 600;
}

/* Definition Lists */
dl {
    margin: var(--space-4) 0;
}

dt {
    font-weight: 600;
    color: var(--neutral-900);
    margin-top: var(--space-4);
}

.dark dt {
    color: var(--neutral-100);
}

dd {
    margin: var(--space-1) 0 var(--space-4) var(--space-4);
    color: var(--neutral-700);
}

.dark dd {
    color: var(--neutral-300);
}

/* Links Enhancement */
a {
    color: var(--current-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: var(--transition-colors);
}

a:hover {
    text-decoration-color: currentColor;
    color: var(--current-secondary);
}

a:focus {
    outline: 2px solid var(--current-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Text Color Utilities */
.text-inherit { color: inherit; }
.text-current { color: currentColor; }
.text-transparent { color: transparent; }
.text-primary { color: var(--current-primary); }
.text-secondary { color: var(--current-secondary); }
.text-accent { color: var(--current-accent); }
.text-success { color: var(--success-600); }
.text-warning { color: var(--warning-600); }
.text-danger { color: var(--danger-600); }
.text-info { color: var(--info-600); }

/* Neutral Text Colors */
.text-neutral-50 { color: var(--neutral-50); }
.text-neutral-100 { color: var(--neutral-100); }
.text-neutral-200 { color: var(--neutral-200); }
.text-neutral-300 { color: var(--neutral-300); }
.text-neutral-400 { color: var(--neutral-400); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-800 { color: var(--neutral-800); }
.text-neutral-900 { color: var(--neutral-900); }
.text-neutral-950 { color: var(--neutral-950); }

/* Text Utilities for Dark Mode */
.text-muted { 
    color: var(--neutral-600); 
}
.dark .text-muted { 
    color: var(--neutral-400); 
}

.text-subtle { 
    color: var(--neutral-500); 
}
.dark .text-subtle { 
    color: var(--neutral-500); 
}

/* Special Typography Features */
.text-gradient {
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.text-shadow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.text-shadow-md { text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.text-shadow-lg { text-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.text-shadow-none { text-shadow: none; }

/* Reading Experience Enhancements */
.prose {
    max-width: 65ch;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 1.125rem;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.prose p {
    margin: var(--space-4) 0;
}

.prose img {
    margin: var(--space-6) 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.prose figure {
    margin: var(--space-8) 0;
}

.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--neutral-600);
    margin-top: var(--space-2);
}

.dark .prose figcaption {
    color: var(--neutral-400);
}

/* WYSIWYG Content */
.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
    margin-top: var(--space-6);
}

.wysiwyg-content p { margin-bottom: var(--space-4); }

.wysiwyg-content ul,
.wysiwyg-content ol {
    margin-left: var(--space-5);
    margin-bottom: var(--space-4);
}

.wysiwyg-content li { margin-bottom: var(--space-2); }

.wysiwyg-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--space-4) 0;
}

.wysiwyg-content figure { margin: var(--space-4) 0; }

.wysiwyg-content figcaption {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    text-align: center;
    margin-top: var(--space-2);
}

.wysiwyg-content table {
    width: 100%;
    margin-bottom: var(--space-4);
    border-collapse: collapse;
}

.wysiwyg-content th,
.wysiwyg-content td {
    border: 1px solid var(--neutral-300);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.wysiwyg-content thead th {
    background-color: var(--neutral-100);
}

/* ============================================================================ */
/* V. LAYOUT SYSTEM                                                           */
/* ============================================================================ */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    box-sizing: border-box;
}

.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }
.container-2xl { max-width: 1536px; }
.container-fluid { max-width: none; }

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.col {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
    padding: 0 var(--space-3);
    margin-bottom: var(--space-6);
    min-width: 0;
    box-sizing: border-box;
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* ============================================================================ */
/* VI. CORE NAVIGATION & STRUCTURE                                            */
/* ============================================================================ */

/* Site Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-sm);
    height: 4rem;
    display: flex;
    align-items: center;
    transition: left var(--transition-base), right var(--transition-base), width var(--transition-base);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-4);
    min-height: 4rem;
    width: 100%;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.logo-img {
    height: 2.2rem;
    width: auto;
    transition: transform var(--transition-fast);
}

.logo-img:hover {
    transform: scale(1.05);
}

.logo-text-container {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text-main {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--base-primary-700);
    letter-spacing: -0.025em;
}

.logo-text-subtitle {
    font-family: var(--font-body);
    color: var(--neutral-600);
    font-weight: 500;
    margin-top: 2px;
    font-size: 0.6rem;
    line-height: 1.1;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--neutral-600);
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.header-btn:hover {
    background-color: var(--neutral-100);
    color: var(--base-primary-600);
    transform: translateY(-1px);
}

.header-btn i {
    font-size: 1.1em;
}

.theme-toggle-btn i {
    font-size: 1.25em;
}

/* Sidebar Toggle */
.sidebar-toggle {
    display: inline-flex;
    padding: var(--space-2);
}

.sidebar-toggle .icon-bars,
.sidebar-toggle .icon-close {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sidebar-toggle .icon-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.sidebar-toggle.active .icon-bars {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.sidebar-toggle.active .icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Course Header */
.course-header {
    position: relative;
    background-color: var(--current-bg-color);
    background-image: var(--image-override-url, var(--current-image));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 4rem;
    overflow: hidden;
    color: var(--neutral-0);
    transition: background-image var(--transition-slow), margin-left var(--transition-base), width var(--transition-base);
    z-index: 1;
}

.course-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.65) 100%);
}

.course-header-content {
    position: relative;
    z-index: var(--z-base);
    max-width: 800px;
    padding: var(--space-12) var(--space-4);
    margin-left: auto;
    margin-right: auto;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--current-primary);
    color: var(--neutral-0);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-6);
    box-shadow: 0 4px 14px 0 hsla(0,0%,0%,0.15);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(5px);
}

.course-title {
    font-size: var(--text-5xl);
    font-weight: 800;
    color: var(--neutral-0);
    margin-bottom: var(--space-3);
    text-shadow: 0 2px 8px hsla(0,0%,0%,0.5);
    line-height: 1.1;
}

.course-subtitle {
    font-size: var(--text-xl);
    color: var(--neutral-200);
    margin-bottom: var(--space-8);
    line-height: 1.5;
    font-weight: 400;
    text-shadow: 0 1px 4px hsla(0,0%,0%,0.3);
}

.course-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.course-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--neutral-100);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.course-meta-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.course-meta-item i {
    color: var(--current-accent);
}

/* Site Wrapper & Main Content */
.site-wrapper {
    display: flex;
    flex-grow: 1;
}

.main-content {
    flex: 1;
    padding: var(--space-8) var(--space-4);
    transition: margin-left var(--transition-base);
    background-color: var(--neutral-50);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--neutral-0);
    border-right: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 4rem;
    left: 0;
    bottom: 0;
    z-index: var(--z-sidebar-mobile);
    transform: translateX(-100%);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    padding: var(--space-6);
    text-align: center;
    border-bottom: 1px solid var(--neutral-200);
    background: linear-gradient(135deg, var(--base-primary-50) 0%, var(--neutral-0) 100%);
}

.sidebar-header h4 {
    margin: 0;
    color: var(--base-primary-700);
    font-size: var(--text-lg);
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-4) 0;
}

.sidebar-nav ul {
    list-style: none;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    margin: var(--space-1) var(--space-3);
    color: var(--neutral-600);
    font-weight: 500;
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.sidebar-nav .nav-link i {
    width: 1.25em;
    text-align: center;
    margin-right: var(--space-1);
    color: var(--neutral-400);
    transition: color var(--transition-fast);
}

.sidebar-nav .nav-link:hover {
    background-color: var(--base-primary-50);
    color: var(--base-primary-700);
    text-decoration: none;
    transform: translateX(4px);
}

.sidebar-nav .nav-link:hover i {
    color: var(--base-primary-600);
}

.sidebar-nav .nav-link.active {
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    box-shadow: var(--shadow-theme-colored);
}

.sidebar-nav .nav-link.active i {
    color: white;
}

/* Site Footer */
.site-footer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: var(--neutral-300);
    padding: var(--space-8) 0;
    border-top: 3px solid var(--base-primary-600);
    margin-top: auto;
    position: relative;
    z-index: 1;
    transition: margin-left var(--transition-base), width var(--transition-base);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.footer-logo {
    height: 2.5rem;
    width: auto;
    margin-bottom: var(--space-3);
    opacity: 0.9;
}

.footer-section h5 {
    font-size: var(--text-base);
    color: var(--neutral-0);
    margin-bottom: var(--space-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--space-2);
}

.footer-links a {
    color: var(--neutral-400);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-links a:hover {
    color: var(--base-primary-300);
    text-decoration: underline;
}

.footer-links a i {
    color: var(--base-primary-400);
    font-size: 0.9em;
}

.footer-credits {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--neutral-700);
    font-size: var(--text-sm);
}

.footer-credits p {
    margin: var(--space-1) 0;
    color: var(--neutral-500);
}

.footer-credits strong {
    color: var(--neutral-300);
}

/* Demo Sections */
.demo-section {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--neutral-200);
}

.demo-section:last-child {
    border-bottom: none;
}

.component-showcase {
    background-color: var(--neutral-0);
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-6);
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-base);
    transition: all var(--transition-base);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.component-showcase:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.component-showcase > h4 {
    margin-top: 0;
    border-bottom: 1px solid var(--neutral-300);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
    color: var(--neutral-700);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ============================================================================ */
/* VII. UI COMPONENTS                                                         */
/* ============================================================================ */

/* Alerts */
.alert {
    position: relative;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(5px);
}

.alert i {
    font-size: 1.2em;
    flex-shrink: 0;
}

.alert-primary {
    color: var(--base-primary-800);
    background-color: var(--base-primary-50);
    border-color: var(--base-primary-200);
}

.alert-success {
    color: var(--success-600);
    background-color: var(--success-100);
    border-color: var(--success-500);
}

.alert-danger {
    color: var(--danger-600);
    background-color: var(--danger-100);
    border-color: var(--danger-500);
}

.alert-warning {
    color: var(--neutral-800);
    background-color: var(--warning-100);
    border-color: var(--warning-500);
}

.alert-info {
    color: var(--info-600);
    background-color: var(--info-100);
    border-color: var(--info-500);
}

.alert-dismissible {
    padding-right: var(--space-12);
}

.alert-dismiss {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: 0;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.alert-dismiss:hover {
    opacity: 1;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    color: white;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

.badge-primary { background-color: var(--current-primary); }
.badge-secondary { background-color: var(--neutral-500); }
.badge-success { background-color: var(--success-500); }
.badge-danger { background-color: var(--danger-500); }
.badge-warning { background-color: var(--warning-500); color: var(--neutral-900); }
.badge-info { background-color: var(--info-500); }
.badge-light { background-color: var(--neutral-100); color: var(--neutral-800); }
.badge-dark { background-color: var(--neutral-800); }
.badge-sm { padding: var(--space-1) var(--space-2); font-size: 0.65rem; }
.badge-lg { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-4);
    list-style: none;
    background: transparent;
    border-radius: var(--radius-lg);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 var(--space-2);
    color: var(--neutral-400);
}

.breadcrumb-item a {
    color: var(--current-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--current-secondary);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--neutral-600);
    font-weight: 500;
}

.breadcrumb-item i {
    margin-right: var(--space-1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    font-family: var(--font-body);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.05);
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-inner);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    filter: brightness(0.95);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-theme-colored);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-300);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--neutral-100);
    border-color: var(--current-primary);
    color: var(--current-primary);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-emerald-colored);
}

.btn-success:hover:not(:disabled) {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}

.btn-danger {
    background: var(--gradient-danger);
    color: white;
    box-shadow: var(--shadow-rose-colored);
}

.btn-danger:hover:not(:disabled) {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}

.btn-warning {
    background: var(--gradient-warning);
    color: var(--neutral-900);
    box-shadow: var(--shadow-amber-colored);
}

.btn-warning:hover:not(:disabled) {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}

.btn-info {
    background: var(--gradient-info);
    color: white;
    box-shadow: var(--shadow-cyan-colored);
}

.btn-info:hover:not(:disabled) {
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--current-primary);
    color: var(--current-primary);
}

.btn-outline:hover:not(:disabled) {
    background: var(--current-primary);
    color: white;
}

.btn-ghost {
    background: transparent;
    color: var(--current-primary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--current-bg-color);
    color: var(--current-secondary);
}

.btn-xs {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    border-radius: var(--radius-2xl);
}

.btn-xl {
    padding: var(--space-5) var(--space-10);
    font-size: var(--text-xl);
    border-radius: var(--radius-3xl);
}

.btn-block {
    width: 100%;
}

.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-primary.btn-loading::after,
.btn-success.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-info.btn-loading::after {
    border-top-color: white;
}

.btn-warning.btn-loading::after {
    border-top-color: var(--neutral-900);
}

/* Cards */
.card {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-base);
    transition: all var(--transition-base);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--current-primary);
}

.card-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--neutral-200);
    background: var(--gradient-subtle);
}

.card-title {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--neutral-800);
}

.card-subtitle {
    margin: var(--space-1) 0 0 0;
    font-size: var(--text-sm);
    color: var(--neutral-500);
    font-weight: 500;
}

.card-body {
    padding: var(--space-6);
    flex-grow: 1;
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--neutral-200);
    background: var(--gradient-subtle);
}

.card-img-top {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--neutral-200);
}

.card-primary {
    border-left: 4px solid var(--current-primary);
}

.card-primary .card-header {
    background: var(--current-bg-color);
}

.card-primary .card-title {
    color: var(--current-primary);
}

.card-success {
    border-left: 4px solid var(--success-500);
}

.card-success .card-header {
    background-color: var(--success-100);
}

.card-success .card-title {
    color: var(--success-600);
}

.card-elevated {
    box-shadow: var(--shadow-xl);
    border: none;
}

/* Forms */
.form-group {
    margin-bottom: var(--space-6);
}

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

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--neutral-700);
    background-color: var(--neutral-0);
    background-clip: padding-box;
    border: 1px solid var(--neutral-300);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
    font-family: inherit;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--current-primary);
    box-shadow: 0 0 0 3px rgba(var(--current-primary-rgb, 59, 130, 246), 0.15);
    transform: translateY(-1px);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--neutral-100);
    opacity: 0.7;
    cursor: not-allowed;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 12px;
    padding-right: var(--space-10);
}

.form-control-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
}

.form-control-lg {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-lg);
    border-radius: var(--radius-2xl);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger-500);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--success-500);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.input-group {
    position: relative;
    display: flex;
    width: 100%;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--neutral-600);
    text-align: center;
    white-space: nowrap;
    background: var(--neutral-100);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-xl);
}

.input-group .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.input-group .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-text:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    transition: opacity var(--transition-base);
    opacity: 0;
}

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

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--space-4);
    pointer-events: none;
    max-width: 600px;
    transform: translateY(-50px) scale(0.95);
    transition: transform var(--transition-base), opacity var(--transition-base);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--neutral-0);
    background-clip: padding-box;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    outline: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid var(--neutral-200);
    border-top-left-radius: calc(var(--radius-2xl) - 1px);
    border-top-right-radius: calc(var(--radius-2xl) - 1px);
}

.modal-title {
    margin: 0;
    line-height: 1.2;
    font-size: var(--text-xl);
    color: var(--neutral-800);
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--space-6);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-6);
    border-top: 1px solid var(--neutral-200);
    border-bottom-left-radius: calc(var(--radius-2xl) - 1px);
    border-bottom-right-radius: calc(var(--radius-2xl) - 1px);
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: var(--neutral-600);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--radius-base);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.modal-sm .modal-dialog { max-width: 300px; }
.modal-lg .modal-dialog { max-width: 800px; }
.modal-xl .modal-dialog { max-width: 1140px; }

/* Accordions */
.accordion {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-sm);
}

.accordion-item {
    border-bottom: 1px solid var(--neutral-200);
    background-color: var(--neutral-0);
}

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

.accordion-header {
    margin: 0;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--neutral-700);
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
    cursor: pointer;
    gap: var(--space-3);
}

.accordion-button:not(.collapsed) {
    color: var(--current-primary);
    background-color: var(--current-bg-color);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
    font-weight: 600;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: '';
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform var(--transition-base);
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.accordion-button i {
    margin-right: var(--space-2);
    color: var(--neutral-500);
    transition: color var(--transition-fast);
}

.accordion-button:not(.collapsed) i {
    color: var(--current-primary);
}

.accordion-collapse {
    overflow: hidden;
}

.accordion-body {
    padding: var(--space-6);
    background-color: var(--neutral-50);
    border-top: 1px solid var(--neutral-200);
}

/* Dropdowns */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: var(--space-2);
    vertical-align: 0.15em;
    content: '';
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    display: none;
    min-width: 12rem;
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--neutral-700);
    text-align: left;
    list-style: none;
    background-color: var(--neutral-0);
    background-clip: padding-box;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    backdrop-filter: var(--backdrop-blur);
}

.dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    clear: both;
    font-weight: 500;
    color: var(--neutral-700);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dropdown-item i {
    width: 1em;
    text-align: center;
    color: var(--neutral-500);
    transition: color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--current-primary);
    background-color: var(--current-bg-color);
    text-decoration: none;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    color: var(--current-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    color: white;
    background-color: var(--current-primary);
    text-decoration: none;
}

.dropdown-item.active i,
.dropdown-item:active i {
    color: white;
}

.dropdown-item:disabled {
    color: var(--neutral-400);
    pointer-events: none;
    background-color: transparent;
}

.dropdown-divider {
    height: 0;
    margin: var(--space-2) 0;
    overflow: hidden;
    border-top: 1px solid var(--neutral-200);
}

.dropdown-header {
    display: block;
    padding: var(--space-2) var(--space-4);
    margin-bottom: 0;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    white-space: nowrap;
    font-weight: 600;
}

/* List Groups */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-sm);
}

.list-group-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--neutral-700);
    text-decoration: none;
    background-color: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-200);
    transition: all var(--transition-fast);
}

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

.list-group-item-action {
    width: 100%;
    color: var(--neutral-700);
    text-align: inherit;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    z-index: 1;
    color: var(--current-primary);
    text-decoration: none;
    background-color: var(--current-bg-color);
    transform: translateX(3px);
}

.list-group-item-action:active {
    color: white;
    background-color: var(--current-secondary);
}

.list-group-item.active {
    z-index: 2;
    color: white;
    background-color: var(--current-primary);
    border-color: var(--current-primary);
    box-shadow: var(--shadow-theme-colored);
}

.list-group-item i {
    color: var(--neutral-400);
    transition: color var(--transition-fast);
    width: 1.1em;
    text-align: center;
}

.list-group-item-action:hover i,
.list-group-item-action:focus i {
    color: var(--current-primary);
}

.list-group-item.active i {
    color: white;
}

.list-group-flush .list-group-item {
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
}

.list-group-flush:first-child .list-group-item:first-child {
    border-top-width: 0;
}

.list-group-flush:last-child .list-group-item:last-child {
    border-bottom-width: 0;
}

/* Tables */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
    margin-bottom: var(--space-4);
}

.table {
    width: 100%;
    color: var(--neutral-700);
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-200);
}

.table thead th {
    font-weight: 600;
    color: var(--neutral-800);
    background-color: var(--neutral-100);
    border-bottom-width: 2px;
    border-color: var(--neutral-300);
    vertical-align: bottom;
}

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

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--neutral-50);
}

.table-hover tbody tr:hover {
    background-color: var(--current-bg-color);
    color: var(--current-primary);
    cursor: default;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--neutral-200);
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 2px;
}

.table-sm th,
.table-sm td {
    padding: var(--space-2) var(--space-3);
}

.table caption {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    color: var(--neutral-500);
    text-align: left;
    caption-side: bottom;
    font-size: var(--text-xs);
}

/* Tabs */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    border-bottom: 2px solid var(--neutral-200);
    gap: var(--space-1);
}

.nav-tabs .nav-item {
    margin-bottom: -2px;
}

.nav-tabs .nav-link {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--neutral-600);
    font-weight: 500;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--current-primary);
    background-color: var(--neutral-50);
    text-decoration: none;
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    color: var(--current-primary);
    background-color: var(--neutral-0);
    border-color: var(--current-primary) var(--current-primary) var(--neutral-0);
    border-bottom-color: var(--neutral-0);
    font-weight: 600;
}

.nav-tabs .nav-link:disabled {
    color: var(--neutral-400);
    pointer-events: none;
    cursor: default;
    background-color: transparent;
    border-color: transparent;
}

.tab-content {
    padding: var(--space-6) var(--space-2);
    border: 1px solid var(--neutral-200);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background-color: var(--neutral-0);
}

.tab-pane {
    display: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.tab-pane.active {
    display: block;
    opacity: 1;
}

.nav-pills .nav-link {
    border-radius: var(--radius-lg);
    border-bottom: none;
}

.nav-pills .nav-link.active {
    color: white;
    background-color: var(--current-primary);
    border-color: var(--current-primary);
    box-shadow: var(--shadow-theme-colored);
}

.nav-pills .nav-link:not(.active):hover {
    background-color: var(--current-bg-color);
}

/* Progress Bars */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: var(--text-xs);
    background-color: var(--neutral-200);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-inner);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: white;
    text-align: center;
    white-space: nowrap;
    background-color: var(--current-primary);
    transition: width 0.6s ease;
    font-weight: 600;
    border-radius: var(--radius-full);
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.progress-bar-success { background-color: var(--success-500); }
.progress-bar-warning { background-color: var(--warning-500); color: var(--neutral-900); }
.progress-bar-danger { background-color: var(--danger-500); }
.progress-bar-info { background-color: var(--info-500); }

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

.progress-sm { height: 0.5rem; font-size: 0.65rem; }
.progress-lg { height: 1.5rem; font-size: var(--text-sm); }

/* Spinners */
.spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    color: var(--current-primary);
}

.spinner-sm { width: 1rem; height: 1rem; border-width: 0.15em; }
.spinner-lg { width: 3rem; height: 3rem; border-width: 0.3em; }
.spinner-success { color: var(--success-500); }
.spinner-warning { color: var(--warning-500); }
.spinner-danger { color: var(--danger-500); }
.spinner-info { color: var(--info-500); }
.spinner-light { color: var(--neutral-300); }
.spinner-dark { color: var(--neutral-700); }

/* Tooltips */
.tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: var(--text-xs);
    word-wrap: break-word;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    transform: translateY(5px) scale(0.95);
}

.tooltip.show {
    opacity: 0.95;
    transform: translateY(0) scale(1);
}

.tooltip-inner {
    max-width: 220px;
    padding: var(--space-2) var(--space-3);
    color: var(--neutral-0);
    text-align: center;
    background-color: var(--neutral-800);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

/* Notifications */
.toast-container {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: var(--z-toast);
    width: 100%;
    max-width: 380px;
    pointer-events: none;
}

.notification {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--neutral-0);
    color: var(--neutral-800);
    border-radius: var(--radius-xl);
    border: 1px solid var(--neutral-200);
    border-left-width: 5px;
    box-shadow: var(--shadow-xl);
    pointer-events: auto;
    max-width: 100%;
    word-wrap: break-word;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.removing {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
}

.notification-icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    margin-top: 2px;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--neutral-900);
    font-size: var(--text-base);
}

.notification-message {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    margin: 0;
    line-height: 1.5;
}

.notification-close {
    background: none;
    border: none;
    color: var(--neutral-400);
    cursor: pointer;
    padding: var(--space-1);
    margin-left: var(--space-2);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    line-height: 1;
    font-size: 1rem;
}

.notification-close:hover {
    color: var(--neutral-600);
    background: var(--neutral-100);
    transform: scale(1.1);
}

.notification.success { border-left-color: var(--success-500); }
.notification.success .notification-icon { color: var(--success-500); }
.notification.error { border-left-color: var(--danger-500); }
.notification.error .notification-icon { color: var(--danger-500); }
.notification.warning { border-left-color: var(--warning-500); }
.notification.warning .notification-icon { color: var(--warning-500); }
.notification.info { border-left-color: var(--info-500); }
.notification.info .notification-icon { color: var(--info-500); }

/* Tag Input */
.tag-input-container {
    position: relative;
}

.tag-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-xl);
    background: var(--neutral-0);
    min-height: calc(var(--space-3) * 2 + var(--text-base) * 1.5 + 2px);
    cursor: text;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.tag-input-wrapper.focused {
    border-color: var(--current-primary);
    box-shadow: 0 0 0 3px rgba(var(--current-primary-rgb, 59, 130, 246), 0.15);
    transform: translateY(-1px);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    animation: fadeInScaleUp 0.3s var(--transition-base) forwards;
    opacity: 0;
    box-shadow: var(--shadow-sm);
}

.tag-chip-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    line-height: 1;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.tag-chip-remove:hover {
    color: white;
    background: rgba(0,0,0,0.2);
    transform: scale(1.1);
}

.tag-input-field {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    padding: var(--space-1);
    font-size: var(--text-base);
    font-family: inherit;
    background: transparent;
    color: inherit;
}

.tag-suggestions {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown);
    max-height: 200px;
    overflow-y: auto;
    display: none;
    backdrop-filter: var(--backdrop-blur);
}

.tag-suggestion {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--neutral-100);
    font-size: var(--text-sm);
}

.tag-suggestion:last-child {
    border-bottom: none;
}

.tag-suggestion:hover,
.tag-suggestion.active {
    background: var(--current-bg-color);
    color: var(--current-primary);
    transform: translateX(2px);
}

/* Calendar Component */
.calendar-container {
    max-width: 380px;
    margin: 0 auto;
}

.calendar {
    background-color: var(--neutral-0);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
    border: 1px solid var(--neutral-200);
    overflow: hidden;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--neutral-200);
}

.calendar-month-year {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--neutral-800);
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

.calendar-nav-btn {
    color: var(--neutral-500);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calendar-nav-btn:hover {
    color: var(--current-primary);
    background-color: var(--neutral-100);
}

.calendar-nav-btn i {
    font-size: 0.9em;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
}

.calendar-day-name {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
    text-align: center;
    padding-bottom: var(--space-2);
    text-transform: uppercase;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: var(--text-sm);
    color: var(--neutral-700);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
}

.calendar-day:hover:not(.prev-month-day):not(.next-month-day) {
    background-color: var(--neutral-100);
    color: var(--current-primary);
    transform: scale(1.05);
}

.calendar-day:focus-visible {
    outline: 2px solid var(--current-accent);
    outline-offset: 2px;
    z-index: 1;
}

.calendar-day.prev-month-day,
.calendar-day.next-month-day {
    color: var(--neutral-400);
    cursor: default;
    pointer-events: none;
}

.calendar-day.prev-month-day:hover,
.calendar-day.next-month-day:hover {
    background-color: transparent;
    transform: none;
}

.calendar-day.today {
    font-weight: 700;
    color: var(--current-primary);
    background-color: var(--current-bg-color);
    border: 1px solid var(--current-primary);
}

.calendar-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--current-primary);
}

.calendar-day.selected {
    background-color: var(--current-primary);
    color: var(--neutral-0) !important;
    box-shadow: var(--shadow-theme-colored);
    font-weight: 700;
    transform: scale(1.05);
}

.calendar-day.selected:hover {
    background-color: var(--current-secondary);
}

.calendar-day.selected.today::after {
    background-color: var(--neutral-0);
}

.calendar-day.has-event::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--danger-500);
}

/* Image utilities */
.toolkit-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--space-6) auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--neutral-200);
}

.toolkit-image-diagram {
    max-width: 80%;
}

figure {
    margin: var(--space-6) 0;
}

figcaption {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    text-align: center;
    margin-top: var(--space-2);
    font-style: italic;
}

.image-size-small { max-width: 300px !important; width: 100%; }
.image-size-medium { max-width: 500px !important; width: 100%; }
.image-size-large { max-width: 750px !important; width: 100%; }
.image-width-60 { max-width: 60% !important; width: 100%; }
.image-width-40 { max-width: 40% !important; width: 100%; }

/* Disabled elements */
.nav-link[disabled], .nav-link.disabled,
.list-group-item[disabled], .list-group-item.disabled {
    color: var(--neutral-400) !important;
    pointer-events: none;
    cursor: default;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 0.65;
}

/* ============================================================================ */
/* VIII. UTILITY CLASSES                                                      */
/* ============================================================================ */

/* Display */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }

/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

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

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }
.align-self-auto { align-self: auto !important; }

.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.order-first { order: -1 !important; }
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }
.order-last { order: 6 !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* Spacing */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: var(--space-1) !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-3 { margin-left: var(--space-3) !important; }
.ms-4 { margin-left: var(--space-4) !important; }
.ms-5 { margin-left: var(--space-5) !important; }
.ms-6 { margin-left: var(--space-6) !important; }
.ms-8 { margin-left: var(--space-8) !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-2 { margin-right: var(--space-2) !important; }
.me-3 { margin-right: var(--space-3) !important; }
.me-4 { margin-right: var(--space-4) !important; }
.me-5 { margin-right: var(--space-5) !important; }
.me-6 { margin-right: var(--space-6) !important; }
.me-8 { margin-right: var(--space-8) !important; }
.me-auto { margin-right: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-8 { padding-top: var(--space-8) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: var(--space-1) !important; }
.ps-2 { padding-left: var(--space-2) !important; }
.ps-3 { padding-left: var(--space-3) !important; }
.ps-4 { padding-left: var(--space-4) !important; }
.ps-5 { padding-left: var(--space-5) !important; }
.ps-6 { padding-left: var(--space-6) !important; }
.ps-8 { padding-left: var(--space-8) !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: var(--space-1) !important; }
.pe-2 { padding-right: var(--space-2) !important; }
.pe-3 { padding-right: var(--space-3) !important; }
.pe-4 { padding-right: var(--space-4) !important; }
.pe-5 { padding-right: var(--space-5) !important; }
.pe-6 { padding-right: var(--space-6) !important; }
.pe-8 { padding-right: var(--space-8) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

/* Text */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.fw-light { font-weight: 300 !important; }
.fw-lighter { font-weight: lighter !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }

.fst-italic { font-style: italic !important; }
.fst-normal { font-style: normal !important; }

.lh-1 { line-height: 1 !important; }
.lh-sm { line-height: 1.25 !important; }
.lh-base { line-height: 1.6 !important; }
.lh-lg { line-height: 2 !important; }

.font-monospace { font-family: var(--font-mono) !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

.text-primary { color: var(--current-primary) !important; }
.text-secondary-emphasis { color: var(--current-secondary) !important; }
.text-success { color: var(--success-500) !important; }
.text-danger { color: var(--danger-500) !important; }
.text-warning { color: var(--warning-500) !important; }
.text-info { color: var(--info-500) !important; }
.text-light { color: var(--neutral-100) !important; }
.text-dark { color: var(--neutral-900) !important; }
.text-body { color: var(--neutral-700) !important; }
.text-muted { color: var(--neutral-500) !important; }
.text-black { color: #000 !important; }
.text-white { color: #fff !important; }
.text-opacity-25 { opacity: 0.25 !important; }
.text-opacity-50 { opacity: 0.5 !important; }
.text-opacity-75 { opacity: 0.75 !important; }

/* Background Colors */
.bg-primary { background-color: var(--current-primary) !important; }
.bg-secondary-lt { background-color: var(--neutral-200) !important; }
.bg-success { background-color: var(--success-500) !important; }
.bg-danger { background-color: var(--danger-500) !important; }
.bg-warning { background-color: var(--warning-500) !important; }
.bg-info { background-color: var(--info-500) !important; }
.bg-light { background-color: var(--neutral-100) !important; }
.bg-dark { background-color: var(--neutral-800) !important; }
.bg-body { background-color: var(--neutral-50) !important; }
.bg-white { background-color: var(--neutral-0) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-gradient { background-image: var(--gradient-primary) !important; }

/* Borders */
.border { border: 1px solid var(--neutral-200) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--neutral-200) !important; }
.border-top-0 { border-top: 0 !important; }
.border-end { border-right: 1px solid var(--neutral-200) !important; }
.border-end-0 { border-right: 0 !important; }
.border-bottom { border-bottom: 1px solid var(--neutral-200) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start { border-left: 1px solid var(--neutral-200) !important; }
.border-start-0 { border-left: 0 !important; }

.border-primary { border-color: var(--current-primary) !important; }
.border-white { border-color: var(--neutral-0) !important; }

.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }
.border-5 { border-width: 5px !important; }

.rounded { border-radius: var(--radius-lg) !important; }
.rounded-0 { border-radius: var(--radius-none) !important; }
.rounded-1 { border-radius: var(--radius-base) !important; }
.rounded-2 { border-radius: var(--radius-lg) !important; }
.rounded-3 { border-radius: var(--radius-xl) !important; }
.rounded-4 { border-radius: var(--radius-2xl) !important; }
.rounded-5 { border-radius: var(--radius-3xl) !important; }
.rounded-circle { border-radius: var(--radius-full) !important; }
.rounded-pill { border-radius: var(--radius-full) !important; }
.rounded-top { border-top-left-radius: var(--radius-lg) !important; border-top-right-radius: var(--radius-lg) !important; }
.rounded-bottom { border-bottom-left-radius: var(--radius-lg) !important; border-bottom-right-radius: var(--radius-lg) !important; }
.rounded-start { border-top-left-radius: var(--radius-lg) !important; border-bottom-left-radius: var(--radius-lg) !important; }
.rounded-end { border-top-right-radius: var(--radius-lg) !important; border-bottom-right-radius: var(--radius-lg) !important; }

/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-base) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

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

/* Position */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; top: 0; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.top-100 { top: 100% !important; }
.bottom-0 { bottom: 0 !important; }
.bottom-50 { bottom: 50% !important; }
.bottom-100 { bottom: 100% !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }
.start-100 { left: 100% !important; }
.end-0 { right: 0 !important; }
.end-50 { right: 50% !important; }
.end-100 { right: 100% !important; }

.translate-middle { transform: translate(-50%, -50%) !important; }
.translate-middle-x { transform: translateX(-50%) !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* Sizing */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.mw-100 { max-width: 100% !important; }
.vw-100 { width: 100vw !important; }
.min-vw-100 { min-width: 100vw !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mh-100 { max-height: 100% !important; }
.vh-100 { height: 100vh !important; }
.min-vh-100 { min-height: 100vh !important; }

/* Screen Reader Only */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Float */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }
.clearfix::after { display: block; clear: both; content: ""; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-wait { cursor: wait !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }

/* Debug utilities */
.debug-outline, .debug-outline * { outline: 1px solid red !important; }
.debug-outline-children > * { outline: 1px solid blue !important; }

/* ============================================================================ */
/* IX. ANIMATIONS & EFFECTS                                                   */
/* ============================================================================ */

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

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

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

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

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

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

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

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

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

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

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

@keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes progress-bar-stripes {
    0% { background-position-x: 1rem; }
}

@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Animation Classes */
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-fade-in { animation: fadeIn 0.5s var(--transition-base) forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s var(--transition-base) forwards; }
.animate-slide-in-up { animation: slideInUp 0.5s var(--transition-base) forwards; }
.animate-slide-in-left { animation: slideInLeft 0.5s var(--transition-base) forwards; }
.animate-slide-in-right { animation: slideInRight 0.5s var(--transition-base) forwards; }
.animate-zoom-in { animation: zoomIn 0.4s var(--transition-base) forwards; }
.animate-shake { animation: shake 0.6s ease-in-out; }

.animate-delay-75 { animation-delay: 75ms !important; }
.animate-delay-100 { animation-delay: 100ms !important; }
.animate-delay-150 { animation-delay: 150ms !important; }
.animate-delay-200 { animation-delay: 200ms !important; }
.animate-delay-300 { animation-delay: 300ms !important; }
.animate-delay-500 { animation-delay: 500ms !important; }
.animate-delay-700 { animation-delay: 700ms !important; }
.animate-delay-1000 { animation-delay: 1000ms !important; }

/* Data attribute animations */
[data-animate] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: var(--transition-base);
}

[data-animate="fade-in"] { transform: translateY(0); }
[data-animate="slide-up"] { transform: translateY(40px); }
[data-animate="zoom-in"] { transform: scale(0.9); }

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Effects */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: inline-block;
}

.hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform var(--transition-fast);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Ripple effect base */
.btn, .header-btn, .nav-link, .tag-suggestion, .list-group-item, .card, .sidebar-nav .nav-link {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
}

.skeleton-text {
    height: 1rem;
    border-radius: var(--radius-base);
    margin-bottom: var(--space-2);
}

.skeleton-title {
    height: 1.5rem;
    border-radius: var(--radius-base);
    margin-bottom: var(--space-3);
    width: 60%;
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
}

/* Smooth animation overrides */
.btn, .card, .theme-card, .component-demo {
    transition: all var(--transition-fast) !important;
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

.card:hover, .theme-card:hover, .component-demo:hover {
    transform: translateY(-1px) !important;
}

/* ============================================================================ */
/* X. RESPONSIVE STYLES                                                       */
/* ============================================================================ */

/* Container responsive adjustments */
@media (min-width: 640px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container, .container-md, .container-lg, .container-xl, .container-2xl {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* Display responsive utilities */
@media (min-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-table { display: table !important; }
    .d-lg-table-row { display: table-row !important; }
    .d-lg-table-cell { display: table-cell !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .d-lg-grid { display: grid !important; }
    .d-lg-inline-grid { display: inline-grid !important; }
}

/* Desktop Layout */
@media (min-width: 1024px) {
    /* Layout with sidebar */
    body:not(.no-sidebar-layout) .site-header {
        left: 280px;
        right: 0;
        width: auto;
    }

    body:not(.no-sidebar-layout) .course-header,
    body:not(.no-sidebar-layout) .main-content,
    body:not(.no-sidebar-layout) .site-footer {
        margin-left: 280px;
        width: calc(100% - 280px);
    }

    body:not(.no-sidebar-layout) .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-sm);
        z-index: calc(var(--z-sticky) - 1);
    }

    body:not(.no-sidebar-layout) .sidebar-toggle {
        display: none;
    }

    /* Layout without sidebar */
    body.no-sidebar-layout .site-header {
        left: 0;
        right: 0;
        width: 100%;
    }

    body.no-sidebar-layout .course-header,
    body.no-sidebar-layout .main-content,
    body.no-sidebar-layout .site-footer {
        margin-left: 0;
        width: 100%;
    }

    .course-title { font-size: var(--text-5xl); }
    .course-subtitle { font-size: var(--text-xl); }

    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .course-header { background-attachment: fixed; }
    .course-title { font-size: var(--text-4xl); }
    .course-subtitle { font-size: var(--text-lg); }
}

/* Mobile */
@media (max-width: 1023px) {
    .site-header,
    .course-header,
    .main-content,
    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    .course-meta {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
    }

    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--space-4);
    }

    .course-header {
        background-attachment: scroll;
        z-index: 1;
    }

    .site-footer {
        z-index: 1;
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .row {
        margin-left: calc(var(--space-2) * -1) !important;
        margin-right: calc(var(--space-2) * -1) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .col, [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        margin-bottom: var(--space-4);
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header-content {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        gap: var(--space-2);
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .logo-text-container {
        display: none !important;
    }

    .header-btn span:not(.sr-only) {
        display: none !important;
    }

    .header-btn {
        padding: var(--space-2);
    }

    .sidebar-toggle {
        padding: var(--space-2);
    }

    .course-header {
        min-height: 320px;
        background-attachment: scroll;
    }

    .course-header-content {
        padding: var(--space-6) var(--space-3) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .course-title {
        font-size: var(--text-3xl) !important;
        line-height: 1.1;
        word-break: break-word;
    }

    .course-subtitle {
        font-size: var(--text-base) !important;
        line-height: 1.4;
        word-break: break-word;
    }

    .course-meta {
        flex-direction: column;
        gap: var(--space-3);
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
    }

    .course-meta-item {
        width: auto !important;
        max-width: 100% !important;
        text-align: center;
    }

    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }

    .toast-container {
        top: calc(4rem + var(--space-2));
        left: var(--space-2);
        right: var(--space-2);
        max-width: none;
        width: auto;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-4);
    }

    .grid-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }

    .card, .component-showcase, .specialized-container,
    .resource-list, .quick-access, .showcase-intro,
    .interactive-playground, .demo-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
    }

    .main-content {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    .specialized-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    .specialized-tabs {
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
    }

    .specialized-tab {
        width: 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid var(--neutral-200);
        flex: none !important;
    }

    .specialized-content {
        padding: var(--space-4) var(--space-2) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        width: 100% !important;
        min-width: 300px;
        font-size: var(--text-sm) !important;
    }

    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .container {
        padding-left: var(--space-1) !important;
        padding-right: var(--space-1) !important;
    }

    .row {
        margin-left: calc(var(--space-1) * -1) !important;
        margin-right: calc(var(--space-1) * -1) !important;
    }

    .col, [class*="col-"] {
        padding-left: var(--space-1) !important;
        padding-right: var(--space-1) !important;
    }

    .main-content {
        padding-left: var(--space-1) !important;
        padding-right: var(--space-1) !important;
    }

    .card-body, .component-showcase, .specialized-content {
        padding: var(--space-2) !important;
    }

    .course-header {
        min-height: 280px;
    }

    .course-title {
        font-size: var(--text-2xl) !important;
    }

    .course-subtitle {
        font-size: var(--text-sm) !important;
    }

    h1 { font-size: var(--text-3xl) !important; }
    h2 { font-size: var(--text-2xl) !important; }
    h3 { font-size: var(--text-xl) !important; }

    .btn {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-4);
    }

    .modal-dialog {
        margin: var(--space-2);
        max-width: calc(100% - var(--space-4));
    }
}

/* ============================================================================ */
/* XI. DARK MODE STYLES                                                       */
/* ============================================================================ */
.dark {
    color-scheme: dark;
}

.dark body {
    background-color: var(--neutral-50);
    color: var(--neutral-700);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: var(--neutral-900);
}

.dark p {
    color: var(--neutral-600);
}

.dark a {
    color: var(--current-primary);
}

.dark a:hover {
    color: var(--current-accent);
}

.dark strong, .dark b {
    color: var(--neutral-800);
}

.dark hr {
    background: var(--neutral-200);
}

.dark code {
    background: var(--neutral-100);
    color: var(--danger-600);
    border-color: var(--neutral-200);
}

.dark pre {
    background: var(--neutral-800);
    color: var(--neutral-100);
    border: 1px solid var(--neutral-200);
}

.dark pre code {
    background: none;
    border: none;
    color: inherit;
}

.dark blockquote {
    border-left-color: var(--current-primary);
    background-color: var(--neutral-100);
    color: var(--neutral-700);
}

.dark blockquote footer {
    color: var(--neutral-500);
}

.dark .site-header {
    background: rgba(30, 41, 59, 0.95);
    border-bottom-color: var(--neutral-200);
}

.dark .logo-text-main {
    color: var(--base-primary-300);
}

.dark .logo-text-subtitle {
    color: var(--neutral-400);
}

.dark .header-btn {
    color: var(--neutral-300);
}

.dark .header-btn:hover {
    background-color: var(--neutral-200);
    color: var(--neutral-100);
}

.dark .sidebar-toggle, .dark .theme-toggle-btn {
    color: var(--neutral-300);
}

.dark .sidebar-toggle:hover, .dark .theme-toggle-btn:hover {
    background-color: var(--neutral-200);
    color: var(--base-primary-300);
}

.dark .course-header-overlay {
    background: linear-gradient(135deg, rgba(15,23,42,0.85) 0%, rgba(30,41,59,0.75) 50%, rgba(15,23,42,0.85) 100%);
}

.dark .course-meta-item {
    background: rgba(0,0,0, 0.4);
    color: var(--neutral-200);
}

.dark .course-meta-item i {
    color: var(--current-accent);
}

.dark .sidebar {
    background: var(--neutral-0);
    border-right-color: var(--neutral-200);
}

.dark .sidebar-header {
    background: linear-gradient(135deg, var(--base-primary-800) 0%, var(--neutral-0) 100%);
    border-bottom-color: var(--neutral-200);
}

.dark .sidebar-header h4 {
    color: var(--base-primary-300);
}

.dark .sidebar-nav .nav-link {
    color: var(--neutral-500);
}

.dark .sidebar-nav .nav-link i {
    color: var(--neutral-400);
}

.dark .sidebar-nav .nav-link:hover {
    background-color: var(--base-primary-800);
    color: var(--base-primary-200);
}

.dark .sidebar-nav .nav-link:hover i {
    color: var(--base-primary-300);
}

.dark .sidebar-nav .nav-link.active {
    background: var(--gradient-primary);
    color: var(--neutral-0);
    box-shadow: var(--shadow-theme-colored);
}

.dark .sidebar-nav .nav-link.active i {
    color: var(--neutral-0);
}

.dark .main-content {
    background-color: var(--neutral-50);
}

.dark .demo-section {
    border-bottom-color: var(--neutral-200);
}

.dark .component-showcase {
    background-color: var(--neutral-0);
    border-color: var(--neutral-200);
}

.dark .component-showcase > h4 {
    border-bottom-color: var(--neutral-200);
    color: var(--neutral-700);
}

/* UI Components Dark Mode */
.dark .alert-primary {
    color: var(--base-primary-200);
    background-color: rgba(var(--base-primary-rgb, 59, 130, 246), 0.1);
    border-color: var(--base-primary-400);
}

.dark .alert-success {
    color: #6ee7b7;
    background-color: var(--success-100);
    border-color: var(--success-500);
}

.dark .alert-danger {
    color: #fca5a5;
    background-color: var(--danger-100);
    border-color: var(--danger-500);
}

.dark .alert-warning {
    color: #fcd34d;
    background-color: var(--warning-100);
    border-color: var(--warning-500);
}

.dark .alert-info {
    color: #93c5fd;
    background-color: var(--info-100);
    border-color: var(--info-500);
}

.dark .badge-light {
    background-color: var(--neutral-700);
    color: var(--neutral-100);
}

.dark .btn-secondary {
    background: var(--neutral-200);
    color: var(--neutral-800);
    border-color: var(--neutral-300);
}

.dark .btn-secondary:hover:not(:disabled) {
    background: var(--neutral-300);
    border-color: var(--neutral-400);
    color: var(--neutral-900);
}

.dark .btn-outline {
    border-color: var(--current-primary);
    color: var(--current-primary);
}

.dark .btn-outline:hover:not(:disabled) {
    background: var(--current-primary);
    color: var(--neutral-0);
}

.dark .btn-ghost:hover:not(:disabled) {
    background: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
}

.dark .card {
    background: var(--neutral-0);
    border-color: var(--neutral-200);
}

.dark .card:hover {
    border-color: var(--current-primary);
}

.dark .card-header, .dark .card-footer {
    background: var(--neutral-100);
    border-color: var(--neutral-200);
}

.dark .card-title {
    color: var(--neutral-800);
}

.dark .card-subtitle {
    color: var(--neutral-500);
}

.dark .card-primary .card-header {
    background: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
}

.dark .card-success .card-header {
    background-color: var(--success-100);
}

.dark .form-label {
    color: var(--neutral-700);
}

.dark .form-control, .dark .form-select {
    color: var(--neutral-700);
    background-color: var(--neutral-0);
    border-color: var(--neutral-300);
}

.dark .form-control::placeholder {
    color: var(--neutral-400);
}

.dark .form-control:focus, .dark .form-select:focus {
    border-color: var(--current-primary);
    box-shadow: 0 0 0 3px rgba(var(--current-primary-rgb, 59, 130, 246), 0.25);
}

.dark .form-control:disabled, .dark .form-select:disabled {
    background-color: var(--neutral-100);
    opacity: 0.6;
}

.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.dark .input-group-text {
    background: var(--neutral-100);
    border-color: var(--neutral-300);
    color: var(--neutral-600);
}

.dark .modal-content {
    background-color: var(--neutral-0);
    border-color: var(--neutral-200);
}

.dark .modal-header {
    border-bottom-color: var(--neutral-200);
}

.dark .modal-title {
    color: var(--neutral-800);
}

.dark .modal-body {
    color: var(--neutral-600);
}

.dark .modal-footer {
    border-top-color: var(--neutral-200);
}

.dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark .accordion {
    border-color: var(--neutral-200);
}

.dark .accordion-item {
    background-color: var(--neutral-0);
    border-bottom-color: var(--neutral-200);
}

.dark .accordion-button {
    color: var(--neutral-700);
}

.dark .accordion-button:not(.collapsed) {
    color: var(--current-primary);
    background-color: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
}

.dark .accordion-button::after {
    filter: invert(60%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(100%) contrast(90%);
}

.dark .accordion-body {
    background-color: var(--neutral-100);
    border-top-color: var(--neutral-200);
}

.dark .nav-tabs {
    border-bottom-color: var(--neutral-300);
}

.dark .nav-tabs .nav-link {
    color: var(--neutral-500);
}

.dark .nav-tabs .nav-link:hover, .dark .nav-tabs .nav-link:focus {
    color: var(--current-primary);
    background-color: var(--neutral-100);
}

.dark .nav-tabs .nav-link.active {
    color: var(--current-primary);
    background-color: var(--neutral-0);
    border-color: var(--current-primary) var(--current-primary) var(--neutral-0);
    border-bottom-color: var(--neutral-0);
}

.dark .dropdown-menu {
    background-color: var(--neutral-0);
    border-color: var(--neutral-200);
    color: var(--neutral-700);
}

.dark .dropdown-item {
    color: var(--neutral-600);
}

.dark .dropdown-item i {
    color: var(--neutral-500);
}

.dark .dropdown-item:hover, .dark .dropdown-item:focus {
    color: var(--current-primary);
    background-color: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
}

.dark .dropdown-item:hover i, .dark .dropdown-item:focus i {
    color: var(--current-primary);
}

.dark .dropdown-item.active, .dark .dropdown-item:active {
    color: var(--neutral-0);
    background-color: var(--current-primary);
}

.dark .dropdown-item.active i, .dark .dropdown-item:active i {
    color: var(--neutral-0);
}

.dark .dropdown-divider {
    border-top-color: var(--neutral-200);
}

.dark .dropdown-header {
    color: var(--neutral-400);
}

.dark .list-group {
    border-color: var(--neutral-200);
}

.dark .list-group-item {
    background-color: var(--neutral-0);
    border-bottom-color: var(--neutral-200);
    color: var(--neutral-600);
}

.dark .list-group-item-action:hover, .dark .list-group-item-action:focus {
    color: var(--current-primary);
    background-color: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
}

.dark .list-group-item.active {
    color: var(--neutral-0);
    background-color: var(--current-primary);
    border-color: var(--current-primary);
}

.dark .list-group-item i {
    color: var(--neutral-400);
}

.dark .list-group-item-action:hover i, .dark .list-group-item-action:focus i {
    color: var(--current-primary);
}

.dark .list-group-item.active i {
    color: var(--neutral-0);
}

.dark .table {
    color: var(--neutral-600);
}

.dark .table th, .dark .table td {
    border-bottom-color: var(--neutral-200);
}

.dark .table thead th {
    color: var(--neutral-800);
    background-color: var(--neutral-100);
    border-color: var(--neutral-300);
}

.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--neutral-100);
}

.dark .table-hover tbody tr:hover {
    background-color: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
    color: var(--current-primary);
}

.dark .table-bordered th, .dark .table-bordered td {
    border-color: var(--neutral-200);
}

.dark .progress {
    background-color: var(--neutral-200);
}

.dark .progress-bar-warning {
    color: var(--neutral-900);
}

.dark .tag-input-wrapper {
    background: var(--neutral-0);
    border-color: var(--neutral-300);
}

.dark .tag-input-wrapper.focused {
    border-color: var(--current-primary);
    box-shadow: 0 0 0 3px rgba(var(--current-primary-rgb, 59, 130, 246), 0.25);
}

.dark .tag-input-field {
    color: var(--neutral-700);
}

.dark .tag-suggestions {
    background: var(--neutral-0);
    border-color: var(--neutral-200);
}

.dark .tag-suggestion {
    color: var(--neutral-600);
    border-bottom-color: var(--neutral-100);
}

.dark .tag-suggestion:hover, .dark .tag-suggestion.active {
    background: rgba(var(--current-primary-rgb, 59, 130, 246), 0.1);
    color: var(--current-primary);
}

.dark .tooltip-inner {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    box-shadow: var(--shadow-xl);
}

.dark .notification {
    background: var(--neutral-0);
    border-color: var(--neutral-200);
    color: var(--neutral-800);
}

.dark .notification-title {
    color: var(--neutral-900);
}

.dark .notification-message {
    color: var(--neutral-600);
}

.dark .notification-close {
    color: var(--neutral-400);
}

.dark .notification-close:hover {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.dark .calendar {
    background-color: var(--neutral-0);
    border-color: var(--neutral-200);
}

.dark .calendar-header {
    border-bottom-color: var(--neutral-200);
}

.dark .calendar-month-year {
    color: var(--neutral-800);
}

.dark .calendar-nav-btn {
    color: var(--neutral-400);
}

.dark .calendar-nav-btn:hover {
    color: var(--current-primary);
    background-color: var(--neutral-100);
}

.dark .calendar-day-name {
    color: var(--neutral-500);
}

.dark .calendar-day {
    color: var(--neutral-600);
}

.dark .calendar-day:hover:not(.prev-month-day):not(.next-month-day) {
    background-color: var(--neutral-100);
    color: var(--current-primary);
}

.dark .calendar-day.prev-month-day,
.dark .calendar-day.next-month-day {
    color: var(--neutral-400);
}

.dark .calendar-day.today {
    color: var(--current-primary);
    background-color: var(--current-bg-color);
    border-color: var(--current-primary);
}

.dark .calendar-day.today::after {
    background-color: var(--current-primary);
}

.dark .calendar-day.selected {
    background-color: var(--current-primary);
    color: var(--neutral-0) !important;
}

.dark .calendar-day.selected.today::after {
    background-color: var(--neutral-0);
}

.dark .site-footer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: var(--neutral-300);
    border-top-color: var(--base-primary-600);
}

.dark .footer-credits p {
    color: var(--neutral-500);
}

.dark .footer-credits strong {
    color: var(--neutral-700);
}

.dark .footer-links a {
    color: var(--neutral-500);
}

.dark .footer-links a:hover {
    color: var(--base-primary-300);
    background: rgba(var(--neutral-rgb-700, 51, 65, 85), 0.2);
}

.dark .specialized-container {
    background: var(--neutral-0);
    border-color: var(--neutral-200);
}

.dark .specialized-tabs {
    background: var(--neutral-100);
    border-bottom-color: var(--neutral-200);
}

.dark .specialized-tab {
    color: var(--neutral-500);
}

.dark .specialized-tab:hover {
    background: var(--neutral-50);
    color: var(--current-primary);
}

.dark .specialized-tab.active {
    background: var(--neutral-0);
    color: var(--current-primary);
}

.dark .wysiwyg-content thead th {
    background-color: var(--neutral-200);
}

.dark .wysiwyg-content th, .dark .wysiwyg-content td {
    border-color: var(--neutral-400);
}

.dark figcaption {
    color: var(--neutral-400);
}

.dark .toolkit-image {
    border-color: var(--neutral-300);
}

.dark .nav-link[disabled], .dark .nav-link.disabled,
.dark .list-group-item[disabled], .dark .list-group-item.disabled {
    color: var(--neutral-500) !important;
}

.dark .glass-effect {
    background: rgba(var(--neutral-rgb-100, 51, 65, 85), 0.15);
    border-color: rgba(var(--neutral-rgb-300, 203, 213, 225), 0.15);
}

/* Scrollbars Dark Mode */
.dark ::-webkit-scrollbar-track {
    background: var(--neutral-800);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--neutral-600);
    border-color: var(--neutral-800);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--current-primary);
}

.dark * {
    scrollbar-color: var(--neutral-600) var(--neutral-800);
}

/* ============================================================================ */
/* XII. PRINT STYLES                                                          */
/* ============================================================================ */
@media print {
    body {
        background-color: white !important;
        color: black !important;
        font-size: 11pt;
        line-height: 1.4;
    }

    .sidebar, .site-header, .site-footer, .btn, .modal, .tooltip,
    .toast-container, .notification, .floating-action-btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 1cm !important;
        width: 100% !important;
    }

    .container {
        max-width: none !important;
        padding: 0 !important;
    }

    .course-header {
        margin-top: 0 !important;
        background-image: none !important;
        background-color: transparent !important;
        min-height: auto !important;
        color: black !important;
        padding: 1cm 0;
        border-bottom: 2px solid #999;
        text-align: left;
    }

    .course-header-overlay {
        display: none !important;
    }

    .course-title, .course-subtitle, .course-meta-item, .course-badge {
        color: black !important;
        text-shadow: none !important;
        background: none !important;
        backdrop-filter: none !important;
    }

    .course-badge {
        border: 1px solid #999;
        padding: 2px 6px;
        font-size: 0.9em;
    }

    .course-meta {
        justify-content: flex-start;
    }

    .course-meta-item {
        background: transparent !important;
        padding: 2px 0;
        font-size: 0.9em;
    }

    .component-showcase {
        background-color: white !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        padding: 0.5cm;
        margin-bottom: 0.5cm;
    }

    a {
        color: #0000ee !important;
        text-decoration: underline !important;
    }

    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "" !important;
    }

    a[href^="http"]:not([href*="legaltech.com.gt"]):after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }

    table, .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    th, td {
        border: 1px solid #ccc !important;
        padding: 4px 6px !important;
    }

    thead th {
        background-color: #eee !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    header.site-header .site-logo img.logo-img {
        height: 2.2rem !important;
        width: auto;
    }

    pre, code {
        background-color: #f8f8f8 !important;
        border: 1px solid #ddd !important;
        color: black !important;
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        transition: none !important;
        animation: none !important;
    }

    .card, .accordion-item, .table, .demo-section, blockquote {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
        page-break-after: avoid;
        color: black !important;
        font-weight: bold;
    }

    h1 { font-size: 20pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 16pt; }
}

/* ============================================================================ */
/* XIII. ACCESSIBILITY ENHANCEMENTS                                           */
/* ============================================================================ */
@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;
    }

    .course-header {
        background-attachment: scroll !important;
    }
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.list-group-item:focus-visible,
.accordion-button:focus-visible,
.sidebar-toggle:focus-visible,
.theme-toggle-btn:focus-visible,
.tag-chip-remove:focus-visible,
.tag-input-field:focus-visible,
.notification-close:focus-visible,
.btn-close:focus-visible {
    outline: 3px solid var(--current-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--current-primary-rgb, 59, 130, 246), 0.35);
}

@media (prefers-contrast: high) {
    :root {
        --neutral-200: #000000;
        --neutral-300: #000000;
        --current-primary: #0000ff;
        --current-secondary: #0000aa;
        --success-500: #008000;
        --danger-500: #ff0000;
    }

    .btn {
        border: 2px solid currentColor !important;
        background-image: none !important;
    }

    .card {
        border: 2px solid var(--neutral-900) !important;
    }
}

.sr-announcement {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--danger-500);
}

.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* ============================================================================ */
/* XIV. SPECIALIZED COMPONENTS                                                */
/* ============================================================================ */
.specialized-container {
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin: var(--space-6) 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.specialized-tabs {
    display: flex;
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
}

.specialized-tab {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--neutral-600);
    transition: all var(--transition-fast);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.specialized-tab:hover {
    background: var(--neutral-50);
    color: var(--current-primary);
}

.specialized-tab.active {
    background: var(--neutral-0);
    color: var(--current-primary);
    font-weight: 600;
}

.specialized-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--current-primary);
}

.specialized-content {
    padding: var(--space-8);
    min-height: 400px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.specialized-pane {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.specialized-pane.active {
    display: block;
}

.specialized-controls {
    margin-top: var(--space-6);
    text-align: center;
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Timeline specific styles */
.timeline-container {
    position: relative;
    padding: var(--space-4) 0;
    max-height: 300px;
    overflow-y: auto;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--neutral-300);
    transform: translateX(-50%);
    border-radius: var(--radius-full);
}

.timeline-item {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + var(--space-6));
    position: relative;
    margin-bottom: var(--space-8);
}

.timeline-item:nth-child(odd) {
    justify-content: flex-start;
    padding-left: calc(50% + var(--space-6));
    padding-right: 0;
}

.timeline-item-content {
    background: var(--neutral-0);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: calc(50% - var(--space-6));
    position: relative;
    border-left: 4px solid var(--current-primary);
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.timeline-item:nth-child(odd) .timeline-item-content {
    border-left: none;
    border-right: 4px solid var(--current-primary);
}

.timeline-item-content:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.timeline-dot {
    position: absolute;
    top: calc(var(--space-4) + var(--text-base) * 0.6);
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--current-primary);
    border: 3px solid var(--neutral-0);
    z-index: 1;
}

.timeline-date {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
}

.timeline-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--neutral-800);
}

.timeline-description {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.timeline-controls {
    margin-top: var(--space-6);
    text-align: center;
}

/* Wizard specific styles */
.wizard-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 600px;
    margin: 0 auto;
}

.wizard-steps {
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--neutral-200);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--neutral-400);
    position: relative;
    flex: 1;
}

.wizard-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
    transition: all var(--transition-base);
}

.wizard-step-label {
    font-size: var(--text-sm);
    font-weight: 500;
}

.wizard-step.active .wizard-step-icon {
    background-color: var(--current-primary);
    color: white;
    transform: scale(1.1);
    box-shadow: var(--shadow-theme-colored);
}

.wizard-step.active .wizard-step-label {
    color: var(--current-primary);
    font-weight: 600;
}

.wizard-step.completed .wizard-step-icon {
    background-color: var(--success-500);
    color: white;
}

.wizard-step.completed .wizard-step-label {
    color: var(--success-600);
}

.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 3px;
    background-color: var(--neutral-200);
    z-index: -1;
    transition: background-color var(--transition-base);
}

.wizard-step.completed::after {
    background-color: var(--success-500);
}

.wizard-step.active::after {
    background-color: var(--current-primary);
}

.wizard-content .wizard-pane {
    display: none;
    animation: fadeIn 0.5s var(--transition-base) forwards;
}

.wizard-content .wizard-pane.active {
    display: block;
}

.wizard-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-6);
}

/* Floating Action Button */
.floating-action-btn {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    transition: all var(--transition-fast);
    z-index: var(--z-fixed);
}

.floating-action-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-2xl);
}

.floating-action-btn:active {
    transform: scale(0.95);
}

/* Status Indicator */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success-500);
    animation: pulse-dot 2s infinite;
}

.pulse-dot.warning {
    background-color: var(--warning-500);
}

.pulse-dot.danger {
    background-color: var(--danger-500);
}

.pulse-dot.info {
    background-color: var(--info-500);
}

/* Advanced Sections */
.advanced-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--neutral-300);
}

.advanced-section .section-header h3 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.advanced-section .section-meta {
    font-size: var(--text-sm);
    color: var(--neutral-500);
}

.advanced-section .section-meta span:not(:last-child) {
    margin-right: var(--space-4);
}

.advanced-section .subsection h4 {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--neutral-700);
    transition: color var(--transition-fast);
}

.advanced-section .subsection h4:hover {
    color: var(--current-primary);
}

.advanced-section .subsection-toggle {
    transition: transform var(--transition-base);
}

.advanced-section .subsection h4.open .subsection-toggle {
    transform: rotate(90deg);
}

.advanced-section .subsection-content {
    padding-left: calc(var(--space-2) + 1em);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) ease-in-out, padding-top var(--transition-slow), padding-bottom var(--transition-slow);
}

.advanced-section .subsection-content.open {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.advanced-section .subsection-examples {
    margin-top: var(--space-3);
}

.advanced-section .elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.advanced-section .element-card {
    background: var(--neutral-100);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
}

.advanced-section .element-card h5 {
    margin-top: 0;
    margin-bottom: var(--space-2);
    color: var(--current-primary);
}

/* ============================================================================ */
/* XV. CORRECTIONS & OVERRIDES                                                */
/* ============================================================================ */

/* Global overflow fixes */
html, body {
    overflow-x: hidden !important;
    width: 100%;
}

/* Layout corrections for no-sidebar */
body.no-sidebar-layout .main-content,
body.no-sidebar-layout .course-header,
body.no-sidebar-layout .site-footer {
    margin-left: 0 !important;
    width: 100% !important;
}

body.no-sidebar-layout .site-header {
    margin-left: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

body.no-sidebar-layout .site-header .container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile overflow fixes */
@media (max-width: 1023px) {
    .site-header,
    .course-header,
    .main-content,
    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* Ensure responsive containers */
@media (max-width: 767px) {
    .container {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .row {
        margin-left: calc(var(--space-2) * -1) !important;
        margin-right: calc(var(--space-2) * -1) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .col, [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .card, .component-showcase, .specialized-container,
    .resource-list, .quick-access, .showcase-intro,
    .interactive-playground, .demo-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-left: var(--space-3) !important;
        padding-right: var(--space-3) !important;
    }

    .component-grid, .grid-container {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-content {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    .header-content {
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
        gap: var(--space-2);
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .course-header-content {
        padding: var(--space-6) var(--space-3) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .specialized-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    .specialized-tabs {
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
    }

    .specialized-tab {
        width: 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid var(--neutral-200);
        flex: none !important;
    }

    .specialized-tab:last-child {
        border-bottom: none;
    }

    .specialized-content {
        padding: var(--space-4) var(--space-2) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--space-2) !important;
        padding-right: var(--space-2) !important;
    }

    .footer-section {
        margin-bottom: var(--space-4);
    }

    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 479px) {
    .container {
        padding-left: var(--space-1) !important;
        padding-right: var(--space-1) !important;
    }

    .row {
        margin-left: calc(var(--space-1) * -1) !important;
        margin-right: calc(var(--space-1) * -1) !important;
    }

    .col, [class*="col-"] {
        padding-left: var(--space-1) !important;
        padding-right: var(--space-1) !important;
    }

    .main-content {
        padding-left: var(--space-1) !important;
        padding-right: var(--space-1) !important;
    }

    .card-body, .component-showcase, .specialized-content {
        padding: var(--space-2) !important;
    }

    .showcase-intro p.text-lg {
        font-size: var(--text-base);
    }

    .container {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

/* Image responsive fixes */
img, .toolkit-image, .toolkit-image-diagram {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box !important;
}

/* Debug utilities (remove in production) */
.debug-responsive * {
    outline: 1px solid red !important;
    box-sizing: border-box !important;
}

.debug-overflow {
    position: relative;
}

.debug-overflow * {
    outline: 1px solid blue !important;
}

.debug-overflow *:after {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
    background: yellow;
    z-index: 9999;
}

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

::-webkit-scrollbar-track {
    background: var(--neutral-100);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 3px solid var(--neutral-100);
    transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--current-primary);
}

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

/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--neutral-300) var(--neutral-100);
}

/* Ensure proper z-index stacking */
.sidebar {
    z-index: var(--z-sidebar-mobile);
}

.site-header {
    z-index: var(--z-sticky);
}

.modal {
    z-index: var(--z-modal);
}

.toast-container {
    z-index: var(--z-toast);
}

.tooltip {
    z-index: var(--z-tooltip);
}

.dropdown-menu {
    z-index: var(--z-dropdown);
}

/* Final layout corrections */
@media (min-width: 1024px) {
    body:not(.no-sidebar-layout) .site-header {
        left: 280px;
        width: calc(100% - 280px);
    }

    body:not(.no-sidebar-layout) .course-header,
    body:not(.no-sidebar-layout) .main-content,
    body:not(.no-sidebar-layout) .site-footer {
        margin-left: 280px;
        width: calc(100% - 280px);
    }
}

/* Ensure smooth animations but not excessive */
.btn, .card, .component-showcase {
    transition: all var(--transition-fast) !important;
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98) !important;
    transition: all 0.1s ease !important;
}

.card:hover, .component-showcase:hover {
    transform: translateY(-1px) !important;
}





/* ============================================================================ */
/* XVI. CREATIVE & ADVANCED COMPONENTS                                        */
/* ============================================================================ */

/* ================ ORGANIZATIONAL DIAGRAMS ================ */
.org-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--current-bg-color), var(--neutral-50));
    border-radius: var(--radius-2xl);
    border: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
}

.org-level {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    position: relative;
}

.org-box {
    background: var(--neutral-0);
    border: 2px solid var(--current-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-6);
    text-align: center;
    min-width: 200px;
    position: relative;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-all);
}

.org-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--current-accent);
}

.org-box h3 {
    color: var(--current-primary);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
}

.org-box p {
    color: var(--neutral-600);
    font-size: 0.875rem;
    margin: 0;
}

.org-connector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: var(--space-8);
    background: var(--current-primary);
    opacity: 0.6;
}

/* ================ STATISTICS CARDS ================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.stat-card {
    background: var(--neutral-0);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
    transition: var(--transition-all);
}

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

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

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--current-primary);
    line-height: 1;
    margin: 0 0 var(--space-2) 0;
    font-family: var(--current-font-secondary);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--neutral-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-description {
    font-size: 0.875rem;
    color: var(--neutral-500);
    margin-top: var(--space-1);
    line-height: 1.4;
}

/* ================ 4IR TECHNOLOGY COMPONENTS ================ */
.tech-timeline {
    position: relative;
    padding: var(--space-8) 0;
}

.tech-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--current-primary), var(--current-accent));
    transform: translateX(-50%);
}

.tech-era {
    display: flex;
    align-items: center;
    margin: var(--space-8) 0;
    position: relative;
}

.tech-era:nth-child(even) {
    flex-direction: row-reverse;
}

.tech-era-content {
    flex: 1;
    background: var(--neutral-0);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--neutral-200);
    margin: 0 var(--space-8);
    position: relative;
}

.tech-era-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
}

.tech-era:nth-child(odd) .tech-era-content::before {
    right: -24px;
    border-left-color: var(--neutral-0);
    transform: translateY(-50%);
}

.tech-era:nth-child(even) .tech-era-content::before {
    left: -24px;
    border-right-color: var(--neutral-0);
    transform: translateY(-50%);
}

.tech-era-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--current-primary);
    border-radius: 50%;
    border: 4px solid var(--neutral-0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: var(--shadow-lg);
}

.tech-era-marker i {
    color: white;
    font-size: 1.5rem;
}

.tech-era-period {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--current-primary);
    margin: 0 0 var(--space-2) 0;
}

.tech-era-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 var(--space-3) 0;
}

.tech-era-description {
    color: var(--neutral-600);
    line-height: 1.6;
}

/* ================ EXPONENTIAL GROWTH INDICATORS ================ */
.growth-chart {
    background: linear-gradient(135deg, var(--current-bg-color), var(--neutral-50));
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
}

.growth-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 70%);
    pointer-events: none;
}

.growth-line {
    height: 200px;
    width: 100%;
    background: linear-gradient(
        to right, 
        transparent 0%, 
        transparent 10%, 
        var(--current-primary) 10%, 
        var(--current-primary) 20%,
        transparent 20%,
        transparent 30%,
        var(--current-primary) 30%,
        var(--current-primary) 50%,
        transparent 50%,
        transparent 60%,
        var(--current-primary) 60%,
        var(--current-primary) 100%
    );
    border-radius: var(--radius-lg);
    position: relative;
    clip-path: polygon(0 100%, 10% 80%, 30% 60%, 60% 30%, 100% 0%, 100% 100%);
    animation: growthAnimation 3s ease-out;
}

@keyframes growthAnimation {
    from {
        clip-path: polygon(0 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(0 100%, 10% 80%, 30% 60%, 60% 30%, 100% 0%, 100% 100%);
    }
}

/* ================ TECHNOLOGY ECOSYSTEM CARDS ================ */
.tech-ecosystem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.tech-card {
    background: var(--neutral-0);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    border: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
    transition: var(--transition-all);
    cursor: pointer;
}

.tech-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--current-primary)20, transparent 60%);
    opacity: 0;
    transition: var(--transition-normal);
}

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

.tech-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
}

.tech-icon i {
    font-size: 1.5rem;
    color: white;
}

.tech-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
    position: relative;
    z-index: 1;
}

.tech-description {
    color: var(--neutral-600);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.tech-tag {
    background: var(--current-primary)20;
    color: var(--current-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ================ CASE STUDY CAROUSEL ================ */
.case-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
}

.case-slides {
    display: flex;
    transition: transform 0.5s ease;
}

.case-slide {
    min-width: 100%;
    padding: var(--space-8);
    background: linear-gradient(135deg, var(--current-bg-color), var(--neutral-50));
}

.case-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.case-flag {
    width: 60px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--current-primary), var(--current-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
}

.case-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0;
}

.case-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.case-stat {
    text-align: center;
    padding: var(--space-4);
    background: var(--neutral-0);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
}

.case-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--current-primary);
    margin: 0;
}

.case-stat-label {
    font-size: 0.75rem;
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--space-1) 0 0 0;
}

.case-benefits {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
}

.case-benefits li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--neutral-700);
}

.case-benefits li::before {
    content: '✓';
    color: var(--success-600);
    font-weight: 700;
    font-size: 1.125rem;
}

.carousel-controls {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-2);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neutral-300);
    cursor: pointer;
    transition: var(--transition-colors);
}

.carousel-dot.active {
    background: var(--current-primary);
}

/* ================ INTERACTIVE INTEGRATIONS ================ */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.integration-card {
    background: var(--neutral-0);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    border: 1px solid var(--neutral-200);
    position: relative;
    transition: var(--transition-all);
    cursor: pointer;
}

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

.integration-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.integration-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.integration-plus {
    color: var(--current-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.ai-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.blockchain-icon { background: linear-gradient(135deg, #10b981, #047857); }
.ar-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.iot-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.quantum-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }

.integration-title {
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--space-3) 0;
}

.integration-description {
    font-size: 0.875rem;
    color: var(--neutral-600);
    text-align: center;
    line-height: 1.5;
}

/* ================ RESPONSIVE ADAPTATIONS ================ */
@media (max-width: 768px) {
    .org-level {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .org-box {
        min-width: auto;
        width: 100%;
        max-width: 280px;
    }
    
    .tech-timeline::before {
        left: var(--space-4);
    }
    
    .tech-era {
        flex-direction: column;
        align-items: flex-start;
        padding-left: var(--space-8);
    }
    
    .tech-era-marker {
        left: var(--space-4);
    }
    
    .tech-era-content {
        margin: 0;
        width: 100%;
    }
    
    .case-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-number {
        font-size: 2rem;
    }
}

/* ================ DARK MODE ADAPTATIONS ================ */
.dark .org-diagram,
.dark .growth-chart,
.dark .case-slide {
    background: linear-gradient(135deg, var(--neutral-900), var(--neutral-800));
}

.dark .org-box,
.dark .stat-card,
.dark .tech-card,
.dark .tech-era-content,
.dark .case-carousel,
.dark .case-stat,
.dark .integration-card {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
}

.dark .stat-label,
.dark .stat-description,
.dark .tech-description,
.dark .case-benefits li,
.dark .integration-description {
    color: var(--neutral-400);
}

.dark .case-title,
.dark .tech-title,
.dark .integration-title {
    color: var(--neutral-100);
}



/* ============================================================================ */
/* XVII. ADVANCED ANIMATIONS & MICRO-INTERACTIONS                             */
/* ============================================================================ */

/* ================ KEYFRAME ANIMATIONS ================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

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

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

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-30px); }
    70% { transform: translateY(-15px); }
    90% { transform: translateY(-4px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes glow {
    from { box-shadow: 0 0 5px var(--current-primary); }
    to { box-shadow: 0 0 20px var(--current-primary), 0 0 30px var(--current-primary); }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

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

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

@keyframes morphing {
    0%, 100% { border-radius: var(--radius-xl); }
    25% { border-radius: var(--radius-full); }
    50% { border-radius: var(--radius-sm); }
    75% { border-radius: var(--radius-2xl); }
}

/* ================ ANIMATION UTILITY CLASSES ================ */
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-fade-in-down { animation: fadeInDown 0.6s ease-out; }
.animate-fade-in-left { animation: fadeInLeft 0.6s ease-out; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease-out; }
.animate-scale-in { animation: scaleIn 0.6s ease-out; }
.animate-slide-up { animation: slideUp 0.6s ease-out; }
.animate-slide-down { animation: slideDown 0.6s ease-out; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-glow { animation: glow 2s ease-in-out infinite alternate; }
.animate-rotate { animation: rotate 2s linear infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-morphing { animation: morphing 4s ease-in-out infinite; }

/* Animation Delays */
.animate-delay-75 { animation-delay: 75ms; }
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-150 { animation-delay: 150ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-700 { animation-delay: 700ms; }
.animate-delay-1000 { animation-delay: 1000ms; }

/* ================ ADVANCED HOVER EFFECTS ================ */
.hover-lift {
    transition: var(--transition-all);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hover-grow {
    transition: var(--transition-transform);
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-shrink {
    transition: var(--transition-transform);
}

.hover-shrink:hover {
    transform: scale(0.95);
}

.hover-rotate {
    transition: var(--transition-transform);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-tilt {
    transition: var(--transition-transform);
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
}

.hover-glow {
    transition: var(--transition-all);
}

.hover-glow:hover {
    box-shadow: 0 0 20px var(--current-primary)40;
    border-color: var(--current-primary);
}

.hover-slide {
    position: relative;
    overflow: hidden;
}

.hover-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.hover-slide:hover::before {
    left: 100%;
}

/* ================ LOADING STATES ================ */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--neutral-300);
    border-radius: 50%;
    border-top-color: var(--current-primary);
    animation: rotate 1s ease-in-out infinite;
}

.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--current-primary);
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-dot:nth-child(2) { animation-delay: 0.1s; }
.loading-dot:nth-child(3) { animation-delay: 0.2s; }

.loading-bar {
    width: 100%;
    height: 4px;
    background: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.loading-bar::before {
    content: '';
    display: block;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, var(--current-primary), var(--current-accent));
    border-radius: var(--radius-full);
    animation: loading-slide 2s ease-in-out infinite;
}

@keyframes loading-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.skeleton {
    background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================ ENHANCED RIPPLE EFFECTS ================ */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple-effect:active::before {
    width: 300px;
    height: 300px;
}

/* ================ PARALLAX & 3D EFFECTS ================ */
.parallax-container {
    perspective: 1000px;
    overflow: hidden;
}

.parallax-element {
    transform-style: preserve-3d;
    transition: transform 0.1s;
}

.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.3s;
}

.card-3d:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

.depth-1 { transform: translateZ(10px); }
.depth-2 { transform: translateZ(20px); }
.depth-3 { transform: translateZ(30px); }
.depth-4 { transform: translateZ(40px); }
.depth-5 { transform: translateZ(50px); }

/* ================ GLASSMORPHISM EFFECTS ================ */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ================ PARTICLE EFFECTS ================ */
.particles-bg {
    position: relative;
    overflow: hidden;
}

.particles-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, var(--current-primary)20 0, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--current-accent)20 0, transparent 50%),
        radial-gradient(circle at 40% 60%, var(--current-primary)10 0, transparent 50%);
    animation: particles-float 20s ease-in-out infinite;
}

@keyframes particles-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(120deg); }
    66% { transform: translateY(-10px) rotate(240deg); }
}

/* ================ INTERACTIVE REVEAL EFFECTS ================ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

.mask-reveal {
    position: relative;
    overflow: hidden;
}

.mask-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--neutral-0), transparent);
    animation: mask-slide 2s ease-in-out;
}

@keyframes mask-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ================ STAGGER ANIMATIONS ================ */
.stagger-children > * {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }




/* ============================================================================ */
/* XVIII. PREMIUM NOTIFICATION SYSTEM                                         */
/* ============================================================================ */

.notification-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-notification);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 400px;
    width: 100%;
}

.notification {
    background: var(--neutral-0);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--neutral-200);
    position: relative;
    overflow: hidden;
    transform: translateX(100%);
    animation: notificationSlideIn 0.3s ease-out forwards;
}

@keyframes notificationSlideIn {
    to { transform: translateX(0); }
}

.notification.removing {
    animation: notificationSlideOut 0.3s ease-in forwards;
}

@keyframes notificationSlideOut {
    to { transform: translateX(100%); }
}

.notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--current-primary);
}

.notification.success::before { background: var(--success-500); }
.notification.warning::before { background: var(--warning-500); }
.notification.error::before { background: var(--danger-500); }
.notification.info::before { background: var(--info-500); }

.notification-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.notification-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification.success .notification-icon {
    background: var(--success-100);
    color: var(--success-600);
}

.notification.warning .notification-icon {
    background: var(--warning-100);
    color: var(--warning-600);
}

.notification.error .notification-icon {
    background: var(--danger-100);
    color: var(--danger-600);
}

.notification.info .notification-icon {
    background: var(--info-100);
    color: var(--info-600);
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0 0 var(--space-1) 0;
    color: var(--neutral-900);
}

.notification-message {
    font-size: 0.875rem;
    color: var(--neutral-600);
    line-height: 1.4;
    margin: 0;
}

.notification-close {
    background: none;
    border: none;
    color: var(--neutral-400);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    transition: var(--transition-colors);
    flex-shrink: 0;
}

.notification-close:hover {
    color: var(--neutral-600);
    background: var(--neutral-100);
}

.notification-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--neutral-200);
}

.notification-btn {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-all);
}

.notification-btn-primary {
    background: var(--current-primary);
    color: white;
}

.notification-btn-primary:hover {
    background: var(--current-secondary);
}

.notification-btn-secondary {
    background: var(--neutral-100);
    color: var(--neutral-700);
}

.notification-btn-secondary:hover {
    background: var(--neutral-200);
}

.notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--current-primary);
    transition: width linear;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.notification.success .notification-progress { background: var(--success-500); }
.notification.warning .notification-progress { background: var(--warning-500); }
.notification.error .notification-progress { background: var(--danger-500); }
.notification.info .notification-progress { background: var(--info-500); }

/* Notification Variants */
.notification-floating {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.notification-minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: var(--space-3);
}

.notification-minimal::before {
    display: none;
}

@media (max-width: 640px) {
    .notification-container {
        left: var(--space-4);
        right: var(--space-4);
        max-width: none;
    }
}


/* ============================================================================ */
/* XIX. INTELLIGENT FORM COMPONENTS                                           */
/* ============================================================================ */

.smart-form {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-6);
}

.form-group {
    margin-bottom: var(--space-6);
    position: relative;
}

.form-label {
    display: block;
    font-weight: 500;
    color: var(--neutral-700);
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
    transition: var(--transition-colors);
}

.dark .form-label {
    color: var(--neutral-300);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    background: var(--neutral-0);
    color: var(--neutral-900);
    transition: var(--transition-all);
    font-family: var(--current-font-primary);
}

.form-control:focus {
    outline: none;
    border-color: var(--current-primary);
    box-shadow: 0 0 0 3px var(--current-primary)20;
    transform: translateY(-1px);
}

.form-control:hover:not(:focus) {
    border-color: var(--neutral-300);
}

.dark .form-control {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
    color: var(--neutral-100);
}

.dark .form-control:focus {
    border-color: var(--current-primary);
    box-shadow: 0 0 0 3px var(--current-primary)30;
}

/* Floating Labels */
.form-group-floating {
    position: relative;
}

.form-control-floating {
    padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4);
}

.form-label-floating {
    position: absolute;
    top: var(--space-3);
    left: var(--space-4);
    background: var(--neutral-0);
    padding: 0 var(--space-1);
    transition: var(--transition-all);
    pointer-events: none;
    color: var(--neutral-500);
}

.form-control-floating:focus + .form-label-floating,
.form-control-floating:not(:placeholder-shown) + .form-label-floating {
    top: -8px;
    left: var(--space-3);
    font-size: 0.75rem;
    color: var(--current-primary);
    font-weight: 500;
}

.dark .form-label-floating {
    background: var(--neutral-800);
}

/* Input States */
.form-control.is-valid {
    border-color: var(--success-500);
    box-shadow: 0 0 0 3px var(--success-500)20;
}

.form-control.is-invalid {
    border-color: var(--danger-500);
    box-shadow: 0 0 0 3px var(--danger-500)20;
}

.form-feedback {
    font-size: 0.875rem;
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-feedback.valid {
    color: var(--success-600);
}

.form-feedback.invalid {
    color: var(--danger-600);
}

.form-feedback i {
    font-size: 1rem;
}

/* Advanced Input Types */
.input-group {
    position: relative;
    display: flex;
}

.input-group-text {
    background: var(--neutral-100);
    border: 2px solid var(--neutral-200);
    border-right: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    color: var(--neutral-600);
    font-weight: 500;
}

.input-group .form-control {
    border-left: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.input-group .form-control:focus {
    z-index: 1;
}

/* Search Input with Icon */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    z-index: 1;
}

.search-input-wrapper .form-control {
    padding-left: calc(var(--space-4) + 1.5rem);
}

/* File Upload Enhanced */
.file-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 2px dashed var(--neutral-300);
    padding: var(--space-8);
    text-align: center;
    transition: var(--transition-all);
    background: var(--neutral-50);
}

.file-upload:hover {
    border-color: var(--current-primary);
    background: var(--current-primary)10;
}

.file-upload input[type="file"] {
    position: absolute;
    left: -9999px;
}

.file-upload-icon {
    font-size: 3rem;
    color: var(--neutral-400);
    margin-bottom: var(--space-4);
}

.file-upload-text {
    color: var(--neutral-600);
    font-weight: 500;
}

.file-upload.dragover {
    border-color: var(--current-primary);
    background: var(--current-primary)20;
    transform: scale(1.02);
}

/* Range Slider Enhanced */
.range-slider {
    position: relative;
    margin: var(--space-4) 0;
}

.range-input {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--neutral-200);
    outline: none;
    transition: var(--transition-all);
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--current-primary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-all);
}

.range-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.range-input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--current-primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-md);
    transition: var(--transition-all);
}

.range-value {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--neutral-900);
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    transform: translateX(-50%);
    opacity: 0;
    transition: var(--transition-all);
}

.range-value::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--neutral-900);
}

.range-input:active + .range-value,
.range-input:focus + .range-value {
    opacity: 1;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--neutral-300);
    transition: var(--transition-all);
    border-radius: var(--radius-full);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background: white;
    transition: var(--transition-all);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

input:checked + .toggle-slider {
    background: var(--current-primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(30px);
}

.toggle-slider:hover:before {
    box-shadow: var(--shadow-md);
}

/* Multi-Step Form Progress */
.form-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    position: relative;
}

.form-steps::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--neutral-200);
    z-index: 0;
}

.form-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background: var(--neutral-0);
    padding: var(--space-2);
}

.form-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--neutral-200);
    color: var(--neutral-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--space-2);
    transition: var(--transition-all);
}

.form-step.active .form-step-number {
    background: var(--current-primary);
    color: white;
}

.form-step.completed .form-step-number {
    background: var(--success-500);
    color: white;
}

.form-step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--neutral-600);
    text-align: center;
}

.form-step.active .form-step-label {
    color: var(--current-primary);
}

.form-step.completed .form-step-label {
    color: var(--success-600);
}

/* Form Animation States */
.form-slide-enter {
    transform: translateX(100%);
    opacity: 0;
}

.form-slide-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: var(--transition-all);
}

.form-slide-exit {
    transform: translateX(0);
    opacity: 1;
}

.form-slide-exit-active {
    transform: translateX(-100%);
    opacity: 0;
    transition: var(--transition-all);
}


/* ============================================================================ */
/* XX. ADVANCED TOOLTIP SYSTEM                                                */
/* ============================================================================ */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    z-index: var(--z-tooltip);
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-900);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-all);
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.tooltip::before {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

/* Tooltip Positions */
.tooltip-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

.tooltip-top::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--neutral-900);
}

.tooltip-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

.tooltip-bottom::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--neutral-900);
}

.tooltip-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

.tooltip-left::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--neutral-900);
}

.tooltip-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

.tooltip-right::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--neutral-900);
}

/* Tooltip Show States */
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tooltip-wrapper:hover .tooltip-left,
.tooltip-wrapper:focus-within .tooltip-left {
    transform: translateY(-50%) translateX(0);
}

.tooltip-wrapper:hover .tooltip-right,
.tooltip-wrapper:focus-within .tooltip-right {
    transform: translateY(-50%) translateX(0);
}

/* Tooltip Variants */
.tooltip-primary {
    background: var(--current-primary);
}

.tooltip-primary::before {
    border-top-color: var(--current-primary);
    border-bottom-color: var(--current-primary);
    border-left-color: var(--current-primary);
    border-right-color: var(--current-primary);
}

.tooltip-success {
    background: var(--success-600);
}

.tooltip-success::before {
    border-top-color: var(--success-600);
    border-bottom-color: var(--success-600);
    border-left-color: var(--success-600);
    border-right-color: var(--success-600);
}

.tooltip-warning {
    background: var(--warning-600);
    color: var(--neutral-900);
}

.tooltip-warning::before {
    border-top-color: var(--warning-600);
    border-bottom-color: var(--warning-600);
    border-left-color: var(--warning-600);
    border-right-color: var(--warning-600);
}

.tooltip-error {
    background: var(--danger-600);
}

.tooltip-error::before {
    border-top-color: var(--danger-600);
    border-bottom-color: var(--danger-600);
    border-left-color: var(--danger-600);
    border-right-color: var(--danger-600);
}

/* Rich Tooltips */
.tooltip-rich {
    white-space: normal;
    max-width: 300px;
    padding: var(--space-4);
    background: var(--neutral-0);
    color: var(--neutral-900);
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-xl);
}

.dark .tooltip-rich {
    background: var(--neutral-800);
    color: var(--neutral-100);
    border-color: var(--neutral-700);
}

.tooltip-rich::before {
    border-top-color: var(--neutral-0);
    border-bottom-color: var(--neutral-0);
    border-left-color: var(--neutral-0);
    border-right-color: var(--neutral-0);
}

.dark .tooltip-rich::before {
    border-top-color: var(--neutral-800);
    border-bottom-color: var(--neutral-800);
    border-left-color: var(--neutral-800);
    border-right-color: var(--neutral-800);
}

.tooltip-title {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--current-primary);
}

.tooltip-content {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Interactive Tooltips */
.tooltip-interactive {
    pointer-events: auto;
    cursor: auto;
}

.tooltip-interactive:hover {
    opacity: 1;
    visibility: visible;
}


/* ============================================================================ */
/* XXI. INTELLIGENT TABLE COMPONENTS                                          */
/* ============================================================================ */

.table-container {
    background: var(--neutral-0);
    border-radius: var(--radius-xl);
    border: 1px solid var(--neutral-200);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.dark .table-container {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
}

.table-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--neutral-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--neutral-50);
}

.dark .table-header {
    background: var(--neutral-900);
    border-bottom-color: var(--neutral-700);
}

.table-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-900);
}

.dark .table-title {
    color: var(--neutral-100);
}

.table-controls {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.table-search {
    position: relative;
}

.table-search input {
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    background: var(--neutral-0);
    min-width: 200px;
}

.table-search i {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    font-size: 0.875rem;
}

.smart-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.smart-table th {
    padding: var(--space-4) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--neutral-700);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
    position: relative;
    cursor: pointer;
    transition: var(--transition-colors);
    user-select: none;
}

.dark .smart-table th {
    background: var(--neutral-900);
    color: var(--neutral-300);
    border-bottom-color: var(--neutral-700);
}

.smart-table th:hover {
    background: var(--neutral-100);
}

.dark .smart-table th:hover {
    background: var(--neutral-800);
}

.smart-table th.sortable::after {
    content: '\f0dc';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: var(--space-3);
    opacity: 0.5;
    font-size: 0.75rem;
}

.smart-table th.sort-asc::after {
    content: '\f0de';
    opacity: 1;
    color: var(--current-primary);
}

.smart-table th.sort-desc::after {
    content: '\f0dd';
    opacity: 1;
    color: var(--current-primary);
}

.smart-table td {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--neutral-200);
    color: var(--neutral-700);
    transition: var(--transition-colors);
}

.dark .smart-table td {
    border-bottom-color: var(--neutral-700);
    color: var(--neutral-300);
}

.smart-table tr {
    transition: var(--transition-colors);
}

.smart-table tbody tr:hover {
    background: var(--neutral-50);
}

.dark .smart-table tbody tr:hover {
    background: var(--neutral-800);
}

.smart-table tbody tr:nth-child(even) {
    background: var(--neutral-25);
}

.dark .smart-table tbody tr:nth-child(even) {
    background: var(--neutral-850);
}

/* Table Status Indicators */
.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.table-status-active {
    background: var(--success-100);
    color: var(--success-700);
}

.table-status-inactive {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.table-status-pending {
    background: var(--warning-100);
    color: var(--warning-700);
}

.table-status-error {
    background: var(--danger-100);
    color: var(--danger-700);
}

.table-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Table Actions */
.table-actions {
    display: flex;
    gap: var(--space-2);
}

.table-action-btn {
    padding: var(--space-1) var(--space-2);
    border: none;
    background: var(--neutral-100);
    color: var(--neutral-600);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    font-size: 0.75rem;
}

.table-action-btn:hover {
    background: var(--neutral-200);
    color: var(--neutral-800);
    transform: translateY(-1px);
}

.table-action-btn.edit:hover {
    background: var(--info-100);
    color: var(--info-700);
}

.table-action-btn.delete:hover {
    background: var(--danger-100);
    color: var(--danger-700);
}

/* Responsive Table */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .smart-table,
    .smart-table thead,
    .smart-table tbody,
    .smart-table th,
    .smart-table td,
    .smart-table tr {
        display: block;
    }

    .smart-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .smart-table tr {
        border: 1px solid var(--neutral-200);
        margin-bottom: var(--space-4);
        border-radius: var(--radius-lg);
        background: var(--neutral-0);
        padding: var(--space-4);
    }

    .dark .smart-table tr {
        background: var(--neutral-800);
        border-color: var(--neutral-700);
    }

    .smart-table td {
        border: none;
        position: relative;
        padding: var(--space-2) var(--space-4) var(--space-2) 35%;
    }

    .smart-table td::before {
        content: attr(data-label);
        position: absolute;
        left: var(--space-4);
        top: var(--space-2);
        width: 30%;
        font-weight: 600;
        color: var(--neutral-600);
    }

    .dark .smart-table td::before {
        color: var(--neutral-400);
    }
}

/* Table Pagination */
.table-pagination {
    display: flex;
    justify-content: between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}

.dark .table-pagination {
    background: var(--neutral-900);
    border-top-color: var(--neutral-700);
}

.table-info {
    color: var(--neutral-600);
    font-size: 0.875rem;
}

.dark .table-info {
    color: var(--neutral-400);
}

.pagination {
    display: flex;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination-item {
    display: flex;
}

.pagination-link {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--neutral-300);
    background: var(--neutral-0);
    color: var(--neutral-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    font-size: 0.875rem;
}

.pagination-link:hover {
    background: var(--neutral-100);
    border-color: var(--neutral-400);
}

.pagination-item.active .pagination-link {
    background: var(--current-primary);
    border-color: var(--current-primary);
    color: white;
}

.pagination-item.disabled .pagination-link {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================================================ */
/* XXII. ANIMATED GRADIENT EFFECTS                                            */
/* ============================================================================ */

.gradient-animated {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}

.gradient-primary {
    background: linear-gradient(-45deg, var(--current-primary), var(--current-secondary), var(--current-accent), var(--current-primary));
    background-size: 400% 400%;
    animation: gradientAnimation 8s ease infinite;
}

.gradient-theme {
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
}

.gradient-theme-animated {
    background: linear-gradient(-45deg, var(--current-primary), var(--current-secondary), var(--current-accent), var(--theme-2-primary));
    background-size: 400% 400%;
    animation: gradientAnimation 12s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gradient Text Effects */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.text-gradient-animated {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: gradientAnimation 3s ease infinite;
}

.text-gradient-rainbow {
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow 3s ease-in-out infinite;
}

@keyframes rainbow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Gradient Borders */
.gradient-border {
    position: relative;
    background: var(--neutral-0);
    border-radius: var(--radius-xl);
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(45deg, var(--current-primary), var(--current-accent));
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-out;
}

.gradient-border-animated {
    position: relative;
    background: var(--neutral-0);
    border-radius: var(--radius-xl);
}

.gradient-border-animated::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 400% 400%;
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-out;
    animation: gradientAnimation 3s ease infinite;
}

/* Gradient Overlays */
.gradient-overlay {
    position: relative;
    overflow: hidden;
}

.gradient-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--current-primary)20, transparent 50%, var(--current-accent)20);
    opacity: 0;
    transition: var(--transition-normal);
}

.gradient-overlay:hover::before {
    opacity: 1;
}

/* Mesh Gradients */
.mesh-gradient-1 {
    background: radial-gradient(at 40% 20%, hsla(228, 74%, 67%, 1) 0px, transparent 50%),
                radial-gradient(at 80% 0%, hsla(189, 85%, 65%, 1) 0px, transparent 50%),
                radial-gradient(at 0% 50%, hsla(355, 85%, 65%, 1) 0px, transparent 50%),
                radial-gradient(at 80% 50%, hsla(340, 85%, 65%, 1) 0px, transparent 50%),
                radial-gradient(at 0% 100%, hsla(22, 74%, 67%, 1) 0px, transparent 50%),
                radial-gradient(at 80% 100%, hsla(242, 74%, 67%, 1) 0px, transparent 50%),
                radial-gradient(at 0% 0%, hsla(343, 74%, 67%, 1) 0px, transparent 50%);
}

.mesh-gradient-2 {
    background: radial-gradient(at 83% 67%, hsla(134, 75%, 76%, 1) 0px, transparent 50%),
                radial-gradient(at 67% 20%, hsla(240, 89%, 70%, 1) 0px, transparent 50%),
                radial-gradient(at 36% 72%, hsla(318, 98%, 71%, 1) 0px, transparent 50%),
                radial-gradient(at 99% 35%, hsla(130, 76%, 65%, 1) 0px, transparent 50%),
                radial-gradient(at 16% 97%, hsla(119, 89%, 75%, 1) 0px, transparent 50%);
}

/* Liquid Gradients */
.liquid-gradient {
    background: linear-gradient(45deg, var(--current-primary), var(--current-accent));
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: liquidAnimation 8s ease-in-out infinite;
}

@keyframes liquidAnimation {
    0%, 100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}

/* Glassmorphism with Gradients */
.glass-gradient {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-gradient-colored {
    background: linear-gradient(135deg, var(--current-primary)20, var(--current-accent)10);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--current-primary)30;
    box-shadow: 0 8px 32px 0 var(--current-primary)20;
}


/* ============================================================================ */
/* XXIII. ADVANCED DASHBOARD COMPONENTS                                       */
/* ============================================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.dashboard-card {
    background: var(--neutral-0);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--neutral-200);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
    position: relative;
    overflow: hidden;
}

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

.dark .dashboard-card {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
}

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

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

.dashboard-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-900);
}

.dark .dashboard-card-title {
    color: var(--neutral-100);
}

.dashboard-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

/* Metric Cards */
.metric-card {
    text-align: center;
    position: relative;
}

.metric-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--current-primary);
    line-height: 1;
    margin: 0 0 var(--space-2) 0;
    font-family: var(--current-font-secondary);
}

.metric-label {
    font-size: 0.875rem;
    color: var(--neutral-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-3) 0;
}

.dark .metric-label {
    color: var(--neutral-400);
}

.metric-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.metric-change.positive {
    background: var(--success-100);
    color: var(--success-700);
}

.metric-change.negative {
    background: var(--danger-100);
    color: var(--danger-700);
}

.metric-change.neutral {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

/* Progress Rings */
.progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-4) auto;
}

.progress-ring-circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progress-ring-background {
    stroke: var(--neutral-200);
}

.dark .progress-ring-background {
    stroke: var(--neutral-700);
}

.progress-ring-progress {
    stroke: var(--current-primary);
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 1s ease-in-out;
}

.progress-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--current-primary);
}

/* Activity Feed */
.activity-feed {
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--neutral-200);
}

.dark .activity-item {
    border-bottom-color: var(--neutral-700);
}

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

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.activity-icon.success {
    background: var(--success-100);
    color: var(--success-600);
}

.activity-icon.warning {
    background: var(--warning-100);
    color: var(--warning-600);
}

.activity-icon.error {
    background: var(--danger-100);
    color: var(--danger-600);
}

.activity-icon.info {
    background: var(--info-100);
    color: var(--info-600);
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 500;
    color: var(--neutral-900);
    margin: 0 0 var(--space-1) 0;
    font-size: 0.875rem;
}

.dark .activity-title {
    color: var(--neutral-100);
}

.activity-description {
    color: var(--neutral-600);
    font-size: 0.75rem;
    margin: 0 0 var(--space-1) 0;
}

.dark .activity-description {
    color: var(--neutral-400);
}

.activity-time {
    color: var(--neutral-500);
    font-size: 0.75rem;
}

.dark .activity-time {
    color: var(--neutral-500);
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 300px;
    margin: var(--space-4) 0;
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--neutral-50);
    border: 2px dashed var(--neutral-300);
    border-radius: var(--radius-lg);
    color: var(--neutral-500);
    font-size: 0.875rem;
}

.dark .chart-placeholder {
    background: var(--neutral-900);
    border-color: var(--neutral-700);
    color: var(--neutral-500);
}

/* Quick Actions */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--neutral-700);
    transition: var(--transition-all);
    cursor: pointer;
}

.quick-action:hover {
    background: var(--neutral-100);
    border-color: var(--current-primary);
    color: var(--current-primary);
    transform: translateY(-2px);
}

.dark .quick-action {
    background: var(--neutral-800);
    border-color: var(--neutral-700);
    color: var(--neutral-300);
}

.dark .quick-action:hover {
    background: var(--neutral-700);
    border-color: var(--current-primary);
    color: var(--current-primary);
}

.quick-action-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.quick-action-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

/* Status Overview */
.status-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.status-item {
    text-align: center;
}

.status-count {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--space-1) 0;
}

.status-count.success { color: var(--success-600); }
.status-count.warning { color: var(--warning-600); }
.status-count.error { color: var(--danger-600); }
.status-count.info { color: var(--info-600); }

.status-label {
    font-size: 0.75rem;
    color: var(--neutral-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dark .status-label {
    color: var(--neutral-400);
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .metric-value {
        font-size: 2rem;
    }
    
    .progress-ring {
        width: 80px;
        height: 80px;
    }
    
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .status-overview {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}



/* ============================================================================ */
/* XXIV. GAMIFICATION COMPONENTS                                              */
/* ============================================================================ */

/* Achievement Badges */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.achievement-badge {
    background: var(--neutral-0);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: var(--transition-all);
    cursor: pointer;
}

.achievement-badge:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.achievement-badge.unlocked {
    border-color: var(--warning-400);
    background: linear-gradient(135deg, var(--warning-50), var(--neutral-0));
}

.achievement-badge.unlocked::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 223, 0, 0.1), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.achievement-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-4) auto;
    background: linear-gradient(135deg, var(--neutral-300), var(--neutral-400));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: var(--transition-all);
}

.achievement-badge.unlocked .achievement-icon {
    background: linear-gradient(135deg, var(--warning-400), var(--warning-500));
    animation: bounce 1s ease-in-out;
}

.achievement-title {
    font-weight: 700;
    color: var(--neutral-800);
    margin: 0 0 var(--space-2) 0;
    font-size: 1rem;
}

.achievement-description {
    font-size: 0.875rem;
    color: var(--neutral-600);
    line-height: 1.4;
}

.achievement-badge.unlocked .achievement-title {
    color: var(--warning-700);
}

.achievement-badge.locked {
    opacity: 0.6;
    filter: grayscale(100%);
}

/* Progress Bars with Levels */
.level-progress {
    background: var(--neutral-0);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 1px solid var(--neutral-200);
    margin: var(--space-4) 0;
}

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

.level-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.level-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    position: relative;
}

.level-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 3px solid var(--current-primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

.level-info h3 {
    margin: 0;
    color: var(--neutral-900);
    font-size: 1.25rem;
}

.level-info p {
    margin: 0;
    color: var(--neutral-600);
    font-size: 0.875rem;
}

.level-stats {
    display: flex;
    gap: var(--space-4);
    font-size: 0.875rem;
    color: var(--neutral-600);
}

.progress-track {
    width: 100%;
    height: 12px;
    background: var(--neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    margin: var(--space-3) 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--current-primary), var(--current-accent));
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--neutral-500);
}

/* Leaderboard */
.leaderboard {
    background: var(--neutral-0);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--neutral-200);
    overflow: hidden;
}

.leaderboard-header {
    background: linear-gradient(135deg, var(--current-primary), var(--current-accent));
    color: white;
    padding: var(--space-6);
    text-align: center;
}

.leaderboard-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--neutral-200);
    transition: var(--transition-colors);
}

.leaderboard-item:hover {
    background: var(--neutral-50);
}

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

.leaderboard-rank {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: var(--space-4);
    flex-shrink: 0;
}

.leaderboard-item:nth-child(1) .leaderboard-rank {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #b45309;
}

.leaderboard-item:nth-child(2) .leaderboard-rank {
    background: linear-gradient(135deg, #c0c0c0, #d1d5db);
    color: #374151;
}

.leaderboard-item:nth-child(3) .leaderboard-rank {
    background: linear-gradient(135deg, #cd7f32, #d97706);
    color: white;
}

.leaderboard-item:nth-child(n+4) .leaderboard-rank {
    background: var(--neutral-200);
    color: var(--neutral-600);
}

.leaderboard-user {
    flex: 1;
}

.leaderboard-name {
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0 0 var(--space-1) 0;
}

.leaderboard-subtitle {
    font-size: 0.875rem;
    color: var(--neutral-600);
    margin: 0;
}

.leaderboard-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--current-primary);
}

/* Streak Counter */
.streak-counter {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--neutral-0);
    border: 2px solid var(--warning-200);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-4) 0;
}

.streak-flame {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    animation: flicker 2s ease-in-out infinite alternate;
}

@keyframes flicker {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(1.1) rotate(2deg); }
}

.streak-info h4 {
    margin: 0;
    color: var(--warning-700);
    font-size: 1.25rem;
}

.streak-info p {
    margin: 0;
    color: var(--neutral-600);
    font-size: 0.875rem;
}

/* Points Animation */
.points-animation {
    position: fixed;
    z-index: var(--z-max);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-600);
    pointer-events: none;
    animation: pointsFloat 2s ease-out forwards;
}

@keyframes pointsFloat {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1.2);
        opacity: 0;
    }
}

/* ============================================================================ */
/* XXV. PARTICLE EFFECTS & CSS PHYSICS                                       */
/* ============================================================================ */

/* Floating Particles Background */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: var(--current-primary);
    border-radius: 50%;
    opacity: 0.6;
    animation: float-particle linear infinite;
}

.particle:nth-child(1) {
    width: 4px;
    height: 4px;
    left: 10%;
    animation-duration: 8s;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    width: 6px;
    height: 6px;
    left: 20%;
    animation-duration: 12s;
    animation-delay: 2s;
}

.particle:nth-child(3) {
    width: 3px;
    height: 3px;
    left: 30%;
    animation-duration: 10s;
    animation-delay: 4s;
}

.particle:nth-child(4) {
    width: 5px;
    height: 5px;
    left: 40%;
    animation-duration: 14s;
    animation-delay: 1s;
}

.particle:nth-child(5) {
    width: 4px;
    height: 4px;
    left: 50%;
    animation-duration: 9s;
    animation-delay: 3s;
}

.particle:nth-child(6) {
    width: 7px;
    height: 7px;
    left: 60%;
    animation-duration: 11s;
    animation-delay: 5s;
}

.particle:nth-child(7) {
    width: 3px;
    height: 3px;
    left: 70%;
    animation-duration: 13s;
    animation-delay: 0.5s;
}

.particle:nth-child(8) {
    width: 5px;
    height: 5px;
    left: 80%;
    animation-duration: 7s;
    animation-delay: 2.5s;
}

.particle:nth-child(9) {
    width: 4px;
    height: 4px;
    left: 90%;
    animation-duration: 15s;
    animation-delay: 1.5s;
}

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

/* Magnetic Field Effect */
.magnetic-field {
    position: relative;
    overflow: hidden;
}

.magnetic-field::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--current-primary)10 1px, transparent 1px);
    background-size: 50px 50px;
    animation: magnetic-rotate 20s linear infinite;
    opacity: 0.3;
}

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

/* DNA Helix Animation */
.dna-helix {
    position: relative;
    width: 200px;
    height: 400px;
    margin: 0 auto;
}

.dna-strand {
    position: absolute;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--current-primary), var(--current-accent));
    left: 50%;
    transform-origin: center;
    animation: dna-twist 4s linear infinite;
}

.dna-strand:nth-child(1) {
    margin-left: -20px;
}

.dna-strand:nth-child(2) {
    margin-left: 16px;
    animation-delay: 2s;
}

.dna-base {
    position: absolute;
    width: 40px;
    height: 4px;
    background: var(--current-accent);
    left: 50%;
    transform: translateX(-50%);
    animation: dna-base-rotate 4s linear infinite;
}

@keyframes dna-twist {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes dna-base-rotate {
    0% { transform: translateX(-50%) rotateY(0deg); }
    100% { transform: translateX(-50%) rotateY(360deg); }
}

/* Gravity Wells */
.gravity-well {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, var(--current-primary)20, transparent 70%);
}

.orbiting-element {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--current-accent);
    border-radius: 50%;
    animation: orbit linear infinite;
}

.orbiting-element:nth-child(1) {
    top: 50px;
    left: 150px;
    animation-duration: 3s;
}

.orbiting-element:nth-child(2) {
    top: 100px;
    left: 100px;
    animation-duration: 5s;
}

.orbiting-element:nth-child(3) {
    top: 200px;
    left: 200px;
    animation-duration: 7s;
}

@keyframes orbit {
    0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

/* Wave Interference Patterns */
.wave-container {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, var(--current-bg-color), var(--neutral-50));
    overflow: hidden;
}

.wave {
    position: absolute;
    top: 50%;
    left: -100%;
    width: 200%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--current-primary), transparent);
    animation: wave-propagate 3s ease-in-out infinite;
}

.wave:nth-child(2) {
    animation-delay: 0.5s;
    background: linear-gradient(90deg, transparent, var(--current-accent), transparent);
}

.wave:nth-child(3) {
    animation-delay: 1s;
    background: linear-gradient(90deg, transparent, var(--current-secondary), transparent);
}

@keyframes wave-propagate {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Quantum Entanglement Effect */
.quantum-pair {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    margin: 0 auto;
    position: relative;
}

.quantum-particle {
    width: 30px;
    height: 30px;
    background: var(--current-primary);
    border-radius: 50%;
    position: relative;
    animation: quantum-spin 2s linear infinite;
}

.quantum-particle::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px solid var(--current-primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: quantum-pulse 2s ease-in-out infinite;
}

.quantum-connection {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, var(--current-primary), var(--current-accent), var(--current-primary));
    transform: translate(-50%, -50%);
    animation: quantum-energy 1s ease-in-out infinite alternate;
}

@keyframes quantum-spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes quantum-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.5); opacity: 0.1; }
}

@keyframes quantum-energy {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}


/* ============================================================================ */
/* XXVI. PWA & MOBILE-FIRST COMPONENTS                                        */
/* ============================================================================ */

/* Mobile Navigation */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--neutral-0);
    border-top: 1px solid var(--neutral-200);
    z-index: var(--z-fixed);
    display: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .mobile-nav {
    background: var(--neutral-900);
    border-top-color: var(--neutral-700);
}

.mobile-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    flex: 1;
}

.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    color: var(--neutral-600);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: var(--transition-colors);
    position: relative;
}

.mobile-nav-link.active {
    color: var(--current-primary);
}

.mobile-nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--current-primary);
    border-radius: 0 0 var(--radius-full) var(--radius-full);
}

.mobile-nav-icon {
    font-size: 1.25rem;
}

.mobile-nav-badge {
    position: absolute;
    top: var(--space-2);
    right: 20%;
    width: 16px;
    height: 16px;
    background: var(--danger-500);
    color: white;
    border-radius: 50%;
    font-size: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Pull to Refresh */
.pull-to-refresh {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pull-indicator {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--neutral-600);
    transition: var(--transition-all);
}

.pull-indicator.active {
    top: 0;
}

.pull-icon {
    font-size: 1.5rem;
    animation: spin 1s linear infinite;
}

.pull-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Swipe Actions */
.swipe-item {
    position: relative;
    background: var(--neutral-0);
    overflow: hidden;
    touch-action: pan-y;
}

.swipe-content {
    position: relative;
    z-index: 2;
    background: var(--neutral-0);
    transition: transform 0.3s ease;
}

.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    z-index: 1;
}

.swipe-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition-all);
}

.swipe-action.edit {
    background: var(--info-500);
}

.swipe-action.delete {
    background: var(--danger-500);
}

.swipe-action.archive {
    background: var(--warning-500);
}

/* Touch Gestures */
.gesture-area {
    position: relative;
    touch-action: none;
    user-select: none;
}

.gesture-feedback {
    position: absolute;
    pointer-events: none;
    background: var(--current-primary);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0.6;
    animation: gesture-ripple 0.6s ease-out;
}

@keyframes gesture-ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* App Install Banner */
.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--current-primary);
    color: white;
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    z-index: var(--z-fixed);
    transform: translateY(100%);
    transition: var(--transition-all);
}

.install-banner.show {
    transform: translateY(0);
}

.install-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.install-content {
    flex: 1;
}

.install-title {
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    font-size: 0.875rem;
}

.install-description {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0;
}

.install-actions {
    display: flex;
    gap: var(--space-2);
}

.install-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-all);
}

.install-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.install-btn.primary {
    background: white;
    color: var(--current-primary);
}

/* Offline Indicator */
.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--warning-500);
    color: white;
    text-align: center;
    padding: var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: var(--z-fixed);
    transform: translateY(-100%);
    transition: var(--transition-all);
}

.offline-indicator.show {
    transform: translateY(0);
}

/* Safe Area Support */
.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

/* App-like Headers */
.app-header {
    position: sticky;
    top: 0;
    background: var(--neutral-0);
    border-bottom: 1px solid var(--neutral-200);
    z-index: var(--z-sticky);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.app-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    min-height: 56px;
}

.app-header-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--neutral-900);
}

.app-header-actions {
    display: flex;
    gap: var(--space-2);
}

.app-header-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-600);
    cursor: pointer;
    transition: var(--transition-all);
}

.app-header-btn:hover {
    background: var(--neutral-100);
    color: var(--neutral-900);
}

/* Mobile Media Queries */
@media (max-width: 767px) {
    .mobile-nav {
        display: block;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    .mobile-hidden {
        display: none !important;
    }
    
    /* Adjust spacing for mobile */
    :root {
        --space-section: var(--space-8);
    }
    
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

@media (min-width: 768px) {
    .desktop-only {
        display: block !important;
    }
    
    .desktop-hidden {
        display: none !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi-only {
        display: block !important;
    }
}

/* Dark Mode Preference */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        --color-mode: 'dark';
    }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Preference */
@media (prefers-contrast: high) {
    .high-contrast {
        border: 2px solid currentColor;
    }
}

/* ============================================================================ */
/* XXVII. PERFORMANCE OPTIMIZATIONS & FINAL UTILITIES                        */
/* ============================================================================ */

/* GPU Acceleration Helpers */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

.will-change-scroll {
    will-change: scroll-position;
}

/* Critical Performance Classes */
.contain-layout {
    contain: layout;
}

.contain-style {
    contain: style;
}

.contain-paint {
    contain: paint;
}

.contain-size {
    contain: size;
}

.contain-strict {
    contain: strict;
}

/* Optimized Animations */
.fade-in-optimized {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

.fade-in-optimized.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Layout Optimization */
.no-layout-shift {
    aspect-ratio: attr(width) / attr(height);
}

.prevent-layout-shift {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 ratio */
    position: relative;
}

.prevent-layout-shift > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Content Visibility */
.content-auto {
    content-visibility: auto;
}

.content-hidden {
    content-visibility: hidden;
}

.content-visible {
    content-visibility: visible;
}

/* Custom Scrollbars */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--current-primary) var(--neutral-200);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--neutral-100);
    border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--current-primary);
    border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--current-secondary);
}

.dark .custom-scrollbar {
    scrollbar-color: var(--current-primary) var(--neutral-700);
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--neutral-800);
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
    
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    
    .page-break-before {
        page-break-before: always;
    }
    
    .page-break-after {
        page-break-after: always;
    }
    
    .page-break-inside-avoid {
        page-break-inside: avoid;
    }
}

/* Typography Theme Classes */
.typography-classic {
    --current-font-primary: var(--font-classic-primary);
    --current-font-secondary: var(--font-classic-secondary);
    --current-font-mono: var(--font-classic-mono);
}

.typography-modern {
    --current-font-primary: var(--font-modern-primary);
    --current-font-secondary: var(--font-modern-secondary);
    --current-font-mono: var(--font-modern-mono);
    font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "ss01" 1;
}

.typography-modern h1, .typography-modern h2, .typography-modern h3,
.typography-modern h4, .typography-modern h5, .typography-modern h6 {
    font-weight: 700;
    letter-spacing: -0.03em;
}

.typography-modern .text-lg {
    font-weight: 500;
}

.typography-modern .text-xl {
    font-weight: 500;
    letter-spacing: -0.01em;
}

.typography-classic h1, .typography-classic h2, .typography-classic h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

.focus-visible:focus-visible {
    outline: 2px solid var(--current-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--current-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: var(--z-max);
}

.skip-link:focus {
    top: 6px;
}

/* Final Utilities */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

.resize-none { resize: none; }
.resize-both { resize: both; }
.resize-horizontal { resize: horizontal; }
.resize-vertical { resize: vertical; }

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-help { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }

.appearance-none { appearance: none; }

/* Debug Utilities */
.debug-grid {
    background-image: 
        linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.debug-outline * {
    outline: 1px solid red;
}

.debug-baseline {
    background-image: linear-gradient(to bottom, transparent 24px, rgba(255, 0, 0, 0.1) 24px, rgba(255, 0, 0, 0.1) 25px, transparent 25px);
    background-size: 100% 25px;
}

/* ============================================================================ */
/* END OF STYLES                                                              */
/* ============================================================================ */