/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ESCOUADE DESIGN SYSTEM                                           ║
   ║  Material 3 compatible with dynamic theming                       ║
   ║  Migrated from: copiste-designs6/index.html                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────
       REFERENCE TOKENS (Raw values - rarely used directly)
       ───────────────────────────────────────────────────────────────── */
    
    /* Typography - Font Families */
    --ref-typeface-brand: 'Roboto', system-ui, sans-serif;
    --ref-typeface-plain: system-ui, sans-serif;
    
    /* Typography - Font Weights */
    --ref-weight-regular: 400;
    --ref-weight-medium: 500;
    --ref-weight-semibold: 600;
    --ref-weight-bold: 700;
    --ref-weight-extrabold: 800;
    
    /* Typography - Font Sizes */
    --ref-size-xs: 0.75rem;    /* 12px */
    --ref-size-sm: 0.875rem;   /* 14px */
    --ref-size-base: 1rem;     /* 16px */
    --ref-size-lg: 1.125rem;   /* 18px */
    --ref-size-xl: 1.25rem;    /* 20px */
    --ref-size-2xl: 1.5rem;    /* 24px */
    --ref-size-3xl: 1.875rem;  /* 30px */
    
    /* Spacing Scale */
    --ref-spacing-0: 0;
    --ref-spacing-1: 0.25rem;  /* 4px */
    --ref-spacing-2: 0.5rem;   /* 8px */
    --ref-spacing-3: 0.75rem;  /* 12px */
    --ref-spacing-4: 1rem;     /* 16px */
    --ref-spacing-5: 1.25rem;  /* 20px */
    --ref-spacing-6: 1.5rem;   /* 24px */
    --ref-spacing-8: 2rem;     /* 32px */
    --ref-spacing-10: 2.5rem;  /* 40px */
    --ref-spacing-12: 3rem;    /* 48px */
    
    /* Shape - Corner Radius (Material 3 scale) */
    --ref-shape-none: 0;
    --ref-shape-xs: 0.25rem;   /* 4px - extra small */
    --ref-shape-sm: 0.25rem;   /* 8px - small */
    --ref-shape-md: 0.5rem;    /* 12px - medium */
    --ref-shape-lg: 0.75rem;   /* 16px - large */
    --ref-shape-xl: 1rem;      /* 20px - extra large */
    --ref-shape-2xl: 1.5rem;   /* 24px */
    --ref-shape-full: 9999px;  /* pill/circle */
    
    /* Duration */
    --ref-duration-short: 0.15s;
    --ref-duration-medium: 0.25s;
    --ref-duration-long: 0.35s;
    
    /* Easing */
    --ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --ref-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ref-easing-legacy: ease;
    
    /* Blur */
    --ref-blur-sm: 8px;
    --ref-blur-md: 12px;
    --ref-blur-lg: 20px;
    --ref-blur-xl: 32px;
    
    /* ─────────────────────────────────────────────────────────────────
       PALETTE (Brand colors - source for semantic colors)
       ───────────────────────────────────────────────────────────────── */
    
    /* Primary palette */
    --palette-primary: #6750A4;
    --palette-primary-light: #D0BCFF;
    --palette-primary-dark: #4F378B;
    
    /* Secondary palette */
    --palette-secondary: #625B71;
    --palette-secondary-light: #CCC2DC;
    --palette-secondary-dark: #4A4458;
    
    /* Tertiary palette */
    --palette-tertiary: #7D5260;
    --palette-tertiary-light: #EFB8C8;
    --palette-tertiary-dark: #633B48;
    
    /* Semantic palettes */
    --palette-error: #ef4444;
    --palette-error-light: #f87171;
    --palette-error-dark: #dc2626;
    
    --palette-warning: #f59e0b;
    --palette-warning-light: #fbbf24;
    --palette-warning-dark: #d97706;
    
    --palette-success: #10b981;
    --palette-success-light: #34d399;
    --palette-success-dark: #059669;
    
    /* Extended palette (for data viz, icons, etc.) */
    --palette-blue: #3b82f6;
    --palette-cyan: #06b6d4;
    --palette-emerald: #10b981;
    --palette-amber: #f59e0b;
    --palette-red: #ef4444;
    --palette-purple: #8b5cf6;
    
    /* ─────────────────────────────────────────────────────────────────
       SYSTEM TOKENS (Semantic - use these in components)
       ───────────────────────────────────────────────────────────────── */
    
    /* Typography System - Material 3 Typescale */
    --sys-typescale-body-font: var(--ref-typeface-brand);
    --sys-typescale-display-font: var(--ref-typeface-brand);
    
    /* Display */
    --sys-typescale-display-large: var(--ref-weight-bold) 3.5rem/1.1 var(--sys-typescale-display-font);
    --sys-typescale-display-medium: var(--ref-weight-bold) 2.75rem/1.15 var(--sys-typescale-display-font);
    --sys-typescale-display-small: var(--ref-weight-bold) 2.25rem/1.2 var(--sys-typescale-display-font);
    
    /* Headline */
    --sys-typescale-headline-large: var(--ref-weight-semibold) 2rem/1.25 var(--sys-typescale-body-font);
    --sys-typescale-headline-medium: var(--ref-weight-semibold) 1.75rem/1.3 var(--sys-typescale-body-font);
    --sys-typescale-headline-small: var(--ref-weight-semibold) 1.5rem/1.35 var(--sys-typescale-body-font);
    
    /* Title */
    --sys-typescale-title-large: var(--ref-weight-semibold) 1.375rem/1.4 var(--sys-typescale-body-font);
    --sys-typescale-title-medium: var(--ref-weight-semibold) 1rem/1.4 var(--sys-typescale-body-font);
    --sys-typescale-title-small: var(--ref-weight-semibold) 0.875rem/1.4 var(--sys-typescale-body-font);
    
    /* Body */
    --sys-typescale-body-large: var(--ref-weight-regular) 1rem/1.5 var(--sys-typescale-body-font);
    --sys-typescale-body-medium: var(--ref-weight-regular) 0.875rem/1.5 var(--sys-typescale-body-font);
    --sys-typescale-body-small: var(--ref-weight-regular) 0.75rem/1.5 var(--sys-typescale-body-font);
    
    /* Label */
    --sys-typescale-label-large: var(--ref-weight-medium) 0.875rem/1.4 var(--sys-typescale-body-font);
    --sys-typescale-label-medium: var(--ref-weight-medium) 0.75rem/1.4 var(--sys-typescale-body-font);
    --sys-typescale-label-small: var(--ref-weight-medium) 0.6875rem/1.4 var(--sys-typescale-body-font);
    
    /* Shape System */
    --sys-shape-corner-none: var(--ref-shape-none);
    --sys-shape-corner-xs: var(--ref-shape-xs);
    --sys-shape-corner-sm: var(--ref-shape-sm);
    --sys-shape-corner-md: var(--ref-shape-md);
    --sys-shape-corner-lg: var(--ref-shape-lg);
    --sys-shape-corner-xl: var(--ref-shape-xl);
    --sys-shape-corner-2xl: var(--ref-shape-2xl);
    --sys-shape-corner-full: var(--ref-shape-full);
    
    /* Motion System */
    --sys-motion-duration-short: var(--ref-duration-short);
    --sys-motion-duration-medium: var(--ref-duration-medium);
    --sys-motion-duration-long: var(--ref-duration-long);
    --sys-motion-easing-standard: var(--ref-easing-standard);
    
    /* Blur System (for glass/frosted effects) */
    --sys-blur-glass: var(--ref-blur-lg);
    --sys-blur-overlay: var(--ref-blur-sm);
    
    /* Elevation (box-shadows) */
    --sys-elevation-0: none;
    --sys-elevation-1: 0 1px 2px rgba(0,0,0,0.1);
    --sys-elevation-2: 0 2px 4px rgba(0,0,0,0.1);
    --sys-elevation-3: 0 4px 8px rgba(0,0,0,0.12);
    --sys-elevation-4: 0 8px 16px rgba(0,0,0,0.14);
    --sys-elevation-5: 0 16px 32px rgba(0,0,0,0.16);
    
    /* State Layer Opacities */
    --sys-state-hover-opacity: 0.08;
    --sys-state-focus-opacity: 0.12;
    --sys-state-pressed-opacity: 0.16;
    --sys-state-dragged-opacity: 0.16;
    
    /* ─────────────────────────────────────────────────────────────────
       LAYOUT TOKENS
       ───────────────────────────────────────────────────────────────── */
    
    /* Component dimensions */
    --layout-sidebar-width: 15rem;
    --layout-navbar-height: 3.5rem;
    --layout-console-height: 14rem;
    --layout-console-width-landscape: 14rem;
    --layout-landscape-sidebar-width: 3rem;
    
    /* Icon sizes */
    --layout-icon-sm: 1rem;       /* 16px */
    --layout-icon-md: 1.125rem;   /* 18px - default nav icon */
    --layout-icon-lg: 1.25rem;    /* 20px */
    
    /* Layout spacing (outer margins, gaps between sections) */
    --layout-margin: 0;
    --layout-padding: var(--ref-spacing-4);
    --layout-gap: 0;
    
    /* ─────────────────────────────────────────────────────────────────
       BREAKPOINT REFERENCE (CSS can't use vars in media queries)
       These values document our breakpoint system for consistency.
       ───────────────────────────────────────────────────────────────── */
    /*
     * Mobile portrait:    default (< 768px width)
     * Mobile landscape:   orientation: landscape AND max-height: 500px
     * Tablet:             min-width: 768px
     * Desktop:            min-width: 1024px
     * Large desktop:      min-width: 1440px
     */

    /* Z-index Scale */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-modal: 30;
    --z-popover: 40;
    --z-overlay: 50;
    --z-toast: 60;
    --z-fab: 70;  /* Floating action button - above toast, always accessible */
    
    /* ─────────────────────────────────────────────────────────────────
       COMPONENT TOKENS (Defaults, can be overridden per-theme)
       ───────────────────────────────────────────────────────────────── */
    
    /* Gradient configuration */
    --comp-gradient-angle: 135deg;
    
    /* Default gradient (overridden in themes for full customization) */
    --comp-gradient-primary: linear-gradient(var(--comp-gradient-angle), var(--palette-secondary) 0%, var(--palette-primary) 50%, var(--palette-tertiary) 100%);
    
    /* Container styling (cards, panels, sidebars) */
    --comp-container-radius: var(--ref-shape-sm);
    --comp-container-border-width: 0;
    --comp-container-border-color: var(--sys-color-outline);
    --comp-container-border: var(--comp-container-border-width) solid var(--comp-container-border-color);
    
    /* Interactive elements (buttons, inputs, badges) */
    --comp-interactive-radius: var(--ref-shape-sm);
    --comp-interactive-radius-sm: var(--ref-shape-xs);
    --comp-interactive-radius-full: var(--sys-shape-corner-full);
    
    /* Sidebar specific (can be different from general containers) */
    --comp-sidebar-radius: 0;
    --comp-sidebar-border: none;
    --comp-sidebar-margin: 0;
    
    /* Console specific */
    --comp-console-radius: 0;
    --comp-console-border: none;
    --comp-console-margin: 0;
    
    /* Modal padding (inner spacing) */
    --comp-modal-padding: var(--ref-spacing-4);
}

