/* ===========================================
   Lucy UI - LUXE DARK Glass Theme
   Based on Figma "Glassy White Glow Design"
   =========================================== */

/* ===========================================
   LUXE DARK VARIABLES
   =========================================== */
[data-theme="carbon"] {
  /* Canvas */
  --bg-primary: #1a1d24;
  
  /* Glass effects - from Figma */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-card: rgba(255, 255, 255, 0.04);
  --glass-bg-modal: rgba(255, 255, 255, 0.06);
  --glass-bg-button: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);
  
  /* Borders - subtle */
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-card: rgba(255, 255, 255, 0.12);
  --glass-border-modal: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-border-strong: rgba(255, 255, 255, 0.25);
  
  /* Glow colors - cyan/blue tint from Figma */
  --glow-color: rgba(100, 200, 255, 0.1);
  --glow-color-hover: rgba(100, 200, 255, 0.15);
  --glow-color-strong: rgba(100, 200, 255, 0.2);
  --glow-purple: rgba(150, 150, 255, 0.15);
  
  /* Accent - warm rose (Lucy brand) */
  --accent: #B8855E;
  --accent-glow: rgba(204, 152, 120, 0.4);
  
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-hint: rgba(255, 255, 255, 0.3);
  --chart-line: #e6e2dc;

  /* Verification badges (BEACN merit badge) — dark canvas */
  --verify-felt: #1B1B1F;
  --verify-ok: #5DBE8A;
  --verify-calc: #6FA8DC;
  --verify-gold: #D4A843;
  --verify-unearned: #6f6d68;
  --verify-bad: #E0654E;


  /* Semantic colors for report components */
  --color-negative: #f87171;
  --color-positive: #34d399;
  --color-warning: #fbbf24;
  --surface-card: rgba(255, 255, 255, 0.03);
  --surface-elevated: rgba(15, 23, 42, 0.95);
  --text-on-surface: #e2e8f0;
  --text-on-surface-muted: #94a3b8;
  --text-on-surface-dim: #64748b;

  /* Shadows - from Figma */
  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --shadow-modal: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
  --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-button-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
  
  /* Inset highlights */
  --inset-light: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
  --inset-light-subtle: inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
  --inset-light-card: inset 0 1px 2px 0 rgba(255, 255, 255, 0.08);
  --inset-input: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 30px;
  
  /* Blur */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(30px);
  
  /* Transitions - spring physics */
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Severity — critical (red) */
  --sev-crit: #f87171;
  --sev-crit-soft: #fca5a5;
  --sev-crit-bg: rgba(239, 68, 68, 0.08);
  --sev-crit-bg-subtle: rgba(239, 68, 68, 0.04);
  --sev-crit-border: rgba(239, 68, 68, 0.2);
  --sev-crit-border-hover: rgba(239, 68, 68, 0.35);
  --sev-crit-glow: rgba(239, 68, 68, 0.1);
  --sev-crit-badge-bg: rgba(239, 68, 68, 0.15);

  /* Severity — warning (amber) */
  --sev-warn: #fbbf24;
  --sev-warn-soft: #fcd34d;
  --sev-warn-bg: rgba(245, 158, 11, 0.07);
  --sev-warn-bg-subtle: rgba(245, 158, 11, 0.03);
  --sev-warn-border: rgba(245, 158, 11, 0.18);
  --sev-warn-border-hover: rgba(245, 158, 11, 0.3);
  --sev-warn-glow: rgba(245, 158, 11, 0.08);
  --sev-warn-badge-bg: rgba(245, 158, 11, 0.12);

  /* Severity — healthy (green) */
  --sev-good: #34d399;
  --sev-good-soft: #6ee7b7;
  --sev-good-bg: rgba(16, 185, 129, 0.07);
  --sev-good-bg-subtle: rgba(16, 185, 129, 0.02);
  --sev-good-border: rgba(16, 185, 129, 0.18);
  --sev-good-border-hover: rgba(16, 185, 129, 0.3);
  --sev-good-glow: rgba(16, 185, 129, 0.08);
  --sev-good-badge-bg: rgba(16, 185, 129, 0.1);

  /* Severity — info (indigo) */
  --sev-info: #a5b4fc;
  --sev-info-soft: #c4b5fd;
  --sev-info-bg: rgba(99, 102, 241, 0.08);
  --sev-info-bg-subtle: rgba(99, 102, 241, 0.03);
  --sev-info-border: rgba(99, 102, 241, 0.18);
  --sev-info-badge-bg: rgba(99, 102, 241, 0.12);

  /* Narrative tags */
  --narr-finding-bg: rgba(52, 211, 153, 0.15);
  --narr-finding-color: #34d399;
  --narr-contra-bg: rgba(248, 113, 113, 0.12);
  --narr-contra-color: #fca5a5;
  --narr-risk-bg: rgba(251, 191, 36, 0.12);
  --narr-risk-color: #fcd34d;
  --narr-action-bg: rgba(129, 140, 248, 0.12);
  --narr-action-color: #c4b5fd;
}

/* ===========================================
   ANIMATED GRADIENT BLOBS (Background)
   =========================================== */
[data-theme="carbon"] body {
  background: #1a1d24;
  position: relative;
  overflow-x: hidden;
}

[data-theme="carbon"] body::before,
[data-theme="carbon"] body::after,
[data-theme="carbon"] .main-wrapper::before {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.2;
  animation: float 25s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

[data-theme="carbon"] body::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.6) 0%, rgba(59, 130, 246, 0.3) 40%, transparent 70%);
  top: 5%;
  left: 15%;
  animation-delay: 0s;
}

[data-theme="carbon"] body::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.5) 0%, rgba(139, 92, 246, 0.25) 40%, transparent 70%);
  top: 35%;
  right: 10%;
  animation-delay: -7s;
}

[data-theme="carbon"] .main-wrapper::before {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.4) 0%, rgba(236, 72, 153, 0.2) 40%, transparent 70%);
  bottom: 5%;
  left: 35%;
  animation-delay: -12s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 30px) scale(0.9);
  }
}

/* ===========================================
   GLASS PANEL (Sidebar)
   =========================================== */
[data-theme="carbon"] .butterfly-sidebar {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-left: none;
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
  margin: 0;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 40px var(--glow-color);
  
  /* Flex column layout - align with forecast content */
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 60px;
  padding-bottom: 30px;
}

/* Sidebar header - butterfly and Lucy tight, centered */
[data-theme="carbon"] .butterfly-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  flex-shrink: 0;
}

[data-theme="carbon"] .butterfly-sidebar .mini-butterfly {
  margin: 0;
}

[data-theme="carbon"] .butterfly-sidebar #sidebarStatus {
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

[data-theme="carbon"] .butterfly-sidebar #sidebarStatus:hover {
  color: var(--accent);
  text-shadow: 0 0 15px var(--glow-color);
}

/* Chat output box - matches graph height */
[data-theme="carbon"] .butterfly-sidebar .mini-chat {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  /* Match graph card height */
  height: 450px;
  min-height: 450px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  
  /* Animation */
  transition: var(--transition);
}

[data-theme="carbon"] .butterfly-sidebar .mini-chat:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

/* Chat input area - matches voice summary height */
[data-theme="carbon"] .butterfly-sidebar .chat-input-area {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 20px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="carbon"] .butterfly-sidebar .chat-input-area:focus-within {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

[data-theme="carbon"] .butterfly-sidebar .chat-input-area input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 100%;
  padding: 8px 0;
}

[data-theme="carbon"] .butterfly-sidebar .chat-input-area input:focus {
  outline: none;
}

[data-theme="carbon"] .butterfly-sidebar .chat-input-area button {
  width: 100%;
  margin-top: 8px;
  transition: var(--transition);
}

[data-theme="carbon"] .butterfly-sidebar .chat-input-area button:hover {
  transform: translateY(-2px);
}

/* Hide back button on forecast page */
[data-theme="carbon"] .back-button {
  display: none !important;
}

/* ===========================================
   GLASS CARDS
   =========================================== */
[data-theme="carbon"] .card,
[data-theme="carbon"] .voice-summary-card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Top edge highlight - from Figma */
[data-theme="carbon"] .card::before,
[data-theme="carbon"] .voice-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="carbon"] .card:hover,
[data-theme="carbon"] .voice-summary-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-8px) scale(1.02);
  
  box-shadow: 
    0 20px 50px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.15),
    0 0 80px var(--glow-color-hover);
}

/* ===========================================
   CONVERSATION - Glass Card
   =========================================== */
[data-theme="carbon"] .conversation {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow-y: auto;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="carbon"] .conversation:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  
  box-shadow: 
    0 15px 40px 0 rgba(0, 0, 0, 0.35),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

[data-theme="carbon"] .conversation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
  z-index: 1;
}

/* ===========================================
   GLASS MODAL (Floating Controls)
   =========================================== */
[data-theme="carbon"] .floating-controls {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-xl);
  padding: 20px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 80px var(--glow-purple);
}

/* ===========================================
   GLASS INPUT
   =========================================== */
[data-theme="carbon"] input[type="text"],
[data-theme="carbon"] input[type="number"],
[data-theme="carbon"] select {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text-primary);
  font-size: 14px;
  
  box-shadow: 
    var(--inset-input),
    0 0 30px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="carbon"] input::placeholder {
  color: var(--text-muted);
}

[data-theme="carbon"] input:focus,
[data-theme="carbon"] select:focus {
  outline: none;
  border-color: rgba(100, 200, 255, 0.3);
  
  box-shadow: 
    var(--inset-input),
    0 0 40px var(--glow-color-hover);
}

[data-theme="carbon"] select option {
  background: #1a1d24;
  color: var(--text-primary);
}

/* ===========================================
   GLASS BUTTONS - Glowy outline, no color fill
   =========================================== */
[data-theme="carbon"] button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
  
  transition: var(--transition);
}

[data-theme="carbon"] button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 25px var(--glow-color-hover);
}

[data-theme="carbon"] button:active {
  transform: translateY(0);
}

[data-theme="carbon"] button.ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 
    var(--inset-light-subtle),
    0 0 10px var(--glow-color);
}

[data-theme="carbon"] button.ghost:hover {
  background: var(--glass-bg-card);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="carbon"] button.primary {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="carbon"] button.primary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="carbon"] button.success {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="carbon"] button.success:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

/* ===========================================
   GLASS ICON BUTTONS (Mic, Close, etc.)
   =========================================== */
[data-theme="carbon"] .voice-mic {
  width: 42px;
  height: 42px;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="carbon"] .voice-mic svg {
  width: 18px;
  height: 18px;
}

[data-theme="carbon"] .voice-mic:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-hover);
  color: white;
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="carbon"] .voice-mic.active {
  background: rgba(204, 152, 120, 0.1);
  border-color: var(--glass-border-hover);
  color: var(--accent);
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light),
    0 0 25px rgba(204, 152, 120, 0.2);
  
  animation: mic-pulse 2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 25px rgba(204, 152, 120, 0.2);
  }
  50% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 35px rgba(204, 152, 120, 0.3);
  }
}

[data-theme="carbon"] .close-controls,
[data-theme="carbon"] .anchor-controls {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  
  box-shadow: 
    var(--inset-light-subtle),
    0 0 20px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="carbon"] .close-controls:hover,
[data-theme="carbon"] .anchor-controls:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
  
  box-shadow: 
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="carbon"] .anchor-controls.anchored {
  background: rgba(204, 152, 120, 0.2);
  border-color: var(--accent);
  color: var(--accent);
  
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   BUTTERFLY - Glass outline, no fill, more glow
   =========================================== */
[data-theme="carbon"] .butterfly,
[data-theme="carbon"] .mini-butterfly {
  filter: 
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 20px var(--glow-color))
    drop-shadow(0 0 40px var(--glow-color));
  transition: filter 0.3s ease;
}

[data-theme="carbon"] .butterfly:hover,
[data-theme="carbon"] .mini-butterfly:hover {
  filter: 
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 30px var(--glow-color-hover))
    drop-shadow(0 0 60px var(--glow-color-hover));
}

[data-theme="carbon"] .butterfly.active,
[data-theme="carbon"] .mini-butterfly.active {
  filter: 
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 35px rgba(204, 152, 120, 0.5))
    drop-shadow(0 0 70px rgba(204, 152, 120, 0.4));
  animation: butterfly-glow 2s ease-in-out infinite;
}

@keyframes butterfly-glow {
  0%, 100% {
    filter: 
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 35px rgba(204, 152, 120, 0.5))
      drop-shadow(0 0 70px rgba(204, 152, 120, 0.4));
  }
  50% {
    filter: 
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 50px rgba(204, 152, 120, 0.6))
      drop-shadow(0 0 100px rgba(204, 152, 120, 0.5));
  }
}

/* Butterfly wings - no fill, just outline matching glass border */
[data-theme="carbon"] .left-wing path,
[data-theme="carbon"] .right-wing path {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}

/* ===========================================
   MESSAGES - No individual tiles, inherit from container
   =========================================== */
[data-theme="carbon"] .message.assistant,
[data-theme="carbon"] .message.user {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 16px;
  margin: 4px 0;
  color: var(--text-primary);
}

