:root {
      --bg: #09090b;
      --bg-subtle: #111113;
      --surface: rgba(255,255,255,0.04);
      --surface-hover: rgba(255,255,255,0.07);
      --surface-solid: #161618;
      --glass: rgba(255,255,255,0.035);
      --glass-border: rgba(255,255,255,0.08);
      --border: rgba(255,255,255,0.06);
      --border-hover: rgba(255,255,255,0.12);
      --accent: #00e5a0;
      --accent-dim: rgba(0,229,160,0.12);
      --accent-hover: #00ffb4;
      --accent-glow: rgba(0,229,160,0.15);
      --text: #f0f0f2;
      --text-secondary: #a0a0a8;
      --text-dim: #5c5c66;
      --red: #f43f5e;
      --green: #22c55e;
      --yellow: #facc15;
      --blue: #6366f1;
      --orange: #f59e0b;
      --panel-width: 55%;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
      --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
      --shadow-glow: 0 0 40px rgba(0,229,160,0.08);
      --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
      --transition-smooth: 300ms cubic-bezier(0.4,0,0.2,1);
      --transition-spring: 500ms cubic-bezier(0.34,1.56,0.64,1);
    }