/* ═══════════════════════════════════════════════════════════════════
   THEME: DARK
   ═══════════════════════════════════════════════════════════════════ */

body.dark {
    /* ─── Container Opacity (dark mode needs more) ─── */
    --comp-container-opacity: 0.2;
    
    /* ─── Gradient (brand signature) ─── */
    --comp-gradient-primary: linear-gradient(var(--comp-gradient-angle), var(--palette-secondary) 0%, var(--palette-primary) 50%, var(--palette-tertiary) 100%);
    
    /* ─── Surface Colors ─── */
    --sys-color-background: #1C1B1F;
    --sys-color-surface: rgba(255,255,255,0.05);
    --sys-color-surface-dim: rgba(0,0,0,0.3);
    --sys-color-surface-bright: rgba(255,255,255,0.08);
    --sys-color-surface-container: rgba(255,255,255,0.05);
    --sys-color-surface-container-high: rgba(255,255,255,0.08);
    --sys-color-surface-container-highest: rgba(255,255,255,0.12);
    
    /* Glass surfaces */
    --sys-color-glass: rgba(30,30,35,0.85);
    --sys-color-glass-elevated: rgba(30,30,35,0.92);
    
    /* ─── Text Colors ─── */
    --sys-color-on-background: rgba(255,255,255,0.9);
    --sys-color-on-surface: rgba(255,255,255,0.9);
    --sys-color-on-surface-variant: rgba(255,255,255,0.5);
    --sys-color-on-surface-subtle: rgba(255,255,255,0.3);
    
    /* ─── Primary ─── */
    --sys-color-primary: var(--palette-primary-light);
    --sys-color-on-primary: #000000;
    --sys-color-primary-container: color-mix(in srgb, var(--palette-primary) 20%, transparent);
    --sys-color-on-primary-container: var(--palette-primary-light);
    
    /* ─── Secondary ─── */
    --sys-color-secondary: var(--palette-secondary-light);
    --sys-color-on-secondary: #000000;
    --sys-color-secondary-container: color-mix(in srgb, var(--palette-secondary) 20%, transparent);
    --sys-color-on-secondary-container: var(--palette-secondary-light);
    
    /* ─── Tertiary ─── */
    --sys-color-tertiary: var(--palette-tertiary-light);
    --sys-color-on-tertiary: #000000;
    --sys-color-tertiary-container: color-mix(in srgb, var(--palette-tertiary) 20%, transparent);
    --sys-color-on-tertiary-container: var(--palette-tertiary-light);
    
    /* ─── Error ─── */
    --sys-color-error: var(--palette-error-light);
    --sys-color-on-error: #000000;
    --sys-color-error-container: color-mix(in srgb, var(--palette-error) 20%, transparent);
    --sys-color-on-error-container: var(--palette-error-light);
    
    /* ─── Outline & Dividers ─── */
    --sys-color-outline: #3d3d3d;
    --sys-color-outline-variant: #2a2a2a;
    
    /* ─── Inverse ─── */
    --sys-color-inverse-surface: rgba(255,255,255,0.9);
    --sys-color-inverse-on-surface: rgba(0,0,0,0.9);
    
    /* ─── Overlay ─── */
    --sys-color-scrim: rgba(0,0,0,0.6);
    
    /* ─── Extended Colors (for icons, data viz) ─── */
    --sys-color-blue: var(--palette-blue);
    --sys-color-blue-container: color-mix(in srgb, var(--palette-blue) 20%, transparent);
    --sys-color-cyan: var(--palette-cyan);
    --sys-color-cyan-container: color-mix(in srgb, var(--palette-cyan) 20%, transparent);
    --sys-color-emerald: var(--palette-emerald);
    --sys-color-emerald-container: color-mix(in srgb, var(--palette-emerald) 20%, transparent);
    --sys-color-amber: var(--palette-amber);
    --sys-color-amber-container: color-mix(in srgb, var(--palette-amber) 20%, transparent);
    --sys-color-red: var(--palette-red);
    --sys-color-red-container: color-mix(in srgb, var(--palette-red) 20%, transparent);
    --sys-color-purple: var(--palette-purple);
    --sys-color-purple-container: color-mix(in srgb, var(--palette-purple) 20%, transparent);
    
    /* ─── Status ─── */
    --sys-color-success: var(--palette-success-light);
    --sys-color-success-container: color-mix(in srgb, var(--palette-success) 20%, transparent);
    --sys-color-warning: var(--palette-warning-light);
    --sys-color-warning-container: color-mix(in srgb, var(--palette-warning) 20%, transparent);
    
    /* ─── Glow Effects ─── */
    --sys-glow-primary: 0 0 40px color-mix(in srgb, var(--palette-primary) 20%, transparent);
    --sys-glow-secondary: 0 0 30px color-mix(in srgb, var(--palette-secondary) 15%, transparent);
    --sys-glow-tertiary: 0 0 30px color-mix(in srgb, var(--palette-tertiary) 15%, transparent);
    
    /* ─── Scrollbar ─── */
    --sys-scrollbar-track: rgba(255,255,255,0.05);
    --sys-scrollbar-thumb: rgba(255,255,255,0.15);
    --sys-scrollbar-thumb-hover: rgba(255,255,255,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   THEME: LIGHT
   ═══════════════════════════════════════════════════════════════════ */

body.light {
    /* ─── Container Opacity (light mode uses less) ─── */
    --comp-container-opacity: 0.15;
    
    /* ─── Gradient (brand signature) ─── */
    --comp-gradient-primary: linear-gradient(var(--comp-gradient-angle), var(--palette-secondary) 0%, var(--palette-primary) 50%, var(--palette-tertiary) 100%);
    
    /* ─── Surface Colors ─── */
    --sys-color-background: #F4F4F6;
    --sys-color-surface: rgba(255,255,255,0.7);
    --sys-color-surface-dim: rgba(0,0,0,0.02);
    --sys-color-surface-bright: rgba(255,255,255,0.9);
    --sys-color-surface-container: rgba(255,255,255,0.6);
    --sys-color-surface-container-high: rgba(255,255,255,0.8);
    --sys-color-surface-container-highest: rgba(255,255,255,0.95);
    
    /* Glass surfaces */
    --sys-color-glass: rgba(255,255,255,0.85);
    --sys-color-glass-elevated: rgba(255,255,255,0.95);
    
    /* ─── Text Colors ─── */
    --sys-color-on-background: rgba(0,0,0,0.85);
    --sys-color-on-surface: rgba(0,0,0,0.85);
    --sys-color-on-surface-variant: rgba(0,0,0,0.5);
    --sys-color-on-surface-subtle: rgba(0,0,0,0.35);
    
    /* ─── Primary ─── */
    --sys-color-primary: var(--palette-primary-dark);
    --sys-color-on-primary: #ffffff;
    --sys-color-primary-container: color-mix(in srgb, var(--palette-primary) 15%, transparent);
    --sys-color-on-primary-container: var(--palette-primary-dark);
    
    /* ─── Secondary ─── */
    --sys-color-secondary: var(--palette-secondary-dark);
    --sys-color-on-secondary: #ffffff;
    --sys-color-secondary-container: color-mix(in srgb, var(--palette-secondary) 15%, transparent);
    --sys-color-on-secondary-container: var(--palette-secondary-dark);
    
    /* ─── Tertiary ─── */
    --sys-color-tertiary: var(--palette-tertiary-dark);
    --sys-color-on-tertiary: #ffffff;
    --sys-color-tertiary-container: color-mix(in srgb, var(--palette-tertiary) 15%, transparent);
    --sys-color-on-tertiary-container: var(--palette-tertiary-dark);
    
    /* ─── Error ─── */
    --sys-color-error: var(--palette-error-dark);
    --sys-color-on-error: #ffffff;
    --sys-color-error-container: color-mix(in srgb, var(--palette-error) 15%, transparent);
    --sys-color-on-error-container: var(--palette-error-dark);
    
    /* ─── Outline & Dividers ─── */
    --sys-color-outline: rgba(0,0,0,0.12);
    --sys-color-outline-variant: rgba(0,0,0,0.06);
    
    /* ─── Inverse ─── */
    --sys-color-inverse-surface: rgba(0,0,0,0.85);
    --sys-color-inverse-on-surface: rgba(255,255,255,0.9);
    
    /* ─── Overlay ─── */
    --sys-color-scrim: rgba(0,0,0,0.3);
    
    /* ─── Extended Colors ─── */
    --sys-color-blue: var(--palette-blue);
    --sys-color-blue-container: color-mix(in srgb, var(--palette-blue) 12%, transparent);
    --sys-color-cyan: var(--palette-cyan);
    --sys-color-cyan-container: color-mix(in srgb, var(--palette-cyan) 12%, transparent);
    --sys-color-emerald: var(--palette-emerald);
    --sys-color-emerald-container: color-mix(in srgb, var(--palette-emerald) 12%, transparent);
    --sys-color-amber: var(--palette-amber);
    --sys-color-amber-container: color-mix(in srgb, var(--palette-amber) 12%, transparent);
    --sys-color-red: var(--palette-red);
    --sys-color-red-container: color-mix(in srgb, var(--palette-red) 12%, transparent);
    --sys-color-purple: var(--palette-purple);
    --sys-color-purple-container: color-mix(in srgb, var(--palette-purple) 12%, transparent);
    
    /* ─── Status ─── */
    --sys-color-success: var(--palette-success-dark);
    --sys-color-success-container: color-mix(in srgb, var(--palette-success) 15%, transparent);
    --sys-color-warning: var(--palette-warning-dark);
    --sys-color-warning-container: color-mix(in srgb, var(--palette-warning) 15%, transparent);
    
    /* ─── Glow Effects ─── */
    --sys-glow-primary: 0 4px 20px color-mix(in srgb, var(--palette-primary) 15%, transparent);
    --sys-glow-secondary: 0 4px 15px color-mix(in srgb, var(--palette-secondary) 12%, transparent);
    --sys-glow-tertiary: 0 4px 15px color-mix(in srgb, var(--palette-tertiary) 12%, transparent);
    
    /* ─── Scrollbar ─── */
    --sys-scrollbar-track: rgba(0,0,0,0.05);
    --sys-scrollbar-thumb: rgba(0,0,0,0.15);
    --sys-scrollbar-thumb-hover: rgba(0,0,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   HOW TO CREATE A NEW THEME
   Guide for AI/future Claude instances
   ═══════════════════════════════════════════════════════════════════
   
   1. SETUP
      - Add Google Font to <link> if needed
      - Add option to <select class="theme-select">
      - Create html.THEMENAME { } block
   
   2. REQUIRED TOKENS (in html.THEMENAME)
      Typography:
        --ref-typeface-brand, --ref-typeface-plain
        --sys-typescale-body-font, --sys-typescale-display-font
      Palette (primary/secondary/tertiary, each with -light/-dark):
        --palette-primary, --palette-primary-light, -dark
        --palette-secondary, --palette-secondary-light, -dark
        --palette-tertiary, --palette-tertiary-light, -dark
      Status: --palette-error, --palette-warning, --palette-success
      Extended: --palette-blue/cyan/emerald/amber/red/purple
   
   3. REQUIRED TOKENS (in html.THEMENAME body.dark / body.light)
      Surfaces:
        --sys-color-background, --sys-color-surface
        --sys-color-surface-container, -container-high, -highest
        --sys-color-glass, --sys-color-glass-elevated
      Text: --sys-color-on-background, -on-surface, -variant, -subtle
      Primary: --sys-color-primary, -on-primary, -container, etc.
      Secondary/Tertiary/Error: same pattern
      Outline: --sys-color-outline, --sys-color-outline-variant
      Effects: --sys-glow-primary, -secondary, -tertiary
      Scrollbar: --sys-scrollbar-track, -thumb, -thumb-hover
   
   4. OPTIONAL: Theme-specific CSS rules (after tokens block)
      html.THEMENAME .gradient-text { text-shadow: ...; }
      html.THEMENAME .card { border: ...; }
      html.THEMENAME .btn-filled { box-shadow: ...; }
      html.THEMENAME .stat-card-value { text-shadow: ...; }
      html.THEMENAME body.dark::before { } for overlay effects
   
   5. COPY CYBER AS TEMPLATE - it has all tokens defined
   
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   THEME: CYBER NEON
   Futuristic neon aesthetic with scanlines and glow effects
   ═══════════════════════════════════════════════════════════════════ */

html.cyber {
    /* Typography */
    --ref-typeface-brand: 'Orbitron', 'Courier New', monospace;
    --ref-typeface-plain: 'Share Tech Mono', 'Courier New', monospace;
    --sys-typescale-body-font: var(--ref-typeface-plain);
    --sys-typescale-display-font: var(--ref-typeface-brand);
    
    /* Primary palette - Cyan */
    --palette-primary: #00ffff;
    --palette-primary-light: #7fffff;
    --palette-primary-dark: #00cccc;
    
    /* Secondary palette - Magenta */
    --palette-secondary: #ff00ff;
    --palette-secondary-light: #ff7fff;
    --palette-secondary-dark: #cc00cc;
    
    /* Tertiary palette - Yellow */
    --palette-tertiary: #ffff00;
    --palette-tertiary-light: #ffff7f;
    --palette-tertiary-dark: #cccc00;
    
    /* Error/Status */
    --palette-error: #ff3366;
    --palette-warning: #ff9900;
    --palette-success: #00ff66;
    
    /* Extended colors */
    --palette-blue: #00aaff;
    --palette-cyan: #00ffff;
    --palette-emerald: #00ff66;
    --palette-amber: #ffaa00;
    --palette-red: #ff3366;
    --palette-purple: #aa00ff;
}

html.cyber body.dark {
    --comp-container-opacity: 0.15;
    --comp-gradient-primary: linear-gradient(var(--comp-gradient-angle), var(--palette-primary) 0%, var(--palette-secondary) 50%, var(--palette-tertiary) 100%);
    
    --sys-color-background: #0a0a0f;
    --sys-color-surface: rgba(0,255,255,0.03);
    --sys-color-surface-dim: rgba(0,0,0,0.5);
    --sys-color-surface-bright: rgba(0,255,255,0.08);
    --sys-color-surface-container: rgba(0,255,255,0.05);
    --sys-color-surface-container-high: rgba(0,255,255,0.08);
    --sys-color-surface-container-highest: rgba(0,255,255,0.12);
    
    --sys-color-glass: rgba(10,10,20,0.9);
    --sys-color-glass-elevated: rgba(10,10,20,0.95);
    
    --sys-color-on-background: rgba(0,255,255,0.9);
    --sys-color-on-surface: rgba(0,255,255,0.9);
    --sys-color-on-surface-variant: rgba(0,255,255,0.6);
    --sys-color-on-surface-subtle: rgba(0,255,255,0.4);
    
    --sys-color-primary: var(--palette-primary);
    --sys-color-on-primary: #000000;
    --sys-color-primary-container: rgba(0,255,255,0.15);
    --sys-color-on-primary-container: var(--palette-primary);
    
    --sys-color-secondary: var(--palette-secondary);
    --sys-color-on-secondary: #000000;
    --sys-color-secondary-container: rgba(255,0,255,0.15);
    --sys-color-on-secondary-container: var(--palette-secondary);
    
    --sys-color-tertiary: var(--palette-tertiary);
    --sys-color-on-tertiary: #000000;
    --sys-color-tertiary-container: rgba(255,255,0,0.15);
    --sys-color-on-tertiary-container: var(--palette-tertiary);
    
    --sys-color-error: var(--palette-error);
    --sys-color-on-error: #000000;
    --sys-color-error-container: rgba(255,51,102,0.15);
    --sys-color-on-error-container: var(--palette-error);
    
    --sys-color-outline: rgba(0,255,255,0.3);
    --sys-color-outline-variant: rgba(0,255,255,0.15);
    
    --sys-color-inverse-surface: var(--palette-primary);
    --sys-color-inverse-on-surface: #000000;
    
    --sys-color-scrim: rgba(0,0,0,0.8);
    
    --sys-color-blue: var(--palette-blue);
    --sys-color-blue-container: rgba(0,170,255,0.15);
    --sys-color-cyan: var(--palette-cyan);
    --sys-color-cyan-container: rgba(0,255,255,0.15);
    --sys-color-emerald: var(--palette-emerald);
    --sys-color-emerald-container: rgba(0,255,102,0.15);
    --sys-color-amber: var(--palette-amber);
    --sys-color-amber-container: rgba(255,153,0,0.15);
    --sys-color-red: var(--palette-red);
    --sys-color-red-container: rgba(255,51,102,0.15);
    --sys-color-purple: var(--palette-purple);
    --sys-color-purple-container: rgba(170,0,255,0.15);
    
    --sys-color-success: var(--palette-success);
    --sys-color-success-container: rgba(0,255,102,0.15);
    --sys-color-warning: var(--palette-warning);
    --sys-color-warning-container: rgba(255,153,0,0.15);
    
    /* Intense neon glows */
    --sys-glow-primary: 0 0 30px var(--palette-primary), 0 0 60px rgba(0,255,255,0.4);
    --sys-glow-secondary: 0 0 30px var(--palette-secondary), 0 0 60px rgba(255,0,255,0.4);
    --sys-glow-tertiary: 0 0 30px var(--palette-tertiary), 0 0 60px rgba(255,255,0,0.4);
    
    --sys-scrollbar-track: rgba(0,255,255,0.05);
    --sys-scrollbar-thumb: rgba(0,255,255,0.2);
    --sys-scrollbar-thumb-hover: rgba(0,255,255,0.4);
}

html.cyber body.light {
    --sys-color-background: #f0ffff;
    --sys-color-surface: rgba(0,200,200,0.05);
    --sys-color-surface-container: rgba(0,200,200,0.08);
    --sys-color-surface-container-high: rgba(0,200,200,0.12);
    
    --sys-color-glass: rgba(240,255,255,0.9);
    --sys-color-glass-elevated: rgba(255,255,255,0.95);
    
    --sys-color-on-background: #003333;
    --sys-color-on-surface: #003333;
    --sys-color-on-surface-variant: rgba(0,51,51,0.6);
    --sys-color-on-surface-subtle: rgba(0,51,51,0.4);
    
    --sys-color-primary: var(--palette-primary-dark);
    --sys-color-on-primary: #ffffff;
    --sys-color-primary-container: rgba(0,255,255,0.2);
    --sys-color-on-primary-container: var(--palette-primary-dark);
    
    --sys-color-outline: rgba(0,100,100,0.2);
    --sys-color-outline-variant: rgba(0,100,100,0.1);
    
    --sys-glow-primary: 0 4px 20px rgba(0,200,200,0.3);
    --sys-glow-secondary: 0 4px 15px rgba(200,0,200,0.2);
}

/* Cyber scanlines effect (dark mode only) */
html.cyber body.dark::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,255,255,0.02) 2px,
        rgba(0,255,255,0.02) 4px
    );
    z-index: var(--z-overlay);
}

/* Cyber-specific component styles */
html.cyber .gradient-text { text-shadow: 0 0 10px currentColor; }
html.cyber .font-bold, html.cyber h1, html.cyber h2, html.cyber h3 { text-shadow: 0 0 5px currentColor; }
html.cyber .nav-item { border-left: 2px solid transparent; }
html.cyber .nav-item:hover { border-left-color: var(--palette-primary); }
html.cyber .nav-item.active { border-left-color: var(--palette-primary); box-shadow: inset 0 0 20px rgba(0,255,255,0.1); }
html.cyber .card { border: 1px solid var(--sys-color-outline); }
html.cyber .glass, html.cyber .glass-elevated { border: 1px solid var(--sys-color-outline-variant); }
html.cyber .tabs { border: 1px solid var(--sys-color-outline-variant); }
html.cyber .form-input { border-color: var(--sys-color-outline); }
html.cyber .form-input:focus { border-color: var(--sys-color-primary); box-shadow: var(--sys-glow-primary); }
html.cyber .btn-filled { text-shadow: 0 0 10px currentColor; box-shadow: var(--sys-glow-primary); }
html.cyber .btn-filled:hover { box-shadow: 0 0 40px var(--palette-primary), 0 0 80px rgba(0,255,255,0.5); }
html.cyber .tab.active { box-shadow: var(--sys-glow-primary); text-shadow: 0 0 10px currentColor; }
html.cyber .tab:hover { text-shadow: 0 0 5px var(--palette-primary); }
html.cyber .stat-card-value { text-shadow: 0 0 15px currentColor, 0 0 30px currentColor; }

/* ═══════════════════════════════════════════════════════════════════
   RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid var(--sys-color-outline);
    font-family: var(--sys-typescale-body-font);
}

html { height: 100%; }

body {
    min-height: 100dvh;
    background: var(--sys-color-background);
    color: var(--sys-color-on-background);
    line-height: 1.5;
    /* Smooth theme transitions */
    transition: background-color var(--sys-motion-duration-medium), color var(--sys-motion-duration-medium);
}