[data-theme="carbon"] .message.assistant {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}

[data-theme="carbon"] .message.user {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  padding-left: 16px;
}

/* ===========================================
   HEADER
   =========================================== */
[data-theme="carbon"] .header h1 {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

[data-theme="carbon"] .status {
  color: var(--text-secondary);
}

/* ===========================================
   TABLE
   =========================================== */
[data-theme="carbon"] .table th,
[data-theme="carbon"] .table td {
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 8px;
  color: var(--text-primary);
}

[data-theme="carbon"] .table th {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   PILLS & BADGES
   =========================================== */
[data-theme="carbon"] .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: 20px;
  color: var(--text-primary);
  padding: 4px 14px;
  font-size: 11px;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

[data-theme="carbon"] #categoryDisplay,
[data-theme="carbon"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(204, 152, 120, 0.6) 0%, 
    rgba(154, 133, 120, 0.6) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(204, 152, 120, 0.4);
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   TOAST
   =========================================== */
[data-theme="carbon"] #toast {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-lg);
  
  box-shadow: 
    var(--shadow-modal),
    0 0 40px var(--glow-color);
  
  color: var(--text-primary);
}

/* ===========================================
   BACK BUTTON
   =========================================== */
[data-theme="carbon"] .back-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border-card);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

[data-theme="carbon"] .back-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  box-shadow: none;
}

/* ===========================================
   HERO SECTION
   =========================================== */
[data-theme="carbon"] .hero h1 {
  color: var(--text-primary);
}

[data-theme="carbon"] .hero .status .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  color: var(--text-primary);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

/* ===========================================
   CHART CANVAS
   =========================================== */
[data-theme="carbon"] canvas {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ===========================================
   VOICE SUMMARY
   =========================================== */
[data-theme="carbon"] .voice-summary-card h3 {
  color: var(--text-primary);
}

[data-theme="carbon"] #voiceOut {
  color: var(--text-primary);
}

[data-theme="carbon"] #oaklandInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

/* ===========================================
   THINKING ANIMATION
   =========================================== */
[data-theme="carbon"] .thinking {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

[data-theme="carbon"] .thinking .timestamp {
  color: var(--text-muted);
}

[data-theme="carbon"] .thinking .dots span {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* ===========================================
   SCROLLBAR
   =========================================== */
[data-theme="carbon"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme="carbon"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

[data-theme="carbon"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

[data-theme="carbon"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ===========================================
   LABELS
   =========================================== */
[data-theme="carbon"] label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   SPARKLE DECORATION - Behind butterfly
   =========================================== */
[data-theme="carbon"] .butterfly-container {
  position: relative;
}

[data-theme="carbon"] .butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(100, 200, 255, 0.3) 30%, transparent 70%);
  filter: blur(8px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

[data-theme="carbon"] .mini-butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(100, 200, 255, 0.2) 30%, transparent 70%);
  filter: blur(6px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

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

/* ===========================================
   INPUT AREA - Same width as conversation
   =========================================== */
[data-theme="carbon"] .input-container {
  padding: 0;
  margin: 20px 0;
  width: 100%;
}

[data-theme="carbon"] .input-area {
  display: flex;
  gap: 10px;
  width: 100%;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 12px 16px;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  transition: var(--transition);
}

/* Input area moves when focused */
[data-theme="carbon"] .input-area:focus-within {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--glass-border-hover);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
}

[data-theme="carbon"] .input-area input {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 12px;
}

[data-theme="carbon"] .input-area input:focus {
  box-shadow: none;
  border: none;
}

[data-theme="carbon"] .input-area button {
  padding: 10px 24px;
}

[data-theme="carbon"] .voice-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
}

[data-theme="carbon"] .voice-interface .input-container,
[data-theme="carbon"] .voice-interface .conversation {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================
   FORECAST PAGE - Glass styling
   =========================================== */

/* Forecast panel background */
[data-theme="carbon"] .forecast-panel {
  background: transparent;
}

/* Forecast dashboard */
[data-theme="carbon"] .forecast-dashboard {
  position: relative;
}

/* Forecast dashboard padding */
[data-theme="carbon"] .forecast-dashboard {
  padding-left: 10%;
  padding-right: 10%;
}

/* Forecast header - title left, pills right */
[data-theme="carbon"] .forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

[data-theme="carbon"] .forecast-title-area h1 {
  margin: 0;
}

/* Pill row - aligned right with space for mic */
[data-theme="carbon"] .pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: 80px;
}

[data-theme="carbon"] .pill-row .pill {
  margin: 0;
}

/* Hero section */
[data-theme="carbon"] .hero h1 {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

/* Grid layout - expanded to fill more space */
[data-theme="carbon"] .grid {
  gap: 16px;
  margin-bottom: 20px;
}

/* Make the grid cards much bigger */
[data-theme="carbon"] .grid {
  grid-template-columns: 65% 34%;
}

[data-theme="carbon"] .grid .card {
  min-height: 450px;
}

/* Chart canvas bigger */
[data-theme="carbon"] #lineChart,
[data-theme="carbon"] #oaklandChart {
  height: 380px !important;
}

/* Chart.js axis labels white */
[data-theme="carbon"] .card canvas {
  filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.3));
}

/* Chart styling - white axes, glowing lines */
[data-theme="carbon"] .chart-container canvas {
  filter: drop-shadow(0 0 8px rgba(255, 100, 150, 0.3));
}

/* Voice summary card - simple styling */
[data-theme="carbon"] .voice-summary-card {
  margin-top: 20px !important;
  
  /* Same glass styling as other cards */
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 16px 20px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
}

/* Chart container card */
[data-theme="carbon"] .chart-container {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 20px;
  position: relative;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="carbon"] .chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="carbon"] .chart-container:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

/* Canvas/Chart styling */
[data-theme="carbon"] #lineChart,
[data-theme="carbon"] #oaklandChart {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Back button */
[data-theme="carbon"] .back-button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 10px 20px;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="carbon"] .back-button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateX(-4px);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

/* Oakland badge */
[data-theme="carbon"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(204, 152, 120, 0.5) 0%, 
    rgba(154, 133, 120, 0.5) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(204, 152, 120, 0.3);
  box-shadow: 0 0 20px rgba(204, 152, 120, 0.2);
}

/* Controls section styling */
[data-theme="carbon"] .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

/* Floating controls panel */
[data-theme="carbon"] .floating-controls {
  background: rgba(13, 13, 14, 0.9);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 60px var(--glow-purple);
  
  transition: var(--transition);
}

[data-theme="carbon"] .floating-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

[data-theme="carbon"] .floating-controls .controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="carbon"] .floating-controls .controls-header h4 {
  color: var(--text-primary);
  margin: 0;
  font-size: 14px;
}

/* Category display badges - same as Ready pill */
[data-theme="carbon"] #categoryDisplay,
[data-theme="carbon"] #patternDisplay,
[data-theme="carbon"] #cogsSubcategory {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: 20px !important;
  color: var(--text-primary) !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  display: inline-block;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

[data-theme="carbon"] #categoryDisplay {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border-card) !important;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

/* Oakland insights panel */
[data-theme="carbon"] #oaklandInsights {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
}

/* Category insights */
[data-theme="carbon"] #categoryInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
}

/* ===========================================
   THEME SWITCHER - Glassy billiard balls
   =========================================== */
[data-theme="carbon"] .theme-switcher {
  display: flex;
  gap: 6px;
}

[data-theme="carbon"] .theme-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 !important;
  margin: 0 2px !important;
  position: relative;
  overflow: hidden;
  
  /* Glassy billiard ball effect */
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Shine highlight on ball */
[data-theme="carbon"] .theme-btn::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 5px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

[data-theme="carbon"] .theme-btn:hover {
  transform: scale(1.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 12px var(--glow-color) !important;
}

[data-theme="carbon"] .theme-btn.active {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* ===========================================
   Lucy UI - LIQUID GLASS THEME VARIANTS
/* ===========================================
   Lucy UI - LUXE BLUE Glass Theme
   Based on Figma "Glassy White Glow Design"
   =========================================== */

/* ===========================================
   LUXE BLUE VARIABLES
   =========================================== */
[data-theme="midnight"] {
  /* Canvas */
  --bg-primary: #0f172a;
  
  /* Glass effects - from Figma */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-card: rgba(255, 255, 255, 0.04);
  --glass-bg-modal: rgba(255, 255, 255, 0.06);
  --glass-bg-button: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.12);
  
  /* Borders - subtle */
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-card: rgba(255, 255, 255, 0.12);
  --glass-border-modal: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-border-strong: rgba(255, 255, 255, 0.25);
  
  /* Glow colors - cyan/blue tint from Figma */
  --glow-color: rgba(100, 200, 255, 0.1);
  --glow-color-hover: rgba(100, 200, 255, 0.15);
  --glow-color-strong: rgba(100, 200, 255, 0.2);
  --glow-purple: rgba(150, 150, 255, 0.15);
  
  /* Accent - warm rose (Lucy brand) */
  --accent: #4A7A8A;
  --accent-glow: rgba(56, 189, 248, 0.5);
  
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.4);
  --text-hint: rgba(255, 255, 255, 0.3);
  --chart-line: #dfe6f0;

  /* Verification badges (BEACN merit badge) — dark canvas */
  --verify-felt: #1B1B1F;
  --verify-ok: #5DBE8A;
  --verify-calc: #6FA8DC;
  --verify-gold: #D4A843;
  --verify-unearned: #6f6d68;
  --verify-bad: #E0654E;


  /* Semantic colors for report components */
  --color-negative: #f87171;
  --color-positive: #34d399;
  --color-warning: #fbbf24;
  --surface-card: rgba(255, 255, 255, 0.03);
  --surface-elevated: rgba(15, 23, 42, 0.95);
  --text-on-surface: #e2e8f0;
  --text-on-surface-muted: #94a3b8;
  --text-on-surface-dim: #64748b;

  /* Shadows - from Figma */
  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --shadow-modal: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
  --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-button-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
  
  /* Inset highlights */
  --inset-light: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
  --inset-light-subtle: inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
  --inset-light-card: inset 0 1px 2px 0 rgba(255, 255, 255, 0.08);
  --inset-input: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 30px;
  
  /* Blur */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(30px);
  
  /* Transitions - spring physics */
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Severity — critical (red) */
  --sev-crit: #f87171;
  --sev-crit-soft: #fca5a5;
  --sev-crit-bg: rgba(239, 68, 68, 0.08);
  --sev-crit-bg-subtle: rgba(239, 68, 68, 0.04);
  --sev-crit-border: rgba(239, 68, 68, 0.2);
  --sev-crit-border-hover: rgba(239, 68, 68, 0.35);
  --sev-crit-glow: rgba(239, 68, 68, 0.1);
  --sev-crit-badge-bg: rgba(239, 68, 68, 0.15);

  /* Severity — warning (amber) */
  --sev-warn: #fbbf24;
  --sev-warn-soft: #fcd34d;
  --sev-warn-bg: rgba(245, 158, 11, 0.07);
  --sev-warn-bg-subtle: rgba(245, 158, 11, 0.03);
  --sev-warn-border: rgba(245, 158, 11, 0.18);
  --sev-warn-border-hover: rgba(245, 158, 11, 0.3);
  --sev-warn-glow: rgba(245, 158, 11, 0.08);
  --sev-warn-badge-bg: rgba(245, 158, 11, 0.12);

  /* Severity — healthy (green) */
  --sev-good: #34d399;
  --sev-good-soft: #6ee7b7;
  --sev-good-bg: rgba(16, 185, 129, 0.07);
  --sev-good-bg-subtle: rgba(16, 185, 129, 0.02);
  --sev-good-border: rgba(16, 185, 129, 0.18);
  --sev-good-border-hover: rgba(16, 185, 129, 0.3);
  --sev-good-glow: rgba(16, 185, 129, 0.08);
  --sev-good-badge-bg: rgba(16, 185, 129, 0.1);

  /* Severity — info (indigo) */
  --sev-info: #a5b4fc;
  --sev-info-soft: #c4b5fd;
  --sev-info-bg: rgba(99, 102, 241, 0.08);
  --sev-info-bg-subtle: rgba(99, 102, 241, 0.03);
  --sev-info-border: rgba(99, 102, 241, 0.18);
  --sev-info-badge-bg: rgba(99, 102, 241, 0.12);

  /* Narrative tags */
  --narr-finding-bg: rgba(52, 211, 153, 0.15);
  --narr-finding-color: #34d399;
  --narr-contra-bg: rgba(248, 113, 113, 0.12);
  --narr-contra-color: #fca5a5;
  --narr-risk-bg: rgba(251, 191, 36, 0.12);
  --narr-risk-color: #fcd34d;
  --narr-action-bg: rgba(129, 140, 248, 0.12);
  --narr-action-color: #c4b5fd;
}

/* ===========================================
   ANIMATED GRADIENT BLOBS (Background)
   =========================================== */
[data-theme="midnight"] body {
  background: #0f172a;
  position: relative;
  overflow-x: hidden;
}