/* Reduced motion support */
@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;
    }
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font: inherit; }
ul { list-style: none; }

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sys-scrollbar-thumb) var(--sys-scrollbar-track);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--sys-scrollbar-track); border-radius: 4px; }
*::-webkit-scrollbar-thumb { background: var(--sys-scrollbar-thumb); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--sys-scrollbar-thumb-hover); }

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hidden { display: none; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; -webkit-overflow-scrolling: touch; }
.overflow-y-auto { overflow-y: auto; }
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }

/* Spacing */
.p-2 { padding: var(--ref-spacing-2); }
.p-3 { padding: var(--ref-spacing-3); }
.p-4 { padding: var(--ref-spacing-4); }
.p-5 { padding: var(--ref-spacing-5); }
.p-6 { padding: var(--ref-spacing-6); }
.px-2 { padding-inline: var(--ref-spacing-2); }
.px-3 { padding-inline: var(--ref-spacing-3); }
.px-4 { padding-inline: var(--ref-spacing-4); }
.px-6 { padding-inline: var(--ref-spacing-6); }
.py-1 { padding-block: var(--ref-spacing-1); }
.py-2 { padding-block: var(--ref-spacing-2); }
.py-3 { padding-block: var(--ref-spacing-3); }
.py-4 { padding-block: var(--ref-spacing-4); }
.m-5 { margin: var(--ref-spacing-5); }
.mr-0 { margin-right: 0; }
.mt-1 { margin-top: var(--ref-spacing-1); }
.mt-2 { margin-top: var(--ref-spacing-2); }
.mt-3 { margin-top: var(--ref-spacing-3); }
.mt-4 { margin-top: var(--ref-spacing-4); }
.mt-5 { margin-top: var(--ref-spacing-5); }
.mt-6 { margin-top: var(--ref-spacing-6); }
.mt-8 { margin-top: var(--ref-spacing-8); }
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--ref-spacing-1); }
.mb-2 { margin-bottom: var(--ref-spacing-2); }
.mb-3 { margin-bottom: var(--ref-spacing-3); }
.mb-4 { margin-bottom: var(--ref-spacing-4); }
.mb-5 { margin-bottom: var(--ref-spacing-5); }
.mb-6 { margin-bottom: var(--ref-spacing-6); }
.mb-8 { margin-bottom: var(--ref-spacing-8); }
.ml-auto { margin-left: auto; }
.ml-1 { margin-left: var(--ref-spacing-1); }
.ml-2 { margin-left: var(--ref-spacing-2); }
.ml-3 { margin-left: var(--ref-spacing-3); }
.ml-4 { margin-left: var(--ref-spacing-4); }
.ml-6 { margin-left: var(--ref-spacing-6); }
.mr-2 { margin-right: var(--ref-spacing-2); }
.mr-3 { margin-right: var(--ref-spacing-3); }
.mr-4 { margin-right: var(--ref-spacing-4); }
.gap-2 { gap: var(--ref-spacing-2); }
.gap-3 { gap: var(--ref-spacing-3); }
.gap-4 { gap: var(--ref-spacing-4); }
.gap-5 { gap: var(--ref-spacing-5); }
.space-y-1 > * + * { margin-top: var(--ref-spacing-1); }
.space-y-2 > * + * { margin-top: var(--ref-spacing-2); }
.space-y-3 > * + * { margin-top: var(--ref-spacing-3); }
.space-y-4 > * + * { margin-top: var(--ref-spacing-4); }
.space-y-5 > * + * { margin-top: var(--ref-spacing-5); }
.space-y-6 > * + * { margin-top: var(--ref-spacing-6); }
.space-y-8 > * + * { margin-top: var(--ref-spacing-8); }

/* Sizing */
.w-full { width: 100%; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-60 { width: 15rem; }
.w-72 { width: 18rem; }
.w-icon { width: var(--layout-icon-md); }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-icon { height: var(--layout-icon-md); }
.max-w-md { max-width: 28rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Typography */
.text-xs { font-size: var(--ref-size-xs); }
.text-sm { font-size: var(--ref-size-sm); }
.text-base { font-size: var(--ref-size-base); }
.text-lg { font-size: var(--ref-size-lg); }
.text-xl { font-size: var(--ref-size-xl); }
.text-2xl { font-size: var(--ref-size-2xl); }
.text-3xl { font-size: var(--ref-size-3xl); }
.font-medium { font-weight: var(--ref-weight-medium); }
.font-semibold { font-weight: var(--ref-weight-semibold); }
.font-bold { font-weight: var(--ref-weight-bold); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Borders */
.border { border: 1px solid var(--sys-color-outline); }
.border-b { border-bottom: 1px solid var(--sys-color-outline); }
.border-t { border-top: 1px solid var(--sys-color-outline); }
.border-r { border-right: 1px solid var(--sys-color-outline); }
.rounded-sm { border-radius: var(--sys-shape-corner-sm); }
.rounded-md { border-radius: var(--sys-shape-corner-md); }
.rounded-lg { border-radius: var(--sys-shape-corner-lg); }
.rounded-xl { border-radius: var(--sys-shape-corner-xl); }
.rounded-2xl { border-radius: var(--sys-shape-corner-2xl); }
.rounded-full { border-radius: var(--sys-shape-corner-full); }
.divide-y > * + * { border-top: 1px solid var(--sys-color-outline-variant); }

/* Effects */
.transition { transition: all var(--sys-motion-duration-medium) var(--sys-motion-easing-standard); }
.select-none { user-select: none; }
.resize-none { resize: none; }
.shadow { box-shadow: var(--sys-elevation-2); }
.shadow-lg { box-shadow: var(--sys-elevation-3); }
.shadow-xl { box-shadow: var(--sys-elevation-4); }
.opacity-50 { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Card ─── */
.card {
    background: var(--sys-color-surface-container);
    border-radius: var(--comp-container-radius);
    border: var(--comp-container-border);
    padding: var(--ref-spacing-6);
}

/* ─── Glass Surfaces ─── */
.glass {
    background: var(--sys-color-glass);
    backdrop-filter: blur(var(--sys-blur-glass));
    -webkit-backdrop-filter: blur(var(--sys-blur-glass));
}
.glass-elevated {
    background: var(--sys-color-glass-elevated);
    backdrop-filter: blur(var(--sys-blur-glass));
    -webkit-backdrop-filter: blur(var(--sys-blur-glass));
}

/* ─── Buttons ─── */
.btn-filled {
    background: var(--comp-gradient-primary);
    color: var(--sys-color-on-primary);
    transition: opacity var(--sys-motion-duration-short);
}
.btn-filled:hover { opacity: 0.9; }

.btn-outlined {
    border: 1px solid var(--sys-color-outline);
    color: var(--sys-color-on-surface-variant);
    background: transparent;
    transition: background var(--sys-motion-duration-short);
}
.btn-outlined:hover { background: var(--sys-color-surface-container-high); }

.btn-icon {
    padding: var(--ref-spacing-2);
    border-radius: var(--comp-interactive-radius-sm);
    transition: background var(--sys-motion-duration-short);
}
.btn-icon:hover { background: var(--sys-color-surface-container-high); }

.btn-ghost {
    background: transparent;
    color: var(--sys-color-on-surface-variant);
    transition: background var(--sys-motion-duration-short), color var(--sys-motion-duration-short);
}
.btn-ghost:hover {
    background: var(--sys-color-surface-container-high);
    color: var(--sys-color-on-surface);
}

.btn-sm {
    padding: var(--ref-spacing-1) var(--ref-spacing-2);
    font-size: var(--ref-size-xs);
}

.btn-xs {
    padding: var(--ref-spacing-1) var(--ref-spacing-2);
    font-size: var(--ref-size-xs);
}

.btn-square {
    aspect-ratio: 1;
    padding: var(--ref-spacing-2);
}

.btn-circle {
    border-radius: var(--sys-shape-corner-full);
    aspect-ratio: 1;
    padding: var(--ref-spacing-2);
}

.btn-primary {
    background: var(--sys-color-primary);
    color: var(--sys-color-on-primary);
}

.btn-success {
    background: var(--sys-color-success-container);
    color: var(--sys-color-success);
}

.btn-error {
    background: var(--sys-color-error-container);
    color: var(--sys-color-error);
}

/* ─── Gradient Text ─── */
.gradient-text {
    background: var(--comp-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Glow Effects ─── */
.glow { box-shadow: var(--sys-glow-primary); }
.glow-secondary { box-shadow: var(--sys-glow-secondary); }
.glow-tertiary { box-shadow: var(--sys-glow-tertiary); }
.glow-error { box-shadow: 0 0 20px color-mix(in srgb, var(--palette-error) 25%, transparent); }
.glow-purple { box-shadow: 0 0 20px color-mix(in srgb, var(--palette-purple) 25%, transparent); }

/* ─── Color Containers (for icons, avatars) ─── */
.container-blue { background: var(--sys-color-blue-container); color: var(--sys-color-blue); }
.container-cyan { background: var(--sys-color-cyan-container); color: var(--sys-color-cyan); }
.container-emerald { background: var(--sys-color-emerald-container); color: var(--sys-color-emerald); }
.container-amber { background: var(--sys-color-amber-container); color: var(--sys-color-amber); }
.container-red { background: var(--sys-color-red-container); color: var(--sys-color-red); }
.container-purple { background: var(--sys-color-purple-container); color: var(--sys-color-purple); }

/* ─── Text Colors ─── */
.text-blue { color: var(--sys-color-blue); }
.text-cyan { color: var(--sys-color-cyan); }
.text-emerald { color: var(--sys-color-emerald); }
.text-amber { color: var(--sys-color-amber); }
.text-red { color: var(--sys-color-red); }
.text-purple { color: var(--sys-color-purple); }
.text-success { color: var(--sys-color-success); }
.text-error { color: var(--sys-color-error); }
.text-warning { color: var(--sys-color-warning); }
.text-muted { color: var(--sys-color-on-surface-variant); }
.text-primary { color: var(--sys-color-primary); }

/* ─── Status ─── */
.status-success { background: var(--sys-color-success-container); color: var(--sys-color-success); }
.status-warning { background: var(--sys-color-warning-container); color: var(--sys-color-warning); }
.status-error { background: var(--sys-color-error-container); color: var(--sys-color-error); }

.status-dot { width: var(--ref-spacing-2); height: var(--ref-spacing-2); border-radius: var(--sys-shape-corner-full); }
.status-dot-emerald { background: var(--sys-color-emerald); box-shadow: 0 0 8px var(--sys-color-emerald); }
.status-dot-blue { background: var(--sys-color-blue); box-shadow: 0 0 8px var(--sys-color-blue); }
.status-dot-amber { background: var(--sys-color-amber); box-shadow: 0 0 8px var(--sys-color-amber); }

/* ─── Badge ─── */
.badge {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
    font-size: var(--ref-size-xs);
    padding: var(--ref-spacing-1) var(--ref-spacing-2);
    border-radius: var(--comp-interactive-radius-full);
    font-weight: var(--ref-weight-bold);
    display: inline-flex;
    align-items: center;
    gap: var(--ref-spacing-1);
}

.badge-success { background: var(--sys-color-success-container); color: var(--sys-color-success); }
.badge-warning { background: var(--sys-color-warning-container); color: var(--sys-color-warning); }
.badge-error { background: var(--sys-color-error-container); color: var(--sys-color-error); }
.badge-info { background: var(--sys-color-cyan-container); color: var(--sys-color-cyan); }
.badge-ghost { background: var(--sys-color-surface-container-high); color: var(--sys-color-on-surface-variant); }
.badge-primary { background: var(--sys-color-primary-container); color: var(--sys-color-on-primary-container); }
.badge-secondary { background: var(--sys-color-secondary-container); color: var(--sys-color-on-secondary-container); }
.badge-sm { font-size: var(--ref-size-xs); padding: 0 var(--ref-spacing-2); line-height: 1.5; }
.badge-xs { font-size: 0.625rem; padding: 0 var(--ref-spacing-1); line-height: 1.4; }

/* ─── Form Inputs ─── */
.form-input {
    width: 100%;
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    background: var(--sys-color-surface-container);
    border: 1px solid var(--sys-color-outline);
    border-radius: var(--comp-interactive-radius);
    color: var(--sys-color-on-surface);
    font-size: var(--ref-size-sm);
    outline: none;
    transition: border-color var(--sys-motion-duration-short), box-shadow var(--sys-motion-duration-short);
}
.form-input::placeholder { color: var(--sys-color-on-surface-subtle); }
.form-input:focus {
    border-color: var(--sys-color-primary);
    box-shadow: 0 0 0 3px var(--sys-color-primary-container);
}

.form-label {
    display: block;
    font-size: var(--ref-size-sm);
    font-weight: var(--ref-weight-semibold);
    color: var(--sys-color-on-surface-variant);
    margin-bottom: var(--ref-spacing-1);
}

/* ─── Select ─── */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ref-spacing-3) center;
    background-size: 1rem;
    padding-right: var(--ref-spacing-8);
}
body.dark .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

/* ─── Theme Selector ─── */
.theme-select {
    padding: var(--ref-spacing-2) var(--ref-spacing-3);
    background: var(--sys-color-glass);
    backdrop-filter: blur(var(--sys-blur-glass));
    -webkit-backdrop-filter: blur(var(--sys-blur-glass));
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--comp-interactive-radius);
    color: var(--sys-color-on-surface);
    font-size: var(--ref-size-sm);
    font-family: var(--sys-typescale-body-font);
    cursor: pointer;
    outline: none;
    transition: all var(--sys-motion-duration-short);
}
.theme-select:hover {
    background: var(--sys-color-surface-container-high);
    border-color: var(--sys-color-outline);
}
.theme-select:focus {
    border-color: var(--sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sys-color-primary) 20%, transparent);
}

/* Cyber theme select */
html.cyber .theme-select {
    background: rgba(10, 10, 20, 0.8);
    border-color: var(--sys-color-outline);
}
html.cyber .theme-select:focus {
    box-shadow: var(--sys-glow-primary);
}

/* ─── Checkbox ─── */
.checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--sys-color-outline);
    border-radius: var(--sys-shape-corner-sm);
    appearance: none;
    cursor: pointer;
    transition: all var(--sys-motion-duration-short);
}
.checkbox:checked {
    border-color: transparent;
    background: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center/70% no-repeat,
        var(--comp-gradient-primary);
}