[data-theme="midnight"] body::before,
[data-theme="midnight"] body::after,
[data-theme="midnight"] .main-wrapper::before {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.2;
  animation: float 25s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

[data-theme="midnight"] body::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.6) 0%, rgba(59, 130, 246, 0.3) 40%, transparent 70%);
  top: 5%;
  left: 15%;
  animation-delay: 0s;
}

[data-theme="midnight"] body::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.5) 0%, rgba(139, 92, 246, 0.25) 40%, transparent 70%);
  top: 35%;
  right: 10%;
  animation-delay: -7s;
}

[data-theme="midnight"] .main-wrapper::before {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.4) 0%, rgba(236, 72, 153, 0.2) 40%, transparent 70%);
  bottom: 5%;
  left: 35%;
  animation-delay: -12s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 30px) scale(0.9);
  }
}

/* ===========================================
   GLASS PANEL (Sidebar)
   =========================================== */
[data-theme="midnight"] .butterfly-sidebar {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-left: none;
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
  margin: 0;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 40px var(--glow-color);
  
  /* Flex column layout - align with forecast content */
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 60px;
  padding-bottom: 30px;
}

/* Sidebar header - butterfly and Lucy tight, centered */
[data-theme="midnight"] .butterfly-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  flex-shrink: 0;
}

[data-theme="midnight"] .butterfly-sidebar .mini-butterfly {
  margin: 0;
}

[data-theme="midnight"] .butterfly-sidebar #sidebarStatus {
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

[data-theme="midnight"] .butterfly-sidebar #sidebarStatus:hover {
  color: var(--accent);
  text-shadow: 0 0 15px var(--glow-color);
}

/* Chat output box - matches graph height */
[data-theme="midnight"] .butterfly-sidebar .mini-chat {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  /* Match graph card height */
  height: 450px;
  min-height: 450px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  
  /* Animation */
  transition: var(--transition);
}

[data-theme="midnight"] .butterfly-sidebar .mini-chat:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

/* Chat input area - matches voice summary height */
[data-theme="midnight"] .butterfly-sidebar .chat-input-area {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 20px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="midnight"] .butterfly-sidebar .chat-input-area:focus-within {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

[data-theme="midnight"] .butterfly-sidebar .chat-input-area input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 100%;
  padding: 8px 0;
}

[data-theme="midnight"] .butterfly-sidebar .chat-input-area input:focus {
  outline: none;
}

[data-theme="midnight"] .butterfly-sidebar .chat-input-area button {
  width: 100%;
  margin-top: 8px;
  transition: var(--transition);
}

[data-theme="midnight"] .butterfly-sidebar .chat-input-area button:hover {
  transform: translateY(-2px);
}

/* Hide back button on forecast page */
[data-theme="midnight"] .back-button {
  display: none !important;
}

/* ===========================================
   GLASS CARDS
   =========================================== */
[data-theme="midnight"] .card,
[data-theme="midnight"] .voice-summary-card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Top edge highlight - from Figma */
[data-theme="midnight"] .card::before,
[data-theme="midnight"] .voice-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="midnight"] .card:hover,
[data-theme="midnight"] .voice-summary-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-8px) scale(1.02);
  
  box-shadow: 
    0 20px 50px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.15),
    0 0 80px var(--glow-color-hover);
}

/* ===========================================
   CONVERSATION - Glass Card
   =========================================== */
[data-theme="midnight"] .conversation {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow-y: auto;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="midnight"] .conversation:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  
  box-shadow: 
    0 15px 40px 0 rgba(0, 0, 0, 0.35),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

[data-theme="midnight"] .conversation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
  z-index: 1;
}

/* ===========================================
   GLASS MODAL (Floating Controls)
   =========================================== */
[data-theme="midnight"] .floating-controls {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-xl);
  padding: 20px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 80px var(--glow-purple);
}

/* ===========================================
   GLASS INPUT
   =========================================== */
[data-theme="midnight"] input[type="text"],
[data-theme="midnight"] input[type="number"],
[data-theme="midnight"] select {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text-primary);
  font-size: 14px;
  
  box-shadow: 
    var(--inset-input),
    0 0 30px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="midnight"] input::placeholder {
  color: var(--text-muted);
}

[data-theme="midnight"] input:focus,
[data-theme="midnight"] select:focus {
  outline: none;
  border-color: rgba(100, 200, 255, 0.3);
  
  box-shadow: 
    var(--inset-input),
    0 0 40px var(--glow-color-hover);
}

[data-theme="midnight"] select option {
  background: #0f172a;
  color: var(--text-primary);
}

/* ===========================================
   GLASS BUTTONS - Glowy outline, no color fill
   =========================================== */
[data-theme="midnight"] button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
  
  transition: var(--transition);
}

[data-theme="midnight"] button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 25px var(--glow-color-hover);
}

[data-theme="midnight"] button:active {
  transform: translateY(0);
}

[data-theme="midnight"] button.ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 
    var(--inset-light-subtle),
    0 0 10px var(--glow-color);
}

[data-theme="midnight"] button.ghost:hover {
  background: var(--glass-bg-card);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="midnight"] button.primary {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="midnight"] button.primary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="midnight"] button.success {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="midnight"] button.success:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

/* ===========================================
   GLASS ICON BUTTONS (Mic, Close, etc.)
   =========================================== */
[data-theme="midnight"] .voice-mic {
  width: 42px;
  height: 42px;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="midnight"] .voice-mic svg {
  width: 18px;
  height: 18px;
}

[data-theme="midnight"] .voice-mic:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-hover);
  color: white;
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="midnight"] .voice-mic.active {
  background: rgba(204, 152, 120, 0.1);
  border-color: var(--glass-border-hover);
  color: var(--accent);
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light),
    0 0 25px rgba(204, 152, 120, 0.2);
  
  animation: mic-pulse 2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 25px rgba(204, 152, 120, 0.2);
  }
  50% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 35px rgba(204, 152, 120, 0.3);
  }
}

[data-theme="midnight"] .close-controls,
[data-theme="midnight"] .anchor-controls {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  
  box-shadow: 
    var(--inset-light-subtle),
    0 0 20px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="midnight"] .close-controls:hover,
[data-theme="midnight"] .anchor-controls:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
  
  box-shadow: 
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="midnight"] .anchor-controls.anchored {
  background: rgba(204, 152, 120, 0.2);
  border-color: var(--accent);
  color: var(--accent);
  
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   BUTTERFLY - Glass outline, no fill, more glow
   =========================================== */
[data-theme="midnight"] .butterfly,
[data-theme="midnight"] .mini-butterfly {
  filter: 
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 20px var(--glow-color))
    drop-shadow(0 0 40px var(--glow-color));
  transition: filter 0.3s ease;
}

[data-theme="midnight"] .butterfly:hover,
[data-theme="midnight"] .mini-butterfly:hover {
  filter: 
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 30px var(--glow-color-hover))
    drop-shadow(0 0 60px var(--glow-color-hover));
}

[data-theme="midnight"] .butterfly.active,
[data-theme="midnight"] .mini-butterfly.active {
  filter: 
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 35px rgba(204, 152, 120, 0.5))
    drop-shadow(0 0 70px rgba(204, 152, 120, 0.4));
  animation: butterfly-glow 2s ease-in-out infinite;
}

@keyframes butterfly-glow {
  0%, 100% {
    filter: 
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 35px rgba(204, 152, 120, 0.5))
      drop-shadow(0 0 70px rgba(204, 152, 120, 0.4));
  }
  50% {
    filter: 
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 50px rgba(204, 152, 120, 0.6))
      drop-shadow(0 0 100px rgba(204, 152, 120, 0.5));
  }
}

/* Butterfly wings - no fill, just outline matching glass border */
[data-theme="midnight"] .left-wing path,
[data-theme="midnight"] .right-wing path {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}

/* ===========================================
   MESSAGES - No individual tiles, inherit from container
   =========================================== */
[data-theme="midnight"] .message.assistant,
[data-theme="midnight"] .message.user {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 16px;
  margin: 4px 0;
  color: var(--text-primary);
}

[data-theme="midnight"] .message.assistant {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}

[data-theme="midnight"] .message.user {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  padding-left: 16px;
}

/* ===========================================
   HEADER
   =========================================== */
[data-theme="midnight"] .header h1 {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

[data-theme="midnight"] .status {
  color: var(--text-secondary);
}

/* ===========================================
   TABLE
   =========================================== */
[data-theme="midnight"] .table th,
[data-theme="midnight"] .table td {
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 8px;
  color: var(--text-primary);
}

[data-theme="midnight"] .table th {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   PILLS & BADGES
   =========================================== */
[data-theme="midnight"] .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: 20px;
  color: var(--text-primary);
  padding: 4px 14px;
  font-size: 11px;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

[data-theme="midnight"] #categoryDisplay,
[data-theme="midnight"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(204, 152, 120, 0.6) 0%, 
    rgba(154, 133, 120, 0.6) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(204, 152, 120, 0.4);
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   TOAST
   =========================================== */
[data-theme="midnight"] #toast {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-lg);
  
  box-shadow: 
    var(--shadow-modal),
    0 0 40px var(--glow-color);
  
  color: var(--text-primary);
}

/* ===========================================
   BACK BUTTON
   =========================================== */
[data-theme="midnight"] .back-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border-card);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

[data-theme="midnight"] .back-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  box-shadow: none;
}

/* ===========================================
   HERO SECTION
   =========================================== */
[data-theme="midnight"] .hero h1 {
  color: var(--text-primary);
}

[data-theme="midnight"] .hero .status .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  color: var(--text-primary);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

/* ===========================================
   CHART CANVAS
   =========================================== */
[data-theme="midnight"] canvas {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ===========================================
   VOICE SUMMARY
   =========================================== */
[data-theme="midnight"] .voice-summary-card h3 {
  color: var(--text-primary);
}

[data-theme="midnight"] #voiceOut {
  color: var(--text-primary);
}

[data-theme="midnight"] #oaklandInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

/* ===========================================
   THINKING ANIMATION
   =========================================== */
[data-theme="midnight"] .thinking {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

[data-theme="midnight"] .thinking .timestamp {
  color: var(--text-muted);
}

[data-theme="midnight"] .thinking .dots span {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* ===========================================
   SCROLLBAR
   =========================================== */
[data-theme="midnight"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme="midnight"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

[data-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ===========================================
   LABELS
   =========================================== */
[data-theme="midnight"] label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   SPARKLE DECORATION - Behind butterfly
   =========================================== */
[data-theme="midnight"] .butterfly-container {
  position: relative;
}

[data-theme="midnight"] .butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(100, 200, 255, 0.3) 30%, transparent 70%);
  filter: blur(8px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

[data-theme="midnight"] .mini-butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(100, 200, 255, 0.2) 30%, transparent 70%);
  filter: blur(6px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

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

/* ===========================================
   INPUT AREA - Same width as conversation
   =========================================== */
[data-theme="midnight"] .input-container {
  padding: 0;
  margin: 20px 0;
  width: 100%;
}

[data-theme="midnight"] .input-area {
  display: flex;
  gap: 10px;
  width: 100%;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 12px 16px;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  transition: var(--transition);
}

/* Input area moves when focused */
[data-theme="midnight"] .input-area:focus-within {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--glass-border-hover);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
}

[data-theme="midnight"] .input-area input {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 12px;
}

[data-theme="midnight"] .input-area input:focus {
  box-shadow: none;
  border: none;
}

[data-theme="midnight"] .input-area button {
  padding: 10px 24px;
}

[data-theme="midnight"] .voice-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
}

[data-theme="midnight"] .voice-interface .input-container,
[data-theme="midnight"] .voice-interface .conversation {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================
   FORECAST PAGE - Glass styling
   =========================================== */

/* Forecast panel background */
[data-theme="midnight"] .forecast-panel {
  background: transparent;
}

/* Forecast dashboard */
[data-theme="midnight"] .forecast-dashboard {
  position: relative;
}

/* Forecast dashboard padding */
[data-theme="midnight"] .forecast-dashboard {
  padding-left: 10%;
  padding-right: 10%;
}

/* Forecast header - title left, pills right */
[data-theme="midnight"] .forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

[data-theme="midnight"] .forecast-title-area h1 {
  margin: 0;
}

/* Pill row - aligned right with space for mic */
[data-theme="midnight"] .pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: 80px;
}

[data-theme="midnight"] .pill-row .pill {
  margin: 0;
}

/* Hero section */
[data-theme="midnight"] .hero h1 {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

/* Grid layout - expanded to fill more space */
[data-theme="midnight"] .grid {
  gap: 16px;
  margin-bottom: 20px;
}

/* Make the grid cards much bigger */
[data-theme="midnight"] .grid {
  grid-template-columns: 65% 34%;
}

[data-theme="midnight"] .grid .card {
  min-height: 450px;
}

/* Chart canvas bigger */
[data-theme="midnight"] #lineChart,
[data-theme="midnight"] #oaklandChart {
  height: 380px !important;
}

/* Chart.js axis labels white */
[data-theme="midnight"] .card canvas {
  filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.3));
}