/* ─── Toggle (like DaisyUI) ─── */
.toggle {
    width: 2.5rem;
    height: 1.25rem;
    background: var(--sys-color-surface-container-high);
    border-radius: var(--sys-shape-corner-full);
    position: relative;
    cursor: pointer;
    appearance: none;
    transition: background var(--sys-motion-duration-short);
}
.toggle::before {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    background: var(--sys-color-on-surface);
    border-radius: var(--sys-shape-corner-full);
    transition: transform var(--sys-motion-duration-short);
}
.toggle:checked {
    background: var(--sys-color-primary);
}
.toggle:checked::before {
    transform: translateX(1.25rem);
    background: var(--sys-color-on-primary);
}
.toggle-sm {
    width: 2rem;
    height: 1rem;
}
.toggle-sm::before {
    width: 0.75rem;
    height: 0.75rem;
}
.toggle-sm:checked::before {
    transform: translateX(1rem);
}

/* ─── Navigation ─── */
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-3);
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    border-radius: var(--comp-interactive-radius);
    transition: all var(--sys-motion-duration-medium);
    color: var(--sys-color-on-surface-variant);
}
.nav-item:hover {
    background: var(--sys-color-surface-container-high);
    color: var(--sys-color-on-surface);
}
.nav-item.active {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
    font-weight: var(--ref-weight-semibold);
}

/* Sidebar item (alias for compatibility) */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-3);
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    border-radius: var(--comp-interactive-radius);
    transition: all var(--sys-motion-duration-medium);
    color: var(--sys-color-on-surface-variant);
}
.sidebar-item:hover {
    background: var(--sys-color-surface-container-high);
    color: var(--sys-color-on-surface);
}
.sidebar-item.active {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
    font-weight: var(--ref-weight-semibold);
}

.nav-section-title {
    padding: var(--ref-spacing-2) var(--ref-spacing-3);
    font-size: 0.625rem;
    font-weight: var(--ref-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sys-color-on-surface-subtle);
}

.nav-divider {
    height: 1px;
    background: var(--sys-color-outline-variant);
    margin: var(--ref-spacing-3) 0;
}

/* ─── Divider ─── */
.divider {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-4);
    color: var(--sys-color-on-surface-subtle);
    font-size: var(--ref-size-xs);
    font-weight: var(--ref-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sys-color-outline-variant);
}

/* ─── Stat Card ─── */
.stat-card { display: flex; flex-direction: column; gap: var(--ref-spacing-2); }
.stat-card-header { display: flex; align-items: center; justify-content: space-between; }
.stat-card-icon {
    width: var(--ref-spacing-10); height: var(--ref-spacing-10);
    border-radius: var(--sys-shape-corner-md);
    display: flex; align-items: center; justify-content: center;
}
.stat-card-value { font-size: var(--ref-size-3xl); font-weight: var(--ref-weight-extrabold); line-height: 1; }
.stat-card-label { font-size: var(--ref-size-xs); color: var(--sys-color-on-surface-variant); font-weight: var(--ref-weight-medium); }
.stat-card-trend { font-size: var(--ref-size-xs); font-weight: var(--ref-weight-semibold); }
.stat-card-trend.positive { color: var(--sys-color-success); }
.stat-card-trend.neutral { color: var(--sys-color-on-surface-subtle); }

/* ─── Activity Item ─── */
.activity-item { display: flex; align-items: center; gap: var(--ref-spacing-3); padding: var(--ref-spacing-3) var(--ref-spacing-4); }
.activity-icon {
    width: var(--ref-spacing-8); height: var(--ref-spacing-8);
    border-radius: var(--sys-shape-corner-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.activity-content { flex: 1; min-width: 0; }
.activity-title {
    font-size: var(--ref-size-sm); font-weight: var(--ref-weight-medium);
    color: var(--sys-color-on-surface);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-time { font-size: var(--ref-size-xs); color: var(--sys-color-on-surface-subtle); }

/* ─── Section Header ─── */
.section-header {
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    border-bottom: 1px solid var(--sys-color-outline);
    display: flex; align-items: center; justify-content: space-between;
}
.section-title { font-weight: var(--ref-weight-bold); color: var(--sys-color-on-surface); font-size: var(--ref-size-sm); }
.section-link { font-size: var(--ref-size-xs); font-weight: var(--ref-weight-semibold); }

/* ─── Breadcrumbs ─── */
.breadcrumbs {
    font-size: var(--ref-size-sm);
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-1);
    color: var(--sys-color-on-surface-variant);
}
.breadcrumbs a { color: var(--sys-color-on-surface-variant); transition: color var(--sys-motion-duration-short); }
.breadcrumbs a:hover { color: var(--sys-color-primary); }
.breadcrumbs .separator { color: var(--sys-color-on-surface-subtle); margin: 0 var(--ref-spacing-1); }
.breadcrumbs .current { color: var(--sys-color-on-surface); font-weight: var(--ref-weight-medium); }

/* ─── Tabs ─── */
.tabs {
    display: inline-flex;
    background: var(--sys-color-surface-container);
    border-radius: var(--sys-shape-corner-lg);
    padding: var(--ref-spacing-1);
    gap: var(--ref-spacing-1);
}
.tab {
    padding: var(--ref-spacing-2) var(--ref-spacing-4);
    border-radius: var(--sys-shape-corner-md);
    font-size: var(--ref-size-sm);
    font-weight: var(--ref-weight-medium);
    color: var(--sys-color-on-surface-variant);
    transition: all var(--sys-motion-duration-short);
    cursor: pointer;
}
.tab:hover { color: var(--sys-color-on-surface); background: var(--sys-color-surface-container-high); }
.tab.active {
    background: var(--comp-gradient-primary);
    color: var(--sys-color-on-primary);
    font-weight: var(--ref-weight-semibold);
}

/* ─── Table ─── */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ref-size-sm);
}
.table th {
    text-align: left;
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    font-weight: var(--ref-weight-semibold);
    color: var(--sys-color-on-surface-variant);
    border-bottom: 1px solid var(--sys-color-outline);
    background: var(--sys-color-surface-container);
}
.table td {
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    border-bottom: 1px solid var(--sys-color-outline-variant);
    color: var(--sys-color-on-surface);
}
.table tr:hover td { background: var(--sys-color-surface-container-high); }
.table-zebra tr:nth-child(even) td { background: var(--sys-color-surface-container); }

/* ─── Alert ─── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ref-spacing-3);
    padding: var(--ref-spacing-4);
    border-radius: var(--sys-shape-corner-lg);
    font-size: var(--ref-size-sm);
}
.alert-icon { flex-shrink: 0; width: var(--ref-spacing-5); height: var(--ref-spacing-5); }
.alert-info { background: var(--sys-color-cyan-container); color: var(--sys-color-cyan); }
.alert-success { background: var(--sys-color-success-container); color: var(--sys-color-success); }
.alert-warning { background: var(--sys-color-warning-container); color: var(--sys-color-warning); }
.alert-error { background: var(--sys-color-error-container); color: var(--sys-color-error); }

/* Toasts: fond plus opaque pour meilleure lisibilité */
#toast-container .alert-success { background: color-mix(in srgb, var(--palette-success) 85%, var(--sys-color-surface)); }
#toast-container .alert-error { background: color-mix(in srgb, var(--palette-error) 85%, var(--sys-color-surface)); }
#toast-container .alert-warning { background: color-mix(in srgb, var(--palette-warning) 85%, var(--sys-color-surface)); }
#toast-container .alert-info { background: color-mix(in srgb, var(--palette-cyan) 85%, var(--sys-color-surface)); }
#toast-container .alert { color: white; font-weight: 500; }

/* ─── Page Header ─── */
.page-header {
    text-align: center;
    margin-bottom: var(--ref-spacing-6);
}
.page-header h1 {
    font-size: var(--ref-size-2xl);
    font-weight: bold;
}
.page-header p {
    color: var(--sys-color-outline);
    margin-top: var(--ref-spacing-1);
}
.page-actions {
    display: flex;
    justify-content: center;
    gap: var(--ref-spacing-2);
    margin-bottom: var(--ref-spacing-6);
}

/* ─── Empty State ─── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ref-spacing-6);
    text-align: center;
}
.empty-state-icon {
    width: 4rem; height: 4rem;
    color: var(--sys-color-on-surface-subtle);
    margin-bottom: var(--ref-spacing-4);
}
.empty-state-title {
    font-size: var(--ref-size-lg);
    font-weight: var(--ref-weight-semibold);
    color: var(--sys-color-on-surface-variant);
    margin-bottom: var(--ref-spacing-2);
}
.empty-state-text {
    font-size: var(--ref-size-sm);
    color: var(--sys-color-on-surface-subtle);
    margin-bottom: var(--ref-spacing-4);
}

/* ─── Loading Spinner ─── */
.spinner {
    width: var(--ref-spacing-6); height: var(--ref-spacing-6);
    border: 2px solid var(--sys-color-outline-variant);
    border-top-color: var(--sys-color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.spinner-xs { width: 0.75rem; height: 0.75rem; border-width: 1.5px; }
.spinner-sm { width: 1rem; height: 1rem; border-width: 1.5px; }
.spinner-lg { width: var(--ref-spacing-10); height: var(--ref-spacing-10); border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Loading (DaisyUI compat) ─── */
.loading {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--sys-color-outline-variant);
    border-top-color: var(--sys-color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.loading-spinner { /* same as .loading */ }
.loading-sm { width: 1rem; height: 1rem; border-width: 1.5px; }

/* ─── File List Item ─── */
.file-item {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-3);
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    transition: background var(--sys-motion-duration-short);
}
.file-item:hover { background: var(--sys-color-surface-container-high); }
.file-item.indexed { background: var(--sys-color-success-container); }
.file-icon { width: var(--ref-spacing-5); height: var(--ref-spacing-5); flex-shrink: 0; }
.file-icon-folder { color: var(--sys-color-amber); }
.file-icon-file { color: var(--sys-color-on-surface-subtle); }
.file-icon-watched { color: var(--sys-color-success); }
.file-name { flex: 1; font-weight: var(--ref-weight-medium); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: var(--ref-size-xs); color: var(--sys-color-on-surface-subtle); }

/* ─── Selection Bar ─── */
.selection-bar {
    position: fixed;
    bottom: var(--ref-spacing-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-modal);
    background: var(--sys-color-surface-container);
    border: 1px solid var(--sys-color-primary);
    border-radius: var(--sys-shape-corner-xl);
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-4);
    box-shadow: var(--sys-elevation-4);
}
.selection-count { font-weight: var(--ref-weight-bold); color: var(--sys-color-primary); }

/* ─── Dropdown ─── */
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--ref-spacing-1);
    min-width: 10rem;
    background: var(--sys-color-glass-elevated);
    backdrop-filter: blur(var(--sys-blur-glass));
    -webkit-backdrop-filter: blur(var(--sys-blur-glass));
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--sys-shape-corner-lg);
    box-shadow: var(--sys-elevation-4);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--ref-spacing-2)));
    transition: all var(--sys-motion-duration-short);
    overflow: hidden;
}
.dropdown:focus-within .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-2);
    padding: var(--ref-spacing-2) var(--ref-spacing-3);
    font-size: var(--ref-size-sm);
    color: var(--sys-color-on-surface);
    transition: background var(--sys-motion-duration-short);
    cursor: pointer;
}
.dropdown-item:hover {
    background: var(--sys-color-surface-container-high);
}
.dropdown-item.active {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
}
.dropdown-item:first-child { border-radius: var(--sys-shape-corner-lg) var(--sys-shape-corner-lg) 0 0; }
.dropdown-item:last-child { border-radius: 0 0 var(--sys-shape-corner-lg) var(--sys-shape-corner-lg); }

/* Dropdown-end (align right) */
.dropdown-end .dropdown-content {
    left: auto;
    right: 0;
}

/* Cyber theme dropdown */
html.cyber .dropdown-content {
    background: rgba(10, 10, 20, 0.95);
    border-color: var(--sys-color-outline);
    box-shadow: var(--sys-glow-primary), var(--sys-elevation-4);
}
html.cyber .dropdown-item:hover {
    background: rgba(0, 255, 255, 0.1);
}

/* ─── Menu (like DaisyUI) ─── */
.menu {
    display: flex;
    flex-direction: column;
    padding: var(--ref-spacing-2);
    gap: var(--ref-spacing-1);
}
.menu li a,
.menu li button {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-2);
    padding: var(--ref-spacing-2) var(--ref-spacing-3);
    border-radius: var(--comp-interactive-radius);
    font-size: var(--ref-size-sm);
    color: var(--sys-color-on-surface);
    transition: background var(--sys-motion-duration-short);
}
.menu li a:hover,
.menu li button:hover {
    background: var(--sys-color-surface-container-high);
}
.menu li a.active,
.menu li button.active {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
}

/* Rounded-box (common with DaisyUI) */
.rounded-box {
    border-radius: var(--sys-shape-corner-lg);
}

/* ─── Console ─── */
.console-command {
    background: var(--comp-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--ref-weight-bold);
}
.console-text { color: var(--sys-color-on-surface-variant); }
.console-success { color: var(--sys-color-success); }
.console-error { color: var(--sys-color-error); }

.hover-surface:hover { background: var(--sys-color-surface-container-high); }

/* ═══════════════════════════════════════════════════════════════════
   MODALS
   Contained within main content area (doesn't cover sidebar/console)
   ═══════════════════════════════════════════════════════════════════ */

.modal-toggle { display: none; }

.modal {
    position: fixed;
    top: var(--layout-navbar-height);
    left: 0;
    right: 0;
    bottom: var(--layout-console-height);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--sys-color-scrim);
    backdrop-filter: blur(var(--sys-blur-overlay));
    -webkit-backdrop-filter: blur(var(--sys-blur-overlay));
    padding: var(--ref-spacing-4);
}

.modal-toggle:checked + .modal,
.modal.modal-open,
dialog.modal[open] {
    display: flex;
}