/* Chart styling - white axes, glowing lines */
[data-theme="midnight"] .chart-container canvas {
  filter: drop-shadow(0 0 8px rgba(255, 100, 150, 0.3));
}

/* Voice summary card - simple styling */
[data-theme="midnight"] .voice-summary-card {
  margin-top: 20px !important;
  
  /* Same glass styling as other cards */
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 16px 20px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
}

/* Chart container card */
[data-theme="midnight"] .chart-container {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 20px;
  position: relative;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="midnight"] .chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="midnight"] .chart-container:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

/* Canvas/Chart styling */
[data-theme="midnight"] #lineChart,
[data-theme="midnight"] #oaklandChart {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Back button */
[data-theme="midnight"] .back-button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 10px 20px;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="midnight"] .back-button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateX(-4px);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

/* Oakland badge */
[data-theme="midnight"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(204, 152, 120, 0.5) 0%, 
    rgba(154, 133, 120, 0.5) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(204, 152, 120, 0.3);
  box-shadow: 0 0 20px rgba(204, 152, 120, 0.2);
}

/* Controls section styling */
[data-theme="midnight"] .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

/* Floating controls panel */
[data-theme="midnight"] .floating-controls {
  background: rgba(13, 13, 14, 0.9);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 60px var(--glow-purple);
  
  transition: var(--transition);
}

[data-theme="midnight"] .floating-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

[data-theme="midnight"] .floating-controls .controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="midnight"] .floating-controls .controls-header h4 {
  color: var(--text-primary);
  margin: 0;
  font-size: 14px;
}

/* Category display badges - same as Ready pill */
[data-theme="midnight"] #categoryDisplay,
[data-theme="midnight"] #patternDisplay,
[data-theme="midnight"] #cogsSubcategory {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: 20px !important;
  color: var(--text-primary) !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  display: inline-block;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

[data-theme="midnight"] #categoryDisplay {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border-card) !important;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

/* Oakland insights panel */
[data-theme="midnight"] #oaklandInsights {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
}

/* Category insights */
[data-theme="midnight"] #categoryInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
}

/* ===========================================
   THEME SWITCHER - Glassy billiard balls
   =========================================== */
[data-theme="midnight"] .theme-switcher {
  display: flex;
  gap: 6px;
}

[data-theme="midnight"] .theme-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 !important;
  margin: 0 2px !important;
  position: relative;
  overflow: hidden;
  
  /* Glassy billiard ball effect */
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Shine highlight on ball */
[data-theme="midnight"] .theme-btn::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 5px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

[data-theme="midnight"] .theme-btn:hover {
  transform: scale(1.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 12px var(--glow-color) !important;
}

[data-theme="midnight"] .theme-btn.active {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* ===========================================
   Lucy UI - LIQUID GLASS THEME VARIANTS
/* ===========================================
   Lucy UI - LUXE WHITE Glass Theme
   Light theme cloned from Luxe Dark
   =========================================== */

/* ===========================================
   LUXE WHITE VARIABLES
   =========================================== */
[data-theme="studio"] {
  /* Canvas - light background */
  --bg-primary: #f0f4f8;
  
  /* Glass effects - lighter for light bg */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-card: rgba(255, 255, 255, 0.7);
  --glass-bg-modal: rgba(255, 255, 255, 0.8);
  --glass-bg-button: rgba(255, 255, 255, 0.85);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  
  /* Borders - darker for contrast on light bg */
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-card: rgba(0, 0, 0, 0.1);
  --glass-border-modal: rgba(0, 0, 0, 0.12);
  --glass-border-hover: rgba(0, 0, 0, 0.18);
  --glass-border-strong: rgba(0, 0, 0, 0.25);
  
  /* Glow colors - soft blue/purple */
  --glow-color: rgba(100, 150, 200, 0.15);
  --glow-color-hover: rgba(100, 150, 200, 0.25);
  --glow-color-strong: rgba(100, 150, 200, 0.35);
  --glow-purple: rgba(150, 130, 200, 0.2);
  
  /* Accent - warm rose (Lucy brand) */
  --accent: #7A553B;
  --accent-glow: rgba(154, 133, 120, 0.4);
  
  /* Text - dark for light bg */
  --text-primary: #1a1d24;
  --text-secondary: rgba(26, 29, 36, 0.7);
  --text-muted: rgba(26, 29, 36, 0.5);
  --text-hint: rgba(26, 29, 36, 0.4);
  --chart-line: #2b3440;

  /* Verification badges (BEACN merit badge) — light canvas */
  --verify-felt: #ffffff;
  --verify-ok: #3f8b5a;
  --verify-calc: #4f6bd9;
  --verify-gold: #b8862b;
  --verify-unearned: #9a978f;
  --verify-bad: #c4554f;


  /* Semantic colors for report components */
  --color-negative: #dc2626;
  --color-positive: #16a34a;
  --color-warning: #d97706;
  --surface-card: rgba(0, 0, 0, 0.03);
  --surface-elevated: rgba(240, 244, 248, 0.95);
  --text-on-surface: #1e293b;
  --text-on-surface-muted: #475569;
  --text-on-surface-dim: #94a3b8;

  /* Shadows - softer for light theme */
  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 12px 40px 0 rgba(0, 0, 0, 0.12);
  --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-button-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  
  /* Inset highlights - subtle on light */
  --inset-light: inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
  --inset-light-subtle: inset 0 1px 1px 0 rgba(255, 255, 255, 0.7);
  --inset-light-card: inset 0 1px 2px 0 rgba(255, 255, 255, 0.8);
  --inset-input: inset 0 2px 8px rgba(0, 0, 0, 0.04);
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 30px;
  
  /* Blur */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(30px);
  
  /* Transitions - spring physics */
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Severity — critical (red, darkened for light bg) */
  --sev-crit: #dc2626;
  --sev-crit-soft: #ef4444;
  --sev-crit-bg: rgba(239, 68, 68, 0.08);
  --sev-crit-bg-subtle: rgba(239, 68, 68, 0.04);
  --sev-crit-border: rgba(239, 68, 68, 0.25);
  --sev-crit-border-hover: rgba(239, 68, 68, 0.4);
  --sev-crit-glow: rgba(239, 68, 68, 0.12);
  --sev-crit-badge-bg: rgba(239, 68, 68, 0.1);

  /* Severity — warning (amber, darkened for light bg) */
  --sev-warn: #d97706;
  --sev-warn-soft: #f59e0b;
  --sev-warn-bg: rgba(245, 158, 11, 0.08);
  --sev-warn-bg-subtle: rgba(245, 158, 11, 0.04);
  --sev-warn-border: rgba(245, 158, 11, 0.25);
  --sev-warn-border-hover: rgba(245, 158, 11, 0.4);
  --sev-warn-glow: rgba(245, 158, 11, 0.1);
  --sev-warn-badge-bg: rgba(245, 158, 11, 0.1);

  /* Severity — healthy (green, darkened for light bg) */
  --sev-good: #059669;
  --sev-good-soft: #10b981;
  --sev-good-bg: rgba(16, 185, 129, 0.08);
  --sev-good-bg-subtle: rgba(16, 185, 129, 0.03);
  --sev-good-border: rgba(16, 185, 129, 0.25);
  --sev-good-border-hover: rgba(16, 185, 129, 0.4);
  --sev-good-glow: rgba(16, 185, 129, 0.1);
  --sev-good-badge-bg: rgba(16, 185, 129, 0.08);

  /* Severity — info (indigo, darkened for light bg) */
  --sev-info: #6366f1;
  --sev-info-soft: #818cf8;
  --sev-info-bg: rgba(99, 102, 241, 0.08);
  --sev-info-bg-subtle: rgba(99, 102, 241, 0.04);
  --sev-info-border: rgba(99, 102, 241, 0.25);
  --sev-info-badge-bg: rgba(99, 102, 241, 0.08);

  /* Narrative tags */
  --narr-finding-bg: rgba(5, 150, 105, 0.12);
  --narr-finding-color: #059669;
  --narr-contra-bg: rgba(220, 38, 38, 0.1);
  --narr-contra-color: #dc2626;
  --narr-risk-bg: rgba(217, 119, 6, 0.1);
  --narr-risk-color: #d97706;
  --narr-action-bg: rgba(99, 102, 241, 0.1);
  --narr-action-color: #6366f1;
}

/* ===========================================
   ANIMATED GRADIENT BLOBS (Background)
   =========================================== */
[data-theme="studio"] body {
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 50%, #f5f7fa 100%);
  position: relative;
  overflow-x: hidden;
}

[data-theme="studio"] body::before,
[data-theme="studio"] body::after,
[data-theme="studio"] .main-wrapper::before {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.5;
  animation: float 25s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

[data-theme="studio"] body::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.4) 0%, rgba(96, 165, 250, 0.2) 40%, transparent 70%);
  top: 5%;
  left: 15%;
  animation-delay: 0s;
}

[data-theme="studio"] body::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(196, 181, 253, 0.35) 0%, rgba(167, 139, 250, 0.15) 40%, transparent 70%);
  top: 35%;
  right: 10%;
  animation-delay: -7s;
}

[data-theme="studio"] .main-wrapper::before {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(251, 207, 232, 0.4) 0%, rgba(244, 114, 182, 0.15) 40%, transparent 70%);
  bottom: 5%;
  left: 35%;
  animation-delay: -12s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 30px) scale(0.9);
  }
}

/* ===========================================
   GLASS PANEL (Sidebar)
   =========================================== */
[data-theme="studio"] .butterfly-sidebar {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-left: none;
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
  margin: 0;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 40px var(--glow-color);
  
  /* Flex column layout - align with forecast content */
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 60px;
  padding-bottom: 30px;
}

/* Sidebar header - butterfly and Lucy tight, centered */
[data-theme="studio"] .butterfly-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  flex-shrink: 0;
}

[data-theme="studio"] .butterfly-sidebar .mini-butterfly {
  margin: 0;
}

[data-theme="studio"] .butterfly-sidebar #sidebarStatus {
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

[data-theme="studio"] .butterfly-sidebar #sidebarStatus:hover {
  color: var(--accent);
  text-shadow: 0 0 15px var(--glow-color);
}

/* Chat output box - matches graph height */
[data-theme="studio"] .butterfly-sidebar .mini-chat {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  /* Match graph card height */
  height: 450px;
  min-height: 450px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  
  /* Animation */
  transition: var(--transition);
}

[data-theme="studio"] .butterfly-sidebar .mini-chat:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

/* Chat input area - matches voice summary height */
[data-theme="studio"] .butterfly-sidebar .chat-input-area {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 20px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="studio"] .butterfly-sidebar .chat-input-area:focus-within {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

[data-theme="studio"] .butterfly-sidebar .chat-input-area input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 100%;
  padding: 8px 0;
}

[data-theme="studio"] .butterfly-sidebar .chat-input-area input:focus {
  outline: none;
}

[data-theme="studio"] .butterfly-sidebar .chat-input-area button {
  width: 100%;
  margin-top: 8px;
  transition: var(--transition);
}

[data-theme="studio"] .butterfly-sidebar .chat-input-area button:hover {
  transform: translateY(-2px);
}

/* Hide back button on forecast page */
[data-theme="studio"] .back-button {
  display: none !important;
}

/* ===========================================
   GLASS CARDS
   =========================================== */
[data-theme="studio"] .card,
[data-theme="studio"] .voice-summary-card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Top edge highlight - from Figma */
[data-theme="studio"] .card::before,
[data-theme="studio"] .voice-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="studio"] .card:hover,
[data-theme="studio"] .voice-summary-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-8px) scale(1.02);
  
  box-shadow: 
    0 20px 50px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.15),
    0 0 80px var(--glow-color-hover);
}

/* ===========================================
   CONVERSATION - Glass Card
   =========================================== */
[data-theme="studio"] .conversation {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow-y: auto;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="studio"] .conversation:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  
  box-shadow: 
    0 15px 40px 0 rgba(0, 0, 0, 0.35),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

[data-theme="studio"] .conversation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
  z-index: 1;
}

/* ===========================================
   GLASS MODAL (Floating Controls)
   =========================================== */
[data-theme="studio"] .floating-controls {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-xl);
  padding: 20px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 80px var(--glow-purple);
}

/* ===========================================
   GLASS INPUT
   =========================================== */
[data-theme="studio"] input[type="text"],
[data-theme="studio"] input[type="number"],
[data-theme="studio"] select {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text-primary);
  font-size: 14px;
  
  box-shadow: 
    var(--inset-input),
    0 0 30px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="studio"] input::placeholder {
  color: var(--text-muted);
}

[data-theme="studio"] input:focus,
[data-theme="studio"] select:focus {
  outline: none;
  border-color: rgba(100, 200, 255, 0.3);
  
  box-shadow: 
    var(--inset-input),
    0 0 40px var(--glow-color-hover);
}

[data-theme="studio"] select option {
  background: #1a1d24;
  color: var(--text-primary);
}

/* ===========================================
   GLASS BUTTONS - Glowy outline, no color fill
   =========================================== */
[data-theme="studio"] button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
  
  transition: var(--transition);
}

[data-theme="studio"] button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 25px var(--glow-color-hover);
}

[data-theme="studio"] button:active {
  transform: translateY(0);
}

[data-theme="studio"] button.ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 
    var(--inset-light-subtle),
    0 0 10px var(--glow-color);
}

[data-theme="studio"] button.ghost:hover {
  background: var(--glass-bg-card);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="studio"] button.primary {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="studio"] button.primary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="studio"] button.success {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="studio"] button.success:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

/* ===========================================
   GLASS ICON BUTTONS (Mic, Close, etc.)
   =========================================== */
[data-theme="studio"] .voice-mic {
  width: 42px;
  height: 42px;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="studio"] .voice-mic svg {
  width: 18px;
  height: 18px;
  color: #1a1d24;
  stroke: #1a1d24;
}

[data-theme="studio"] .voice-mic:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--glass-border-hover);
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="studio"] .voice-mic.active {
  background: rgba(154, 133, 120, 0.15);
  border-color: var(--glass-border-hover);
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light),
    0 0 25px rgba(154, 133, 120, 0.25);
  
  animation: mic-pulse 2s ease-in-out infinite;
}

[data-theme="studio"] .voice-mic.active svg {
  color: var(--accent);
  stroke: var(--accent);
}

@keyframes mic-pulse {
  0%, 100% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 25px rgba(204, 152, 120, 0.2);
  }
  50% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 35px rgba(204, 152, 120, 0.3);
  }
}

[data-theme="studio"] .close-controls,
[data-theme="studio"] .anchor-controls {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  
  box-shadow: 
    var(--inset-light-subtle),
    0 0 20px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="studio"] .close-controls:hover,
[data-theme="studio"] .anchor-controls:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
  
  box-shadow: 
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="studio"] .anchor-controls.anchored {
  background: rgba(204, 152, 120, 0.2);
  border-color: var(--accent);
  color: var(--accent);
  
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   BUTTERFLY - Glass outline, no fill, more glow
   =========================================== */
[data-theme="studio"] .butterfly,
[data-theme="studio"] .mini-butterfly {
  filter: 
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 20px var(--glow-color))
    drop-shadow(0 0 40px var(--glow-color));
  transition: filter 0.3s ease;
}

[data-theme="studio"] .butterfly:hover,
[data-theme="studio"] .mini-butterfly:hover {
  filter: 
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 30px var(--glow-color-hover))
    drop-shadow(0 0 60px var(--glow-color-hover));
}

[data-theme="studio"] .butterfly.active,
[data-theme="studio"] .mini-butterfly.active {
  filter: 
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 35px rgba(204, 152, 120, 0.5))
    drop-shadow(0 0 70px rgba(204, 152, 120, 0.4));
  animation: butterfly-glow 2s ease-in-out infinite;
}

@keyframes butterfly-glow {
  0%, 100% {
    filter: 
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 35px rgba(204, 152, 120, 0.5))
      drop-shadow(0 0 70px rgba(204, 152, 120, 0.4));
  }
  50% {
    filter: 
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 50px rgba(204, 152, 120, 0.6))
      drop-shadow(0 0 100px rgba(204, 152, 120, 0.5));
  }
}

/* Butterfly wings - dark stroke for light theme */
[data-theme="studio"] .left-wing path,
[data-theme="studio"] .right-wing path {
  fill: transparent;
  stroke: rgba(26, 29, 36, 0.6);
  stroke-width: 1.5;
}

[data-theme="studio"] .butterfly svg,
[data-theme="studio"] .mini-butterfly svg {
  filter: none;
}

[data-theme="studio"] .butterfly,
[data-theme="studio"] .mini-butterfly {
  filter: 
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.1))
    drop-shadow(0 0 20px rgba(100, 150, 200, 0.15));
}

/* ===========================================
   MESSAGES - No individual tiles, inherit from container
   =========================================== */
[data-theme="studio"] .message.assistant,
[data-theme="studio"] .message.user {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 16px;
  margin: 4px 0;
  color: var(--text-primary);
}

[data-theme="studio"] .message.assistant {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}

[data-theme="studio"] .message.user {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  padding-left: 16px;
}

/* ===========================================
   HEADER
   =========================================== */
[data-theme="studio"] .header h1 {
  background: linear-gradient(135deg, 
    #1a1d24 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}

[data-theme="studio"] .status {
  color: var(--text-secondary);
}

/* ===========================================
   TABLE
   =========================================== */
[data-theme="studio"] .table th,
[data-theme="studio"] .table td {
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 8px;
  color: var(--text-primary);
}

[data-theme="studio"] .table th {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   PILLS & BADGES
   =========================================== */
[data-theme="studio"] .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: 20px;
  color: var(--text-primary);
  padding: 4px 14px;
  font-size: 11px;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

[data-theme="studio"] #categoryDisplay,
[data-theme="studio"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(204, 152, 120, 0.6) 0%, 
    rgba(154, 133, 120, 0.6) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(204, 152, 120, 0.4);
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   TOAST
   =========================================== */
[data-theme="studio"] #toast {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-lg);
  
  box-shadow: 
    var(--shadow-modal),
    0 0 40px var(--glow-color);
  
  color: var(--text-primary);
}

/* ===========================================
   BACK BUTTON
   =========================================== */
[data-theme="studio"] .back-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border-card);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

[data-theme="studio"] .back-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  box-shadow: none;
}

/* ===========================================
   HERO SECTION
   =========================================== */
[data-theme="studio"] .hero h1 {
  color: var(--text-primary);
}

[data-theme="studio"] .hero .status .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  color: var(--text-primary);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

/* ===========================================
   CHART CANVAS
   =========================================== */
[data-theme="studio"] canvas {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ===========================================
   VOICE SUMMARY
   =========================================== */
[data-theme="studio"] .voice-summary-card h3 {
  color: var(--text-primary);
}

[data-theme="studio"] #voiceOut {
  color: var(--text-primary);
}

[data-theme="studio"] #oaklandInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

/* ===========================================
   THINKING ANIMATION
   =========================================== */
[data-theme="studio"] .thinking {
  background: rgba(26, 29, 36, 0.08);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid rgba(26, 29, 36, 0.12);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  
  box-shadow: 0 0 30px rgba(26, 29, 36, 0.08);
}

[data-theme="studio"] .thinking .timestamp {
  color: var(--text-muted);
}

[data-theme="studio"] .thinking .dots span {
  background: rgba(26, 29, 36, 0.6);
  box-shadow: 0 0 10px rgba(26, 29, 36, 0.3);
}

/* ===========================================
   SCROLLBAR
   =========================================== */
[data-theme="studio"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme="studio"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

[data-theme="studio"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

[data-theme="studio"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ===========================================
   LABELS
   =========================================== */
[data-theme="studio"] label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   SPARKLE DECORATION - Behind butterfly
   =========================================== */
[data-theme="studio"] .butterfly-container {
  position: relative;
}

[data-theme="studio"] .butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(26, 29, 36, 0.25) 0%, rgba(26, 29, 36, 0.1) 30%, transparent 70%);
  filter: blur(8px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

[data-theme="studio"] .mini-butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(26, 29, 36, 0.2) 0%, rgba(26, 29, 36, 0.08) 30%, transparent 70%);
  filter: blur(6px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

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

/* ===========================================
   INPUT AREA - Same width as conversation
   =========================================== */
[data-theme="studio"] .input-container {
  padding: 0;
  margin: 20px 0;
  width: 100%;
}

[data-theme="studio"] .input-area {
  display: flex;
  gap: 10px;
  width: 100%;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 12px 16px;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  transition: var(--transition);
}

/* Input area moves when focused */
[data-theme="studio"] .input-area:focus-within {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--glass-border-hover);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
}

[data-theme="studio"] .input-area input {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 12px;
}

[data-theme="studio"] .input-area input:focus {
  box-shadow: none;
  border: none;
}

[data-theme="studio"] .input-area button {
  padding: 10px 24px;
}

[data-theme="studio"] .voice-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
}

[data-theme="studio"] .voice-interface .input-container,
[data-theme="studio"] .voice-interface .conversation {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================
   FORECAST PAGE - Glass styling
   =========================================== */

/* Forecast panel background */
[data-theme="studio"] .forecast-panel {
  background: transparent;
}

/* Forecast dashboard */
[data-theme="studio"] .forecast-dashboard {
  position: relative;
}

/* Forecast dashboard padding */
[data-theme="studio"] .forecast-dashboard {
  padding-left: 10%;
  padding-right: 10%;
}

/* Forecast header - title left, pills right */
[data-theme="studio"] .forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

[data-theme="studio"] .forecast-title-area h1 {
  margin: 0;
}

/* Pill row - aligned right with space for mic */
[data-theme="studio"] .pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: 80px;
}

[data-theme="studio"] .pill-row .pill {
  margin: 0;
}

/* Hero section */
[data-theme="studio"] .hero h1 {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

/* Grid layout - expanded to fill more space */
[data-theme="studio"] .grid {
  gap: 16px;
  margin-bottom: 20px;
}

/* Make the grid cards much bigger */
[data-theme="studio"] .grid {
  grid-template-columns: 65% 34%;
}

[data-theme="studio"] .grid .card {
  min-height: 450px;
}

/* Chart canvas bigger */
[data-theme="studio"] #lineChart,
[data-theme="studio"] #oaklandChart {
  height: 380px !important;
}

/* Chart.js axis labels white */
[data-theme="studio"] .card canvas {
  filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.3));
}

/* Chart styling - white axes, glowing lines */
[data-theme="studio"] .chart-container canvas {
  filter: drop-shadow(0 0 8px rgba(255, 100, 150, 0.3));
}

/* Voice summary card - simple styling */
[data-theme="studio"] .voice-summary-card {
  margin-top: 20px !important;
  
  /* Same glass styling as other cards */
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 16px 20px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
}

/* Chart container card */
[data-theme="studio"] .chart-container {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 20px;
  position: relative;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="studio"] .chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="studio"] .chart-container:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

/* Canvas/Chart styling */
[data-theme="studio"] #lineChart,
[data-theme="studio"] #oaklandChart {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Back button */
[data-theme="studio"] .back-button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 10px 20px;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="studio"] .back-button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateX(-4px);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

/* Oakland badge */
[data-theme="studio"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(204, 152, 120, 0.5) 0%, 
    rgba(154, 133, 120, 0.5) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(204, 152, 120, 0.3);
  box-shadow: 0 0 20px rgba(204, 152, 120, 0.2);
}

/* Controls section styling */
[data-theme="studio"] .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

/* Floating controls panel */
[data-theme="studio"] .floating-controls {
  background: rgba(13, 13, 14, 0.9);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 60px var(--glow-purple);
  
  transition: var(--transition);
}

[data-theme="studio"] .floating-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

[data-theme="studio"] .floating-controls .controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="studio"] .floating-controls .controls-header h4 {
  color: var(--text-primary);
  margin: 0;
  font-size: 14px;
}

/* Category display badges - same as Ready pill */
[data-theme="studio"] #categoryDisplay,
[data-theme="studio"] #patternDisplay,
[data-theme="studio"] #cogsSubcategory {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: 20px !important;
  color: var(--text-primary) !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  display: inline-block;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

[data-theme="studio"] #categoryDisplay {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border-card) !important;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

/* Oakland insights panel */
[data-theme="studio"] #oaklandInsights {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
}

/* Category insights */
[data-theme="studio"] #categoryInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
}

/* ===========================================
   THEME SWITCHER - Glassy billiard balls
   =========================================== */
[data-theme="studio"] .theme-switcher {
  display: flex;
  gap: 6px;
}

[data-theme="studio"] .theme-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 !important;
  margin: 0 2px !important;
  position: relative;
  overflow-y: auto;
  
  /* Glassy billiard ball effect */
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Shine highlight on ball */
[data-theme="studio"] .theme-btn::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 5px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