body.topinambour-closed .modal { bottom: 0; }

/* Modal content */
.modal-content {
    background: var(--sys-color-glass-elevated);
    border-radius: var(--sys-shape-corner-xl);
    max-width: 28rem;
    width: 100%;
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    box-shadow: var(--sys-elevation-5), var(--sys-glow-secondary);
}
.modal-content.max-w-4xl { max-width: 56rem; }
.modal-content.max-w-2xl { max-width: 42rem; }

.card.modal-content { padding: 0; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    cursor: pointer;
}

/* Modal action buttons row */
.modal-action {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sys-color-outline-variant);
}

/* Alignment variants */
.modal-bottom { align-items: flex-end; }
@media (min-width: 640px) {
    .sm\:modal-middle { align-items: center; }
}

/* Desktop: modal avoids sidebar */
@media (min-width: 1024px) {
    .modal {
        top: 0;
        left: var(--layout-sidebar-width);
        bottom: var(--layout-console-height);
    }
    body.topinambour-closed .modal {
        bottom: 0;
    }
}

/* XL Desktop: console is inline but still needs space */
@media (min-width: 1440px) {
    .modal {
        bottom: var(--layout-console-height);
    }
    body.topinambour-closed .modal {
        bottom: 0;
    }
}

/* Native dialog modal (same positioning) */
dialog.modal {
    position: fixed;
    top: var(--layout-navbar-height);
    left: 0;
    right: 0;
    bottom: var(--layout-console-height);
    z-index: var(--z-modal);
    background: var(--sys-color-scrim);
    backdrop-filter: blur(var(--sys-blur-overlay));
    -webkit-backdrop-filter: blur(var(--sys-blur-overlay));
    border: none;
    padding: var(--ref-spacing-4);
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
}
dialog.modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Native dialog backdrop - transparent and non-blocking since we use our own scrim */
dialog.modal::backdrop {
    background: transparent;
    pointer-events: none;
}

/* Desktop: dialog avoids sidebar */
@media (min-width: 1024px) {
    dialog.modal {
        top: 0;
        left: var(--layout-sidebar-width);
        bottom: var(--layout-console-height);
    }
    body.topinambour-closed dialog.modal {
        bottom: 0;
    }
}

/* XL Desktop: dialog avoids sidebar and console */
@media (min-width: 1440px) {
    dialog.modal {
        bottom: var(--layout-console-height);
    }
    body.topinambour-closed dialog.modal {
        bottom: 0;
    }
}

/* ─── Toast ─── */
.toast-animate-in { animation: toast-in 0.3s ease-out forwards; }
.toast-animate-out { animation: toast-out 0.3s ease-in forwards; }
@keyframes toast-in { from { transform: translateY(-1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-1rem); opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   Mobile-first: base styles → landscape → desktop → desktop XL
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Mobile (default) ─── */
.mobile-navbar {
    display: flex;
    position: sticky;
    top: 0;
    height: var(--layout-navbar-height);
    z-index: var(--z-sticky);
}

.desktop-sidebar { 
    display: none;
    background: var(--sys-color-surface-container);
    border-radius: var(--comp-sidebar-radius);
    border: var(--comp-sidebar-border);
}

.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--sys-color-scrim);
    z-index: var(--z-overlay);
}
.drawer-overlay.open { display: block; }

.drawer-sidebar {
    position: fixed;
    left: -280px;
    top: 0; bottom: 0;
    width: 280px;
    z-index: calc(var(--z-overlay) + 1);
    transition: left var(--sys-motion-duration-long);
    overflow: hidden;
}
.drawer-sidebar.open { left: 0; }

.drawer-scroll-wrapper {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* DaisyUI-style drawer */
.drawer {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.drawer-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.drawer-content {
    flex: 1;
    overflow-y: auto;
}
.drawer-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--sys-motion-duration-long);
}
.drawer-toggle:checked ~ .drawer-side {
    transform: translateX(0);
}
.drawer-overlay-btn {
    position: fixed;
    inset: 0;
    background: var(--sys-color-scrim);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--sys-motion-duration-medium);
}
.drawer-toggle:checked ~ .drawer-overlay-btn {
    opacity: 1;
    pointer-events: auto;
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding-bottom: var(--layout-console-height);
}

.main-wrapper main {
    padding: var(--layout-padding);
    padding-bottom: calc(var(--layout-padding) + 52px); /* Extra space for FAB */
    gap: var(--layout-gap);
    position: relative;
}

body.topinambour-closed .main-wrapper { padding-bottom: 0 !important; }

/* ─────────────────────────────────────────────────────────────────
   LANDSCAPE MOBILE
   Phones rotated horizontally - console moves to left side
   ───────────────────────────────────────────────────────────────── */
.landscape-sidebar { display: none; }
.console-landscape-close { display: none; }

@media (orientation: landscape) and (max-height: 500px) {
    .mobile-navbar { display: none !important; }
    
    .landscape-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        display: flex !important;
        flex-direction: column;
        width: var(--layout-landscape-sidebar-width);
        border-right: 1px solid var(--sys-color-outline);
        padding: var(--ref-spacing-2) 0;
        gap: var(--ref-spacing-2);
        align-items: center;
        z-index: var(--z-sticky);
        overflow: hidden;
    }
    
    .main-wrapper {
        padding-bottom: 0 !important;
        padding-left: calc(var(--layout-landscape-sidebar-width) + var(--layout-console-width-landscape));
    }
    
    body.topinambour-closed .main-wrapper {
        padding-left: var(--layout-landscape-sidebar-width) !important;
    }
    
    #topinambour-console {
        position: fixed !important;
        left: var(--layout-landscape-sidebar-width) !important;
        top: 0 !important; bottom: 0 !important;
        right: auto !important;
        width: var(--layout-console-width-landscape) !important;
        height: 100% !important;
        border: none !important;
        border-right: var(--comp-console-border) !important;
    }
    
    #topinambour-console > .console-header { display: none !important; }

    /* Swap prompt for close button in landscape */
    .console-prompt { display: none !important; }
    .console-landscape-close { display: flex !important; }

    .modal {
        top: 0 !important;
        bottom: 0 !important;
        left: calc(var(--layout-landscape-sidebar-width) + var(--layout-console-width-landscape)) !important;
    }

    body.topinambour-closed .modal {
        left: var(--layout-landscape-sidebar-width) !important;
    }

    dialog.modal {
        top: 0 !important;
        bottom: 0 !important;
        left: calc(var(--layout-landscape-sidebar-width) + var(--layout-console-width-landscape)) !important;
    }

    body.topinambour-closed dialog.modal {
        left: var(--layout-landscape-sidebar-width) !important;
    }

}

/* ─────────────────────────────────────────────────────────────────
   DESKTOP (≥1024px)
   Sidebar visible, drawer hidden, fixed console at bottom
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
    .mobile-navbar { display: none !important; }
    .desktop-sidebar { display: flex !important; }
    .drawer-sidebar { display: none !important; }
    .main-wrapper { overflow: hidden; }
    
    .lg-flex { display: flex; }
    .lg-hidden { display: none; }
    .lg-block { display: block; }
    .lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg-gap-5 { gap: var(--ref-spacing-5); }
    .lg-p-5 { padding: var(--ref-spacing-5); }
    .lg-p-8 { padding: var(--ref-spacing-8); }
    
    .section-header { padding: var(--ref-spacing-4) var(--ref-spacing-6); }
    .section-title { font-size: var(--ref-size-base); }
    .section-link { font-size: var(--ref-size-sm); }
    
    .activity-icon { width: var(--ref-spacing-10); height: var(--ref-spacing-10); border-radius: var(--sys-shape-corner-lg); }
    .activity-item { padding: var(--ref-spacing-4) var(--ref-spacing-6); gap: var(--ref-spacing-4); }
    
    /* DaisyUI lg:drawer-open */
    .lg\:drawer-open .drawer-side {
        position: relative;
        transform: translateX(0);
        z-index: auto;
    }
    .lg\:drawer-open .drawer-overlay-btn {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────────
   DESKTOP XL (≥1440px)
   Sidebar full height, console inline below main content
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 1440px) {
    .main-wrapper {
        padding-bottom: 0 !important;
        flex-direction: row !important;
    }
    
    .desktop-sidebar {
        margin: var(--comp-sidebar-margin) !important;
        margin-right: 0 !important;
        border-radius: var(--comp-sidebar-radius);
        border: var(--comp-sidebar-border);
        height: auto !important;
        align-self: stretch;
    }
    
    .content-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        position: relative;
    }
    
    .content-column > main {
        flex: 1;
        overflow: auto;
    }
    
    #topinambour-console {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
        top: auto !important;
        height: var(--layout-console-height) !important;
        flex-shrink: 0;
        margin: 0 var(--comp-console-margin) var(--comp-console-margin) var(--comp-console-margin);
        border-radius: var(--comp-console-radius);
        border: var(--comp-console-border);
    }
}

/* ─── Console (default: fixed bottom) ─── */
#topinambour-console {
    height: var(--layout-console-height);
    border-top: var(--comp-console-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
}

body.topinambour-closed #topinambour-console { display: none; }

.resize-handle {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    cursor: ns-resize;
    z-index: 10;
}
.resize-handle:hover, .resize-handle:active {
    background: var(--sys-color-primary-container);
}