[data-theme="studio"] .theme-btn:hover {
  transform: scale(1.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 12px var(--glow-color) !important;
}

[data-theme="studio"] .theme-btn.active {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* ===========================================
   Lucy UI - LIQUID GLASS THEME VARIANTS
/* ===========================================
   Lucy UI - LUXE ROSE Glass Theme
   Light peachy cream rose theme
   =========================================== */

/* ===========================================
   LUXE ROSE VARIABLES
   =========================================== */
[data-theme="paper"] {
  /* Canvas - receipt off-white */
  --bg-primary: #EFE7DA;
  
  /* Glass effects - warm cream tinted */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-card: rgba(255, 255, 255, 0.68);
  --glass-bg-modal: rgba(255, 255, 255, 0.8);
  --glass-bg-button: rgba(255, 255, 255, 0.9);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  
  /* Borders - neutral warm grey */
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-border-card: rgba(255, 255, 255, 0.6);
  --glass-border-modal: rgba(255, 255, 255, 0.7);
  --glass-border-hover: rgba(239, 231, 218, 0.9);
  --glass-border-strong: rgba(94, 86, 76, 0.22);
  
  /* Glow colors - warm peachy */
  --glow-color: rgba(90, 80, 65, 0.15);
  --glow-color-hover: rgba(90, 80, 65, 0.25);
  --glow-color-strong: rgba(90, 80, 65, 0.35);
  --glow-purple: rgba(200, 160, 150, 0.2);
  
  /* Accent - rose gold */
  --accent: #8A6345;
  --accent-glow: rgba(154, 133, 120, 0.4);
  
  /* Text - dark for light bg */
  --text-primary: #2C251C;
  --text-secondary: #5E564C;
  --text-muted: rgba(94, 86, 76, 0.72);
  --text-hint: rgba(94, 86, 76, 0.5);
  --chart-line: #2C251C;

  /* Verification badges (BEACN merit badge) — light canvas */
  --verify-felt: #FDFBFA;
  --verify-ok: #3f8b5a;
  --verify-calc: #4f6bd9;
  --verify-gold: #b8862b;
  --verify-unearned: #9a978f;
  --verify-bad: #c4554f;


  /* Semantic colors for report components */
  --color-negative: #CE3C33;
  --color-positive: #2E7D32;
  --color-warning: #d97706;
  --surface-card: rgba(0, 0, 0, 0.03);
  --surface-elevated: rgba(255, 248, 245, 0.95);
  --text-on-surface: #2a2420;
  --text-on-surface-muted: #6b5a52;
  --text-on-surface-dim: #94a3b8;

  /* Shadows - soft warm */
  --shadow-card: 0 4px 20px rgba(60, 48, 36, 0.04), 0 1px 2px rgba(60, 48, 36, 0.02);
  --shadow-modal: 0 8px 24px rgba(60, 48, 36, 0.08);
  --shadow-button: 0 1px 2px rgba(60, 48, 36, 0.04);
  --shadow-button-hover: 0 4px 12px rgba(60, 48, 36, 0.08);
  
  /* Inset highlights */
  --inset-light: inset 0 1px 1px 0 rgba(255, 255, 255, 0.8);
  --inset-light-subtle: inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
  --inset-light-card: inset 0 1px 2px 0 rgba(255, 255, 255, 0.6);
  --inset-input: inset 0 2px 4px rgba(60, 48, 36, 0.02);
  
  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 30px;
  
  /* Blur */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(30px);
  
  /* Transitions - spring physics */
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* Severity — critical (red, darkened for light bg) */
  --sev-crit: #dc2626;
  --sev-crit-soft: #ef4444;
  --sev-crit-bg: rgba(239, 68, 68, 0.08);
  --sev-crit-bg-subtle: rgba(239, 68, 68, 0.04);
  --sev-crit-border: rgba(239, 68, 68, 0.25);
  --sev-crit-border-hover: rgba(239, 68, 68, 0.4);
  --sev-crit-glow: rgba(239, 68, 68, 0.12);
  --sev-crit-badge-bg: rgba(239, 68, 68, 0.1);

  /* Severity — warning (amber, darkened for light bg) */
  --sev-warn: #d97706;
  --sev-warn-soft: #f59e0b;
  --sev-warn-bg: rgba(245, 158, 11, 0.08);
  --sev-warn-bg-subtle: rgba(245, 158, 11, 0.04);
  --sev-warn-border: rgba(245, 158, 11, 0.25);
  --sev-warn-border-hover: rgba(245, 158, 11, 0.4);
  --sev-warn-glow: rgba(245, 158, 11, 0.1);
  --sev-warn-badge-bg: rgba(245, 158, 11, 0.1);

  /* Severity — healthy (green, darkened for light bg) */
  --sev-good: #059669;
  --sev-good-soft: #10b981;
  --sev-good-bg: rgba(16, 185, 129, 0.08);
  --sev-good-bg-subtle: rgba(16, 185, 129, 0.03);
  --sev-good-border: rgba(16, 185, 129, 0.25);
  --sev-good-border-hover: rgba(16, 185, 129, 0.4);
  --sev-good-glow: rgba(16, 185, 129, 0.1);
  --sev-good-badge-bg: rgba(16, 185, 129, 0.08);

  /* Severity — info (indigo, darkened for light bg) */
  --sev-info: #6366f1;
  --sev-info-soft: #818cf8;
  --sev-info-bg: rgba(99, 102, 241, 0.08);
  --sev-info-bg-subtle: rgba(99, 102, 241, 0.04);
  --sev-info-border: rgba(99, 102, 241, 0.25);
  --sev-info-badge-bg: rgba(99, 102, 241, 0.08);

  /* Narrative tags */
  --narr-finding-bg: rgba(5, 150, 105, 0.12);
  --narr-finding-color: #059669;
  --narr-contra-bg: rgba(220, 38, 38, 0.1);
  --narr-contra-color: #dc2626;
  --narr-risk-bg: rgba(217, 119, 6, 0.1);
  --narr-risk-color: #d97706;
  --narr-action-bg: rgba(99, 102, 241, 0.1);
  --narr-action-color: #6366f1;
}

/* ===========================================
   ANIMATED GRADIENT BLOBS (Background)
   =========================================== */
[data-theme="paper"] html,
[data-theme="paper"] {
  background: linear-gradient(135deg, #E9DFCF 0%, #EFE7DA 38%, #F9F6F0 100%) fixed;
  min-height: 100%;
}
[data-theme="paper"] body {
  background: linear-gradient(135deg, #E9DFCF 0%, #EFE7DA 38%, #F9F6F0 100%) fixed;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

[data-theme="paper"] body::before,
[data-theme="paper"] body::after,
[data-theme="paper"] .main-wrapper::before {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.6;
  animation: float 25s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}

[data-theme="paper"] body::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(252, 250, 246, 0.95) 0%, rgba(239, 231, 218, 0.5) 40%, transparent 70%);
  top: 5%;
  left: 15%;
  animation-delay: 0s;
}

[data-theme="paper"] body::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(239, 231, 218, 0.8) 0%, rgba(228, 218, 200, 0.3) 40%, transparent 70%);
  top: 35%;
  right: 10%;
  animation-delay: -7s;
}

[data-theme="paper"] .main-wrapper::before {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(249, 246, 240, 0.7) 0%, rgba(239, 231, 218, 0.3) 40%, transparent 70%);
  bottom: 5%;
  left: 35%;
  animation-delay: -12s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 30px) scale(0.9);
  }
}

/* ===========================================
   GLASS PANEL (Sidebar)
   =========================================== */
[data-theme="paper"] .butterfly-sidebar {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-left: none;
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
  margin: 0;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 40px var(--glow-color);
  
  /* Flex column layout - align with forecast content */
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 60px;
  padding-bottom: 30px;
}

/* Sidebar header - butterfly and Lucy tight, centered */
[data-theme="paper"] .butterfly-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  flex-shrink: 0;
}

[data-theme="paper"] .butterfly-sidebar .mini-butterfly {
  margin: 0;
}

[data-theme="paper"] .butterfly-sidebar #sidebarStatus {
  font-size: 1.25em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

[data-theme="paper"] .butterfly-sidebar #sidebarStatus:hover {
  color: var(--accent);
  text-shadow: 0 0 15px var(--glow-color);
}

/* Chat output box - matches graph height */
[data-theme="paper"] .butterfly-sidebar .mini-chat {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  /* Match graph card height */
  height: 450px;
  min-height: 450px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  
  /* Animation */
  transition: var(--transition);
}

[data-theme="paper"] .butterfly-sidebar .mini-chat:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

/* Chat input area - matches voice summary height */
[data-theme="paper"] .butterfly-sidebar .chat-input-area {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 20px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="paper"] .butterfly-sidebar .chat-input-area:focus-within {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
  border-color: var(--glass-border-hover);
}

[data-theme="paper"] .butterfly-sidebar .chat-input-area input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 100%;
  padding: 8px 0;
}

[data-theme="paper"] .butterfly-sidebar .chat-input-area input:focus {
  outline: none;
}

[data-theme="paper"] .butterfly-sidebar .chat-input-area button {
  width: 100%;
  margin-top: 8px;
  transition: var(--transition);
}

[data-theme="paper"] .butterfly-sidebar .chat-input-area button:hover {
  transform: translateY(-2px);
}

/* Hide back button on forecast page */
[data-theme="paper"] .back-button {
  display: none !important;
}

/* ===========================================
   GLASS CARDS
   =========================================== */
[data-theme="paper"] .card,
[data-theme="paper"] .voice-summary-card {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Top edge highlight - from Figma */
[data-theme="paper"] .card::before,
[data-theme="paper"] .voice-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="paper"] .card:hover,
[data-theme="paper"] .voice-summary-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-8px) scale(1.02);
  
  box-shadow: 
    0 20px 50px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.15),
    0 0 80px var(--glow-color-hover);
}

/* ===========================================
   CONVERSATION - Glass Card
   =========================================== */
[data-theme="paper"] .conversation {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow-y: auto;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="paper"] .conversation:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  
  box-shadow: 
    0 15px 40px 0 rgba(0, 0, 0, 0.35),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

[data-theme="paper"] .conversation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
  z-index: 1;
}

/* ===========================================
   GLASS MODAL (Floating Controls)
   =========================================== */
[data-theme="paper"] .floating-controls {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-xl);
  padding: 20px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 80px var(--glow-purple);
}

/* ===========================================
   GLASS INPUT
   =========================================== */
[data-theme="paper"] input[type="text"],
[data-theme="paper"] input[type="number"],
[data-theme="paper"] select {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text-primary);
  font-size: 14px;
  
  box-shadow: 
    var(--inset-input),
    0 0 30px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="paper"] input::placeholder {
  color: var(--text-muted);
}

[data-theme="paper"] input:focus,
[data-theme="paper"] select:focus {
  outline: none;
  border-color: rgba(100, 200, 255, 0.3);
  
  box-shadow: 
    var(--inset-input),
    0 0 40px var(--glow-color-hover);
}

[data-theme="paper"] select option {
  background: #1a1d24;
  color: var(--text-primary);
}

/* ===========================================
   GLASS BUTTONS - Glowy outline, no color fill
   =========================================== */
[data-theme="paper"] button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
  
  transition: var(--transition);
}

[data-theme="paper"] button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 25px var(--glow-color-hover);
}

[data-theme="paper"] button:active {
  transform: translateY(0);
}

[data-theme="paper"] button.ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 
    var(--inset-light-subtle),
    0 0 10px var(--glow-color);
}

[data-theme="paper"] button.ghost:hover {
  background: var(--glass-bg-card);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="paper"] button.primary {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="paper"] button.primary:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="paper"] button.success {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 20px var(--glow-color);
}

[data-theme="paper"] button.success:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

/* ===========================================
   GLASS ICON BUTTONS (Mic, Close, etc.)
   =========================================== */
[data-theme="paper"] .voice-mic {
  width: 42px;
  height: 42px;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="paper"] .voice-mic svg {
  width: 18px;
  height: 18px;
  color: #2a2420;
  stroke: #2a2420;
}

[data-theme="paper"] .voice-mic:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--glass-border-hover);
  
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

[data-theme="paper"] .voice-mic.active {
  background: rgba(120, 110, 95, 0.15);
  border-color: var(--glass-border-hover);
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light),
    0 0 25px rgba(120, 110, 95, 0.25);
  
  animation: mic-pulse 2s ease-in-out infinite;
}

[data-theme="paper"] .voice-mic.active svg {
  color: var(--accent);
  stroke: var(--accent);
}

@keyframes mic-pulse {
  0%, 100% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 25px rgba(120, 110, 95, 0.2);
  }
  50% {
    box-shadow: 
      var(--shadow-button),
      var(--inset-light),
      0 0 35px rgba(120, 110, 95, 0.3);
  }
}

[data-theme="paper"] .close-controls,
[data-theme="paper"] .anchor-controls {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  
  box-shadow: 
    var(--inset-light-subtle),
    0 0 20px rgba(100, 200, 255, 0.05);
  
  transition: var(--transition);
}

[data-theme="paper"] .close-controls:hover,
[data-theme="paper"] .anchor-controls:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
  
  box-shadow: 
    var(--inset-light),
    0 0 30px var(--glow-color-hover);
}

[data-theme="paper"] .anchor-controls.anchored {
  background: rgba(120, 110, 95, 0.2);
  border-color: var(--accent);
  color: var(--accent);
  
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   BUTTERFLY - Glass outline, no fill, more glow
   =========================================== */
[data-theme="paper"] .butterfly,
[data-theme="paper"] .mini-butterfly {
  filter: 
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 20px var(--glow-color))
    drop-shadow(0 0 40px var(--glow-color));
  transition: filter 0.3s ease;
}

[data-theme="paper"] .butterfly:hover,
[data-theme="paper"] .mini-butterfly:hover {
  filter: 
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 30px var(--glow-color-hover))
    drop-shadow(0 0 60px var(--glow-color-hover));
}

[data-theme="paper"] .butterfly.active,
[data-theme="paper"] .mini-butterfly.active {
  filter: 
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 35px rgba(120, 110, 95, 0.5))
    drop-shadow(0 0 70px rgba(120, 110, 95, 0.4));
  animation: butterfly-glow 2s ease-in-out infinite;
}

@keyframes butterfly-glow {
  0%, 100% {
    filter: 
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 35px rgba(120, 110, 95, 0.5))
      drop-shadow(0 0 70px rgba(120, 110, 95, 0.4));
  }
  50% {
    filter: 
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 50px rgba(120, 110, 95, 0.6))
      drop-shadow(0 0 100px rgba(120, 110, 95, 0.5));
  }
}

/* Butterfly wings - dark stroke for light rose theme */
[data-theme="paper"] .left-wing path,
[data-theme="paper"] .right-wing path {
  fill: transparent;
  stroke: rgba(42, 36, 32, 0.5);
  stroke-width: 1.5;
}

[data-theme="paper"] .butterfly svg,
[data-theme="paper"] .mini-butterfly svg {
  filter: none;
}

[data-theme="paper"] .butterfly,
[data-theme="paper"] .mini-butterfly {
  filter: 
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.1))
    drop-shadow(0 0 20px rgba(120, 110, 95, 0.2));
}

/* ===========================================
   MESSAGES - No individual tiles, inherit from container
   =========================================== */
[data-theme="paper"] .message.assistant,
[data-theme="paper"] .message.user {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 16px;
  margin: 4px 0;
  color: var(--text-primary);
}

[data-theme="paper"] .message.assistant {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
}

[data-theme="paper"] .message.user {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  padding-left: 16px;
}

/* ===========================================
   HEADER
   =========================================== */
[data-theme="paper"] .header h1 {
  background: linear-gradient(135deg, 
    #2a2420 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
}

[data-theme="paper"] .status {
  color: var(--text-secondary);
}

/* ===========================================
   TABLE
   =========================================== */
[data-theme="paper"] .table th,
[data-theme="paper"] .table td {
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 8px;
  color: var(--text-primary);
}

[data-theme="paper"] .table th {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   PILLS & BADGES
   =========================================== */
[data-theme="paper"] .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: 20px;
  color: var(--text-primary);
  padding: 4px 14px;
  font-size: 11px;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

[data-theme="paper"] #categoryDisplay,
[data-theme="paper"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(120, 110, 95, 0.6) 0%, 
    rgba(120, 110, 95, 0.6) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(120, 110, 95, 0.4);
  box-shadow: 0 0 25px var(--accent-glow);
}

/* ===========================================
   TOAST
   =========================================== */
[data-theme="paper"] #toast {
  background: var(--glass-bg-modal);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-modal);
  border-radius: var(--radius-lg);
  
  box-shadow: 
    var(--shadow-modal),
    0 0 40px var(--glow-color);
  
  color: var(--text-primary);
}

/* ===========================================
   BACK BUTTON
   =========================================== */
[data-theme="paper"] .back-button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border-card);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

[data-theme="paper"] .back-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
  box-shadow: none;
}

/* ===========================================
   HERO SECTION
   =========================================== */
[data-theme="paper"] .hero h1 {
  color: var(--text-primary);
}

[data-theme="paper"] .hero .status .pill {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  color: var(--text-primary);
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color);
}

/* ===========================================
   CHART CANVAS
   =========================================== */
[data-theme="paper"] canvas {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ===========================================
   VOICE SUMMARY
   =========================================== */
[data-theme="paper"] .voice-summary-card h3 {
  color: var(--text-primary);
}

[data-theme="paper"] #voiceOut {
  color: var(--text-primary);
}

[data-theme="paper"] #oaklandInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}

/* ===========================================
   THINKING ANIMATION
   =========================================== */
[data-theme="paper"] .thinking {
  background: rgba(120, 110, 95, 0.12);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid rgba(120, 110, 95, 0.25);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  
  box-shadow: 0 0 30px rgba(120, 110, 95, 0.15);
}

[data-theme="paper"] .thinking .timestamp {
  color: var(--text-muted);
}

[data-theme="paper"] .thinking .dots span {
  background: rgba(120, 110, 95, 0.8);
  box-shadow: 0 0 10px rgba(120, 110, 95, 0.4);
}

/* ===========================================
   SCROLLBAR
   =========================================== */
[data-theme="paper"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

[data-theme="paper"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

[data-theme="paper"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

[data-theme="paper"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ===========================================
   LABELS
   =========================================== */
[data-theme="paper"] label {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===========================================
   SPARKLE DECORATION - Behind butterfly
   =========================================== */
[data-theme="paper"] .butterfly-container {
  position: relative;
}

[data-theme="paper"] .butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(120, 110, 95, 0.5) 0%, rgba(120, 110, 95, 0.25) 30%, transparent 70%);
  filter: blur(8px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

[data-theme="paper"] .mini-butterfly::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(120, 110, 95, 0.4) 0%, rgba(120, 110, 95, 0.2) 30%, transparent 70%);
  filter: blur(6px);
  animation: sparkle 3s infinite ease-in-out;
  pointer-events: none;
  z-index: -1;
}

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

/* ===========================================
   INPUT AREA - Same width as conversation
   =========================================== */
[data-theme="paper"] .input-container {
  padding: 0;
  margin: 20px 0;
  width: 100%;
}

[data-theme="paper"] .input-area {
  display: flex;
  gap: 10px;
  width: 100%;
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 12px 16px;
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card);
  transition: var(--transition);
}

/* Input area moves when focused */
[data-theme="paper"] .input-area:focus-within {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--glass-border-hover);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 30px var(--glow-color);
}

[data-theme="paper"] .input-area input {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 12px;
}

[data-theme="paper"] .input-area input:focus {
  box-shadow: none;
  border: none;
}

[data-theme="paper"] .input-area button {
  padding: 10px 24px;
}

[data-theme="paper"] .voice-interface {
  display: flex;
  flex-direction: column;
  width: 100%;
}

[data-theme="paper"] .voice-interface .input-container,
[data-theme="paper"] .voice-interface .conversation {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===========================================
   FORECAST PAGE - Glass styling
   =========================================== */

/* Forecast panel background */
[data-theme="paper"] .forecast-panel {
  background: transparent;
}

/* Forecast dashboard */
[data-theme="paper"] .forecast-dashboard {
  position: relative;
}

/* Forecast dashboard padding */
[data-theme="paper"] .forecast-dashboard {
  padding-left: 10%;
  padding-right: 10%;
}

/* Forecast header - title left, pills right */
[data-theme="paper"] .forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

[data-theme="paper"] .forecast-title-area h1 {
  margin: 0;
}

/* Pill row - aligned right with space for mic */
[data-theme="paper"] .pill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-right: 80px;
}

[data-theme="paper"] .pill-row .pill {
  margin: 0;
}

/* Hero section */
[data-theme="paper"] .hero h1 {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

/* Grid layout - expanded to fill more space */
[data-theme="paper"] .grid {
  gap: 16px;
  margin-bottom: 20px;
}

/* Make the grid cards much bigger */
[data-theme="paper"] .grid {
  grid-template-columns: 65% 34%;
}

[data-theme="paper"] .grid .card {
  min-height: 450px;
}

/* Chart canvas bigger */
[data-theme="paper"] #lineChart,
[data-theme="paper"] #oaklandChart {
  height: 380px !important;
}

/* Chart.js axis labels white */
[data-theme="paper"] .card canvas {
  filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.3));
}

/* Chart styling - white axes, glowing lines */
[data-theme="paper"] .chart-container canvas {
  filter: drop-shadow(0 0 8px rgba(255, 100, 150, 0.3));
}

/* Voice summary card - simple styling */
[data-theme="paper"] .voice-summary-card {
  margin-top: 20px !important;
  
  /* Same glass styling as other cards */
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 16px 20px;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
}

/* Chart container card */
[data-theme="paper"] .chart-container {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-2xl);
  padding: 20px;
  position: relative;
  
  box-shadow: 
    var(--shadow-card),
    var(--inset-light-card),
    0 0 60px rgba(100, 200, 255, 0.08);
  
  transition: var(--transition);
}

[data-theme="paper"] .chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
}

[data-theme="paper"] .chart-container:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 15px 45px rgba(0, 0, 0, 0.4),
    var(--inset-light-card),
    0 0 80px var(--glow-color-hover);
}

/* Canvas/Chart styling */
[data-theme="paper"] #lineChart,
[data-theme="paper"] #oaklandChart {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Back button */
[data-theme="paper"] .back-button {
  background: var(--glass-bg-card);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  padding: 10px 20px;
  
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card);
  
  transition: var(--transition);
}

[data-theme="paper"] .back-button:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateX(-4px);
  box-shadow: 
    var(--shadow-button-hover),
    var(--inset-light),
    0 0 20px var(--glow-color);
}

/* Oakland badge */
[data-theme="paper"] .oakland-badge {
  background: linear-gradient(135deg, 
    rgba(120, 110, 95, 0.5) 0%, 
    rgba(120, 110, 95, 0.5) 100%
  );
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(120, 110, 95, 0.3);
  box-shadow: 0 0 20px rgba(120, 110, 95, 0.2);
}

/* Controls section styling */
[data-theme="paper"] .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

/* Floating controls panel */
[data-theme="paper"] .floating-controls {
  background: rgba(13, 13, 14, 0.9);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--glass-border-card);
  border-radius: var(--radius-xl);
  padding: 24px;
  
  box-shadow: 
    var(--shadow-modal),
    var(--inset-light),
    0 0 60px var(--glow-purple);
  
  transition: var(--transition);
}

[data-theme="paper"] .floating-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

[data-theme="paper"] .floating-controls .controls-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="paper"] .floating-controls .controls-header h4 {
  color: var(--text-primary);
  margin: 0;
  font-size: 14px;
}

/* Category display badges - same as Ready pill */
[data-theme="paper"] #categoryDisplay,
[data-theme="paper"] #patternDisplay,
[data-theme="paper"] #cogsSubcategory {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: 20px !important;
  color: var(--text-primary) !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  display: inline-block;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

[data-theme="paper"] #categoryDisplay {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border-card) !important;
  box-shadow: 
    var(--shadow-button),
    var(--inset-light-card),
    0 0 15px var(--glow-color) !important;
}

/* Oakland insights panel */
[data-theme="paper"] #oaklandInsights {
  background: var(--glass-bg-card) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
}

/* Category insights */
[data-theme="paper"] #categoryInsights {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
}

/* ===========================================
   THEME SWITCHER - Glassy billiard balls
   =========================================== */
[data-theme="paper"] .theme-switcher {
  display: flex;
  gap: 6px;
}