/* ─── Navbar (DaisyUI compat) ─── */
.navbar {
    display: flex;
    align-items: center;
    padding: var(--ref-spacing-2) var(--ref-spacing-4);
    min-height: var(--layout-navbar-height);
}
.navbar .flex-none { flex: none; }
.navbar .flex-1 { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════
   COMPATIBILITY LAYER (DaisyUI → M3)
   These aliases help during migration
   ═══════════════════════════════════════════════════════════════════ */

/* Background colors */
.bg-base-100 { background: var(--sys-color-surface-container); }
.bg-base-200 { background: var(--sys-color-background); }
.bg-base-300 { background: var(--sys-color-surface-container-high); }

/* Text colors */
.text-base-content { color: var(--sys-color-on-surface); }
.text-base-content\/50,
.text-base-content\/40 { color: var(--sys-color-on-surface-variant); }

/* Border colors */
.border-base-200,
.border-base-300 { border-color: var(--sys-color-outline-variant); }

/* Focus states */
:focus-visible {
    outline: 2px solid var(--sys-color-primary);
    outline-offset: 2px;
}

/* Skip to content link (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    background: var(--sys-color-primary);
    color: var(--sys-color-on-primary);
    font-weight: var(--ref-weight-bold);
    border-radius: var(--ref-shape-md);
    z-index: calc(var(--z-modal) + 1);
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: var(--ref-spacing-4);
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

.chat-bubble {
    padding: var(--ref-spacing-3) var(--ref-spacing-4);
    border-radius: var(--ref-shape-lg);
    max-width: 85%;
    line-height: 1.5;
}

.chat-bubble-user {
    background: var(--sys-color-primary);
    color: var(--sys-color-on-primary);
    margin-left: auto;
    border-bottom-right-radius: var(--ref-shape-xs);
}

.chat-bubble-assistant {
    background: var(--sys-color-surface-container-high);
    color: var(--sys-color-on-surface);
    margin-right: auto;
    border-bottom-left-radius: var(--ref-shape-xs);
}

/* ═══════════════════════════════════════════════════════════════════
   TOPINAMBOUR CONSOLE - Enhanced Styles
   ═══════════════════════════════════════════════════════════════════ */

/* Console container */
#topinambour-console {
    --console-bg: var(--sys-color-glass-elevated);
    --console-border: 1px solid var(--sys-color-outline-variant);
    background: var(--console-bg);
    border-top: var(--console-border);
}

/* Console header */
.console-header {
    background: var(--sys-color-surface-container);
    border-bottom: 1px solid var(--sys-color-outline-variant);
    transition: background var(--sys-motion-duration-short);
}

.console-header:hover {
    background: var(--sys-color-surface-container-high);
}

/* Console icon */
.console-icon {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sys-shape-corner-md);
    background: var(--comp-gradient-primary);
    color: var(--sys-color-on-primary);
    font-size: 0.875rem;
    box-shadow: var(--sys-elevation-2);
}

/* Console messages area */
.console-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--ref-spacing-3);
    font-size: var(--ref-size-sm);
    line-height: 1.6;
}

.console-messages > * + * {
    margin-top: var(--ref-spacing-2);
}

/* User command line */
.console-user-msg {
    display: flex;
    align-items: flex-start;
    gap: var(--ref-spacing-2);
}

.console-prompt {
    color: var(--sys-color-primary);
    font-weight: var(--ref-weight-bold);
    font-family: var(--ref-typeface-plain);
}

.console-user-text {
    color: var(--sys-color-on-surface);
}

/* Assistant response */
.console-response {
    background: var(--sys-color-surface-container);
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--sys-shape-corner-md);
    padding: var(--ref-spacing-3);
    margin-left: var(--ref-spacing-4);
}

/* Markdown rendering in console */
.console-response strong,
.console-response b {
    font-weight: var(--ref-weight-semibold);
    color: var(--sys-color-on-surface);
}

.console-response em,
.console-response i {
    font-style: italic;
    color: var(--sys-color-on-surface-variant);
}

.console-response code {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    font-size: 0.85em;
    padding: 0.125em 0.375em;
    background: var(--sys-color-surface-container-high);
    border-radius: var(--sys-shape-corner-xs);
    color: var(--sys-color-primary);
}

.console-response pre {
    background: var(--sys-color-surface-dim);
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--sys-shape-corner-sm);
    padding: var(--ref-spacing-3);
    margin: var(--ref-spacing-2) 0;
    overflow-x: auto;
}

.console-response pre code {
    background: none;
    padding: 0;
    font-size: var(--ref-size-xs);
    color: var(--sys-color-on-surface);
}

.console-response ul,
.console-response ol {
    margin: var(--ref-spacing-2) 0;
    padding-left: var(--ref-spacing-5);
}

.console-response li {
    margin: var(--ref-spacing-1) 0;
}

.console-response ul li {
    list-style-type: disc;
}

.console-response ol li {
    list-style-type: decimal;
}

.console-response a {
    color: var(--sys-color-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--sys-motion-duration-short);
}

.console-response a:hover {
    text-decoration-color: var(--sys-color-primary);
}

.console-response p + p {
    margin-top: var(--ref-spacing-2);
}

/* Action buttons in console */
.console-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ref-spacing-1);
    padding: var(--ref-spacing-1) var(--ref-spacing-3);
    font-size: var(--ref-size-xs);
    font-weight: var(--ref-weight-semibold);
    border-radius: var(--sys-shape-corner-sm);
    transition: all var(--sys-motion-duration-short);
    cursor: pointer;
    border: none;
}

.console-action-btn.confirm {
    background: var(--sys-color-success-container);
    color: var(--sys-color-success);
}

.console-action-btn.confirm:hover {
    background: var(--sys-color-success);
    color: var(--sys-color-on-primary);
}

.console-action-btn.destructive {
    background: var(--sys-color-error-container);
    color: var(--sys-color-error);
}

.console-action-btn.destructive:hover {
    background: var(--sys-color-error);
    color: var(--sys-color-on-primary);
}

/* Console input area */
.console-input-area {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-2);
    padding: var(--ref-spacing-2) var(--ref-spacing-3);
    background: var(--sys-color-surface-container);
    border-top: 1px solid var(--sys-color-outline-variant);
}

.console-input {
    flex: 1;
    min-width: 0;
    padding: var(--ref-spacing-2) var(--ref-spacing-3);
    font-size: var(--ref-size-sm);
    background: var(--sys-color-surface);
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--sys-shape-corner-sm);
    color: var(--sys-color-on-surface);
    transition: border-color var(--sys-motion-duration-short), box-shadow var(--sys-motion-duration-short);
}

.console-input:focus {
    outline: none;
    border-color: var(--sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sys-color-primary) 20%, transparent);
}

.console-input::placeholder {
    color: var(--sys-color-on-surface-subtle);
}

.console-send-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--comp-gradient-primary);
    border: none;
    border-radius: var(--sys-shape-corner-sm);
    color: var(--sys-color-on-primary);
    cursor: pointer;
    transition: opacity var(--sys-motion-duration-short), transform var(--sys-motion-duration-short);
}

.console-send-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

.console-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.console-send-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Loading indicator */
.console-loading {
    display: flex;
    align-items: center;
    gap: var(--ref-spacing-2);
    color: var(--sys-color-on-surface-variant);
    font-size: var(--ref-size-xs);
}

.console-loading::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--sys-color-outline-variant);
    border-top-color: var(--sys-color-primary);
    border-radius: 50%;
    animation: console-spin 0.8s linear infinite;
}

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

/* Empty state */
.console-empty {
    color: var(--sys-color-on-surface-subtle);
    font-size: var(--ref-size-xs);
    text-align: center;
    padding: var(--ref-spacing-4);
}

/* Cyber theme enhancements - dark mode */
html.cyber body.dark #topinambour-console {
    --console-bg: rgba(10, 10, 20, 0.95);
    border: 1px solid var(--sys-color-outline);
    box-shadow: var(--sys-glow-primary);
}

html.cyber body.dark .console-header {
    background: rgba(0, 255, 255, 0.05);
    border-bottom-color: var(--sys-color-outline);
}

html.cyber body.dark .console-response {
    border-color: var(--sys-color-outline);
    background: rgba(0, 255, 255, 0.03);
}

/* Cyber theme enhancements - light mode */
html.cyber body.light #topinambour-console {
    --console-bg: rgba(240, 250, 255, 0.95);
    border: 1px solid var(--sys-color-outline);
    box-shadow: 0 0 20px rgba(0, 180, 180, 0.15);
}

html.cyber body.light .console-header {
    background: rgba(0, 200, 200, 0.08);
    border-bottom-color: var(--sys-color-outline);
}

html.cyber body.light .console-response {
    border-color: var(--sys-color-outline);
    background: rgba(0, 200, 200, 0.05);
}

/* Cyber theme enhancements - shared */
html.cyber .console-icon {
    box-shadow: var(--sys-glow-primary);
}

html.cyber .console-prompt {
    text-shadow: 0 0 8px var(--sys-color-primary);
}

html.cyber .console-response code {
    color: var(--palette-tertiary);
    text-shadow: 0 0 4px var(--palette-tertiary);
}

html.cyber .console-input:focus {
    box-shadow: var(--sys-glow-primary);
}

html.cyber .console-send-btn {
    box-shadow: var(--sys-glow-primary);
}

html.cyber .console-send-btn:hover {
    box-shadow: 0 0 30px var(--palette-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

.max-h-500 { max-height: 500px; }
.max-h-400 { max-height: 400px; }
.max-h-300 { max-height: 300px; }

/* Additional utilities (not duplicated from main utility section) */
.flex-grow { flex-grow: 1; }
.resize-y { resize: vertical; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.font-mono { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }
.cursor-pointer { cursor: pointer; }
.overflow-x-auto { overflow-x: auto; }
.opacity-30 { opacity: 0.3; }

/* Additional text utilities (not duplicated from main utility section) */
.text-right { text-align: right; }
.block { display: block; }
.self-end { align-self: flex-end; }
.self-start { align-self: flex-start; }

/* Additional flex utilities (not duplicated from main utility section) */
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.items-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLE FAB (Floating Action Button)
   ═══════════════════════════════════════════════════════════════════════════ */

.console-fab {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fab);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    transform: translateZ(0); /* Force GPU layer */
}

.console-fab svg {
    width: 16px;
    height: 16px;
}

.console-fab:hover {
    transform: translateZ(0) scale(1.05);
}

.console-fab:active {
    transform: translateZ(0) scale(0.95);
}

/* ─── Landscape console toggle (in sidebar) ─── */
.landscape-console-toggle {
    display: none;
    position: absolute;
    bottom: var(--ref-spacing-3);
    left: 50%;
    transform: translateX(-50%);
}

.landscape-console-toggle.active {
    background: var(--sys-color-primary-container);
    color: var(--sys-color-on-primary-container);
}

@media (orientation: landscape) and (max-height: 500px) {
    .landscape-console-toggle {
        display: flex;
    }
}