[data-theme="paper"] .theme-btn {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 !important;
  margin: 0 2px !important;
  position: relative;
  overflow: hidden;
  
  /* Glassy billiard ball effect */
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Shine highlight on ball */
[data-theme="paper"] .theme-btn::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 5px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

[data-theme="paper"] .theme-btn:hover {
  transform: scale(1.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 12px var(--glow-color) !important;
}

[data-theme="paper"] .theme-btn.active {
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* ===========================================
   Lucy UI - LIQUID GLASS THEME VARIANTS

/* ===========================================
   QUAD TILES, INTEL BAR & NEW ELEMENTS
   Glass Theme Support - All 4 Themes
   =========================================== */

/* Confidence badge - all glass themes */
[data-theme="carbon"] .conf-badge,
[data-theme="midnight"] .conf-badge,
[data-theme="studio"] .conf-badge,
[data-theme="paper"] .conf-badge {
  background: rgba(55, 214, 122, 0.08);
  border: 1px solid rgba(55, 214, 122, 0.2);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  box-shadow: 0 0 15px rgba(55, 214, 122, 0.1);
}

[data-theme="studio"] .conf-badge,
[data-theme="paper"] .conf-badge {
  background: rgba(55, 214, 122, 0.1);
  border: 1px solid rgba(55, 214, 122, 0.25);
}

/* Intel bar */
[data-theme="carbon"] .intel-bar,
[data-theme="midnight"] .intel-bar,
[data-theme="studio"] .intel-bar,
[data-theme="paper"] .intel-bar {
  padding: 14px 18px !important;
}

[data-theme="carbon"] .intel-label,
[data-theme="midnight"] .intel-label,
[data-theme="studio"] .intel-label,
[data-theme="paper"] .intel-label {
  color: var(--text-muted);
}

[data-theme="carbon"] .intel-sep,
[data-theme="midnight"] .intel-sep,
[data-theme="studio"] .intel-sep,
[data-theme="paper"] .intel-sep {
  background: var(--glass-border);
}

[data-theme="carbon"] .intel-sum,
[data-theme="midnight"] .intel-sum,
[data-theme="studio"] .intel-sum,
[data-theme="paper"] .intel-sum {
  color: var(--text-secondary);
}

[data-theme="carbon"] .intel-sum b,
[data-theme="midnight"] .intel-sum b,
[data-theme="studio"] .intel-sum b,
[data-theme="paper"] .intel-sum b {
  color: var(--text-primary);
}

/* Quad grid tiles - inherit card glass, reduce hover lift */
[data-theme="carbon"] .quad-tile,
[data-theme="midnight"] .quad-tile,
[data-theme="studio"] .quad-tile,
[data-theme="paper"] .quad-tile {
  min-height: auto !important;
}

[data-theme="carbon"] .quad-tile:hover,
[data-theme="midnight"] .quad-tile:hover,
[data-theme="studio"] .quad-tile:hover,
[data-theme="paper"] .quad-tile:hover {
  transform: translateY(-4px) scale(1.01);
}

/* Tile toggle text */
[data-theme="carbon"] .tile-toggle h4,
[data-theme="midnight"] .tile-toggle h4,
[data-theme="studio"] .tile-toggle h4,
[data-theme="paper"] .tile-toggle h4 {
  color: var(--text-muted);
}

/* Driver/headwind list items */
[data-theme="carbon"] .driver-list li,
[data-theme="carbon"] .headwind-list li,
[data-theme="midnight"] .driver-list li,
[data-theme="midnight"] .headwind-list li,
[data-theme="studio"] .driver-list li,
[data-theme="studio"] .headwind-list li,
[data-theme="paper"] .driver-list li,
[data-theme="paper"] .headwind-list li {
  color: var(--text-secondary);
}

/* Assumption items - dark themes */
[data-theme="carbon"] .assumption-item,
[data-theme="midnight"] .assumption-item {
  background: rgba(255, 255, 255, 0.02);
}

/* Assumption items - light themes */
[data-theme="studio"] .assumption-item,
[data-theme="paper"] .assumption-item {
  background: rgba(0, 0, 0, 0.02);
}

/* Scenario badge - dark themes */
[data-theme="carbon"] .scenario-badge,
[data-theme="midnight"] .scenario-badge {
  background: rgba(91, 141, 238, 0.06);
  border-color: rgba(91, 141, 238, 0.15);
}

/* Scenario badge - light themes */
[data-theme="studio"] .scenario-badge,
[data-theme="paper"] .scenario-badge {
  background: rgba(91, 141, 238, 0.08);
  border-color: rgba(91, 141, 238, 0.2);
  color: #5b8dee;
}

/* Advanced panel in sidebar - dark themes */
[data-theme="carbon"] .adv-panel,
[data-theme="midnight"] .adv-panel {
  border-top-color: var(--glass-border);
  background: rgba(0, 0, 0, 0.1);
}

/* Advanced panel in sidebar - light themes */
[data-theme="studio"] .adv-panel,
[data-theme="paper"] .adv-panel {
  border-top-color: var(--glass-border);
  background: rgba(0, 0, 0, 0.02);
}

/* Advanced inputs - all themes */
[data-theme="carbon"] .adv-input,
[data-theme="carbon"] .adv-select,
[data-theme="midnight"] .adv-input,
[data-theme="midnight"] .adv-select,
[data-theme="studio"] .adv-input,
[data-theme="studio"] .adv-select,
[data-theme="paper"] .adv-input,
[data-theme="paper"] .adv-select {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 10px;
}

/* Advanced buttons - dark themes */
[data-theme="carbon"] .adv-btn,
[data-theme="midnight"] .adv-btn {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 6px;
}

[data-theme="carbon"] .adv-btn:hover,
[data-theme="midnight"] .adv-btn:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}

/* Advanced buttons - light themes */
[data-theme="studio"] .adv-btn,
[data-theme="paper"] .adv-btn {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 6px;
}

[data-theme="studio"] .adv-btn:hover,
[data-theme="paper"] .adv-btn:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}

/* ===========================================
   ADDENDUM: Mockup Component Theme Support
   Append this to your existing liquid-glass.css
   =========================================== */

/* ===========================================
   FORECAST GRID THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .forecast-grid,
[data-theme="midnight"] .forecast-grid,
[data-theme="studio"] .forecast-grid,
[data-theme="paper"] .forecast-grid {
  gap: 8px;
}

/* ===========================================
   CHART AREA THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .chart-area,
[data-theme="midnight"] .chart-area,
[data-theme="paper"] .chart-area {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
}

[data-theme="studio"] .chart-area {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="carbon"] .chart-placeholder,
[data-theme="midnight"] .chart-placeholder,
[data-theme="paper"] .chart-placeholder {
  border-color: var(--glass-border);
  background: var(--glass-bg);
}

[data-theme="studio"] .chart-placeholder {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

/* ===========================================
   YEARLY TILE THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .yearly-tile,
[data-theme="midnight"] .yearly-tile,
[data-theme="paper"] .yearly-tile {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
}

[data-theme="studio"] .yearly-tile {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Yearly Table Theme */
[data-theme="carbon"] .yearly-table th,
[data-theme="midnight"] .yearly-table th,
[data-theme="paper"] .yearly-table th {
  color: var(--text-muted);
  border-bottom-color: var(--glass-border);
}

[data-theme="studio"] .yearly-table th {
  color: rgba(30, 41, 59, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="carbon"] .yearly-table td,
[data-theme="midnight"] .yearly-table td,
[data-theme="paper"] .yearly-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--glass-bg);
}

[data-theme="studio"] .yearly-table td {
  color: #1e293b;
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="studio"] .yearly-table td:first-child {
  color: rgba(30, 41, 59, 0.6);
}

/* YoY Column */
[data-theme="carbon"] .yearly-table .yoy,
[data-theme="midnight"] .yearly-table .yoy,
[data-theme="studio"] .yearly-table .yoy,
[data-theme="paper"] .yearly-table .yoy {
  color: #37d67a;
  font-weight: 600;
}

[data-theme="carbon"] .yearly-table .yoy.negative,
[data-theme="midnight"] .yearly-table .yoy.negative,
[data-theme="studio"] .yearly-table .yoy.negative,
[data-theme="paper"] .yearly-table .yoy.negative {
  color: #f59e0b;
}

/* Forecast Context */
[data-theme="carbon"] .forecast-context,
[data-theme="midnight"] .forecast-context,
[data-theme="paper"] .forecast-context {
  border-top-color: var(--glass-border);
}

[data-theme="studio"] .forecast-context {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="studio"] .context-text {
  color: #1e293b;
}

/* ===========================================
   BOTTOM TILES THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .indicators-tile,
[data-theme="carbon"] .metrics-tile,
[data-theme="carbon"] .adv-tile,
[data-theme="midnight"] .indicators-tile,
[data-theme="midnight"] .metrics-tile,
[data-theme="midnight"] .adv-tile,
[data-theme="paper"] .indicators-tile,
[data-theme="paper"] .metrics-tile,
[data-theme="paper"] .adv-tile {
  background: var(--glass-bg-card);
  border: 1px solid var(--glass-border-card);
}

[data-theme="studio"] .indicators-tile,
[data-theme="studio"] .metrics-tile,
[data-theme="studio"] .adv-tile {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Metric Rows */
[data-theme="carbon"] .metric-row,
[data-theme="carbon"] .adv-control-row,
[data-theme="midnight"] .metric-row,
[data-theme="midnight"] .adv-control-row,
[data-theme="paper"] .metric-row,
[data-theme="paper"] .adv-control-row {
  border-bottom-color: var(--glass-border);
}

[data-theme="studio"] .metric-row,
[data-theme="studio"] .adv-control-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="studio"] .metric-label {
  color: rgba(30, 41, 59, 0.5);
}

[data-theme="studio"] .metric-value {
  color: #1e293b;
}

/* Metric Values */
[data-theme="carbon"] .metric-value.positive,
[data-theme="midnight"] .metric-value.positive,
[data-theme="studio"] .metric-value.positive,
[data-theme="paper"] .metric-value.positive {
  color: #37d67a;
}

[data-theme="carbon"] .metric-value.negative,
[data-theme="midnight"] .metric-value.negative,
[data-theme="studio"] .metric-value.negative,
[data-theme="paper"] .metric-value.negative {
  color: #f59e0b;
}

/* Section Labels */
[data-theme="carbon"] .section-label.drivers,
[data-theme="midnight"] .section-label.drivers,
[data-theme="studio"] .section-label.drivers,
[data-theme="paper"] .section-label.drivers {
  color: #37d67a;
}

[data-theme="carbon"] .section-label.headwinds,
[data-theme="midnight"] .section-label.headwinds,
[data-theme="studio"] .section-label.headwinds,
[data-theme="paper"] .section-label.headwinds {
  color: #f59e0b;
}

/* Section Divider */
[data-theme="carbon"] .section-divider,
[data-theme="midnight"] .section-divider,
[data-theme="paper"] .section-divider {
  border-top-color: var(--glass-border);
}

[data-theme="studio"] .section-divider {
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Indicator Lists */
[data-theme="carbon"] .indicator-list li,
[data-theme="midnight"] .indicator-list li,
[data-theme="paper"] .indicator-list li {
  color: var(--text-secondary);
}

[data-theme="studio"] .indicator-list li {
  color: rgba(30, 41, 59, 0.7);
}

[data-theme="carbon"] .indicator-list li b,
[data-theme="midnight"] .indicator-list li b,
[data-theme="paper"] .indicator-list li b {
  color: var(--text-primary);
}

[data-theme="studio"] .indicator-list li b {
  color: #1e293b;
}

/* ===========================================
   ADVANCED INLINE INPUTS THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .adv-input-inline,
[data-theme="carbon"] .adv-select-inline,
[data-theme="midnight"] .adv-input-inline,
[data-theme="midnight"] .adv-select-inline,
[data-theme="paper"] .adv-input-inline,
[data-theme="paper"] .adv-select-inline {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

[data-theme="studio"] .adv-input-inline,
[data-theme="studio"] .adv-select-inline {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}

/* ===========================================
   CHAT BAR THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .chat-bar,
[data-theme="midnight"] .chat-bar,
[data-theme="paper"] .chat-bar {
  background: var(--glass-bg-card);
  border-color: var(--glass-border-card);
}

[data-theme="studio"] .chat-bar {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="carbon"] .chat-bar .chat-input,
[data-theme="midnight"] .chat-bar .chat-input,
[data-theme="paper"] .chat-bar .chat-input {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

[data-theme="studio"] .chat-bar .chat-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1e293b;
}

[data-theme="studio"] .chat-bar .name {
  color: rgba(30, 41, 59, 0.7);
}

[data-theme="studio"] .chat-bar .last-msg {
  color: rgba(30, 41, 59, 0.5);
}

/* Chat Expand Button */
[data-theme="carbon"] .chat-expand-btn,
[data-theme="midnight"] .chat-expand-btn,
[data-theme="paper"] .chat-expand-btn {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text-muted);
}

[data-theme="studio"] .chat-expand-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(30, 41, 59, 0.5);
}

/* Chat Messages */
[data-theme="carbon"] .chat-msg.user,
[data-theme="midnight"] .chat-msg.user,
[data-theme="paper"] .chat-msg.user {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(255, 255, 255, 0.2);
}

[data-theme="studio"] .chat-msg.user {
  background: rgba(0, 0, 0, 0.03);
  border-left-color: rgba(0, 0, 0, 0.2);
  color: #1e293b;
}

[data-theme="carbon"] .chat-msg.assistant,
[data-theme="midnight"] .chat-msg.assistant,
[data-theme="paper"] .chat-msg.assistant {
  background: rgba(55, 214, 122, 0.05);
  border-left-color: rgba(55, 214, 122, 0.3);
}

[data-theme="studio"] .chat-msg.assistant {
  background: rgba(55, 214, 122, 0.08);
  border-left-color: rgba(55, 214, 122, 0.4);
  color: #1e293b;
}

/* ===========================================
   HORIZON TOGGLE THEME SUPPORT
   =========================================== */
[data-theme="carbon"] .horizon-btns,
[data-theme="midnight"] .horizon-btns,
[data-theme="paper"] .horizon-btns {
  border-color: var(--glass-border);
}

[data-theme="studio"] .horizon-btns {
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="carbon"] .horizon-btn,
[data-theme="midnight"] .horizon-btn,
[data-theme="paper"] .horizon-btn {
  background: var(--glass-bg);
  color: var(--text-muted);
}

[data-theme="studio"] .horizon-btn {
  background: rgba(0, 0, 0, 0.03);
  color: rgba(30, 41, 59, 0.5);
}

[data-theme="carbon"] .horizon-btn:hover,
[data-theme="midnight"] .horizon-btn:hover,
[data-theme="paper"] .horizon-btn:hover {
  background: var(--glass-bg-card);
  color: var(--text-secondary);
}

[data-theme="studio"] .horizon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(30, 41, 59, 0.8);
}

[data-theme="carbon"] .horizon-btn.active,
[data-theme="midnight"] .horizon-btn.active {
  background: rgba(91, 141, 238, 0.2);
  color: #8ab4ff;
}

[data-theme="studio"] .horizon-btn.active {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

[data-theme="paper"] .horizon-btn.active {
  background: rgba(204, 152, 120, 0.2);
  color: #CC9878;
}

[data-theme="studio"] .horizon-label {
  color: rgba(30, 41, 59, 0.5);
}

/* ===========================================
   TILE HEADER THEME SUPPORT
   =========================================== */
[data-theme="studio"] .tile-header {
  color: rgba(30, 41, 59, 0.5);
}

/* ===========================================
   FORECAST TITLE THEME SUPPORT
   =========================================== */
[data-theme="studio"] .forecast-title {
  color: #1e293b;
}