/* ============================================================
   NEXUS DESIGN SYSTEM — MATRIZ COMPLETA DE DESIGN TOKENS (100% COVERAGE)
   Cliente: CAZULA DIGITAL MARKETING
   Padrão: W3C DTCG / Big Tech Standard (Tailwind v4 / Radix / Apple HIG)
============================================================ */

:root {
  /* ── 1. BRAND MATRIX (ESCALA TONAL 50 A 950) ── */
  --nexus-primary: #0077C8;
  --nexus-primary-hover: #0077C8;
  --nexus-primary-rgb: 0, 119, 200;
  --nexus-primary-50: #EBF7FF;
  --nexus-primary-100: #CCEBFF;
  --nexus-primary-200: #99D6FF;
  --nexus-primary-300: #66C2FF;
  --nexus-primary-400: #33ADFF;
  --nexus-primary-500: #0099FF;
  --nexus-primary-600: #007ACC;
  --nexus-primary-700: #005C99;
  --nexus-primary-800: #003D66;
  --nexus-primary-900: #00253D;
  --nexus-primary-950: #00121F;

  /* ── 2. SECONDARY & ACCENT MATRIX ── */
  --nexus-secondary: #0F172A;
  --nexus-secondary-50: #F0F3FA;
  --nexus-secondary-100: #DAE1F1;
  --nexus-secondary-200: #B4C2E4;
  --nexus-secondary-500: #4468BB;
  --nexus-secondary-700: #293E70;
  --nexus-secondary-900: #10192D;
  --nexus-secondary-950: #080C16;

  --nexus-accent: #00A3FF;
  --nexus-accent-50: #EBF8FF;
  --nexus-accent-500: #00A2FF;
  --nexus-accent-900: #00273D;

  /* ── 3. SUPERFÍCIES, FUNDOS & ELEVAÇÃO MULTICAMADA (base: tokens.base.json) ── */
  --nexus-bg-canvas: #060913;
  --nexus-bg-subtle: #090E1D;
  --nexus-surface-base: #0B1122;
  --nexus-surface-card: linear-gradient(180deg, rgba(16, 24, 46, 0.85) 0%, rgba(10, 15, 30, 0.92) 100%);
  --nexus-surface-card-hover: linear-gradient(180deg, rgba(23, 34, 64, 0.94) 0%, rgba(14, 21, 44, 0.96) 100%);
  --nexus-surface-overlay: rgba(6, 9, 19, 0.94);
  --nexus-surface-glass: rgba(16, 24, 48, 0.72);
  --nexus-surface-inverse: #FFFFFF;

  /* ── 4. BORDAS, DIVISORES & FOCUS RINGS (base: tokens.base.json) ── */
  --nexus-border-subtle: rgba(255, 255, 255, 0.09);
  --nexus-border-default: rgba(255, 255, 255, 0.16);
  --nexus-border-strong: rgba(255, 255, 255, 0.28);
  --nexus-border-brand: rgba(var(--nexus-primary-rgb), 0.55);
  --nexus-border-focus: #00A3FF;
  --nexus-ring-focus: 0 0 0 3px rgba(var(--nexus-primary-rgb), 0.35);

  /* ── 5. TIPOGRAFIA & CONTRASTE WCAG (base: tokens.base.json) ── */
  --nexus-font-display: 'Outfit, sans-serif, sans-serif', sans-serif;
  --nexus-font-body: 'Inter, sans-serif', sans-serif;
  --nexus-font-script: 'Dancing Script', cursive;
  --nexus-font-mono: 'JetBrains Mono, monospace', monospace;

  --nexus-text-title: #ffffff;
  --nexus-text-body: #E2E6F0;
  --nexus-text-muted: #8E96A8;
  --nexus-text-faint: #64719A;
  --nexus-text-on-primary: #FFFFFF;
  --nexus-text-on-secondary: #0F172A;

  /* ── 6. SOMBRAS DE ELEVAÇÃO FÍSICA & GLOWS (base: tokens.base.json) ── */
  --nexus-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
  --nexus-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --nexus-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --nexus-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --nexus-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
  --nexus-shadow-2xl: 0 36px 90px rgba(0, 0, 0, 0.65);
  --nexus-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.35);

  --nexus-glow-primary: 0 0 28px rgba(var(--nexus-primary-rgb), 0.45);
  --nexus-glow-secondary: 0 0 24px rgba(244, 162, 97, 0.4);
  --nexus-glow-accent: 0 0 20px rgba(79, 209, 255, 0.5);

  /* ── 7. GRADIENTES DE AÇÃO & PROFUNDIDADE ── */
  --nexus-gradient-cta: linear-gradient(135deg, #0077C8 0%, #0F172A 100%);
  --nexus-gradient-hero: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
  --nexus-gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  --nexus-gradient-dark: linear-gradient(180deg, #070B18 0%, #070F30 100%);
  --nexus-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);

  /* ── 8. RAIOS DE CURVATURA (base: tokens.base.json) ── */
  --nexus-radius-xs: 4px;
  --nexus-radius-sm: 8px;
  --nexus-radius-md: 14px;
  --nexus-radius-lg: 20px;
  --nexus-radius-xl: 32px;
  --nexus-radius-full: 9999px;

  /* ── 9. CORES SEMÂNTICAS DE FEEDBACK (base: tokens.base.json, WCAG 2.2) ── */
  --nexus-success: #4caf7d;
  --nexus-success-bg: rgba(76, 175, 125, 0.12);
  --nexus-warning: #e0a750;
  --nexus-warning-bg: rgba(224, 167, 80, 0.12);
  --nexus-danger: #e2685f;
  --nexus-danger-bg: rgba(226, 104, 95, 0.12);
  --nexus-info: #3B82F6;
  --nexus-info-bg: rgba(59, 130, 246, 0.15);

  /* ── 10. TRANSIÇÕES & TIMINGS (base: tokens.base.json) ── */
  --nexus-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --nexus-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --nexus-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 11. ESPAÇAMENTO — ESCALA 8PT (base: tokens.base.json) ── */
  --nexus-space-1: 4px;
  --nexus-space-2: 8px;
  --nexus-space-3: 16px;
  --nexus-space-4: 24px;
  --nexus-space-5: 32px;
  --nexus-space-6: 48px;
  --nexus-space-7: 64px;
  --nexus-space-8: 96px;

  /* ── 12. GLASSMORPHISM & VARIANTES DE COR DERIVADAS DA MARCA ── */
  --nexus-glass: #0F1629CC;
  --nexus-glass-hover: #16203BD9;
  --nexus-glass-border: rgba(255, 255, 255, 0.08);
  --nexus-glass-border-strong: rgba(255, 255, 255, 0.15);
  --nexus-glass-blur: 16px;

  --nexus-primary-glow: #0077C866;
  --nexus-primary-bg: #0077C81F;
  --nexus-primary-contrast-text: #0C1B4D;

  --nexus-accent-hover: #3DB8FF;
  --nexus-accent-glow: #00A3FF66;
  --nexus-accent-bg: #00A3FF1A;

  --nexus-gold: #0077C8;
  --nexus-gold-hover: #005994;
  --nexus-gold-glow: #0077C866;
  --nexus-gold-bg: #0077C81F;

  --nexus-navy: #0C1B4D;
  --nexus-navy-deep: #070F30;

  --nexus-shadow-glow: 0 0 30px var(--nexus-primary-glow);

  /* Nomes curtos legados (index.html/reset.css usam a forma sem -canvas/-subtle) */
  --nexus-bg: var(--nexus-bg-canvas);
  --nexus-bg-alt: var(--nexus-bg-subtle);
  --nexus-surface: var(--nexus-surface-base);
  --nexus-surface-hover: #16203B;
  --nexus-surface-active: #0C1B4D;

  /* ── 13. COMPATIBILIDADE LEGADA (--brand-*, sem prefixo) ──
     Nomes consumidos por index.html/components.css de cada cliente.
     Todos são aliases dos tokens --nexus-* acima — uma única fonte,
     sem valor duplicado à mão. */
  --brand-primary: var(--nexus-primary);
  --brand-primary-hover: var(--nexus-primary-hover);
  --brand-primary-glow: var(--nexus-primary-glow);
  --brand-primary-bg: var(--nexus-primary-bg);
  --brand-accent: var(--nexus-accent);
  --brand-secondary: var(--nexus-secondary);
  --brand-navy: var(--nexus-navy);
  --brand-navy-deep: var(--nexus-navy-deep);
  --brand-gradient-gold: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
  --brand-gradient-hero: linear-gradient(135deg, #070B18 0%, #0C1B4D 45%, #070F30 100%);
  --brand-gradient-blue: linear-gradient(135deg, #00A3FF 0%, #66C7FF 100%);
  --brand-gradient: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
  --surface-gold-border: #0077C859;
  --surface-blue-border: #00A3FF59;
  --surface-border: var(--nexus-border-subtle);
  --light: var(--nexus-surface-base);
  --white: #FFFFFF;
  --text-title: var(--nexus-text-title);
  --text: var(--nexus-text-body);
  --radius-md: var(--nexus-radius-md);
  --radius-lg: var(--nexus-radius-lg);
  --radius-xl: var(--nexus-radius-xl);
  --radius-full: var(--nexus-radius-full);
  --shadow-gold: 0 4px 20px #0077C84D;
  --shadow-lg: var(--nexus-shadow-lg);
  --transition-normal: var(--nexus-transition-normal);
  --font-display: var(--nexus-font-display);
  --font-body: var(--nexus-font-body);
  --font-brand: var(--nexus-font-display);
  --font-script: var(--nexus-font-script);

  /* ── 14. ALIASES --cazula-* (consumidos por main.css, reset.css, animations.css) ──
     O main.css usa EXCLUSIVAMENTE a família --cazula-*.
     Todos mapeados para os tokens --nexus-* oficiais. */

  /* Cores da Marca */
  --cazula-primary: #0077C8;
  --cazula-primary-hover: #0062A6;
  --cazula-accent: #00A3FF;
  --cazula-accent-hover: #3DB8FF;
  --cazula-secondary: #0F172A;
  --cazula-gold: #0077C8;

  /* Fundos & Superfícies */
  --cazula-bg: #070B18;
  --cazula-bg-canvas: #070B18;
  --cazula-bg-subtle: #04060E;
  --cazula-bg-alt: #04060E;
  --cazula-surface: #0F1629;
  --cazula-surface-base: #0F1629;
  --cazula-surface-card: rgba(15, 22, 41, 0.85);
  --cazula-surface-card-hover: rgba(22, 32, 59, 0.95);
  --cazula-surface-glass: rgba(16, 24, 48, 0.65);
  --cazula-surface-overlay: rgba(7, 11, 24, 0.92);

  /* Bordas */
  --cazula-border-subtle: rgba(255, 255, 255, 0.07);
  --cazula-border-default: rgba(255, 255, 255, 0.14);
  --cazula-border-strong: rgba(255, 255, 255, 0.25);
  --cazula-border-brand: rgba(0, 119, 200, 0.5);

  /* Texto */
  --cazula-text-primary: #FFFFFF;
  --cazula-text-secondary: #CBD5E1;
  --cazula-text-muted: #8E96A8;
  --cazula-text-faint: #64719A;
  --cazula-text-on-primary: #FFFFFF;

  /* Tipografia */
  --cazula-font-display: 'Outfit', sans-serif;
  --cazula-font-body: 'Inter', sans-serif;
  --cazula-font-mono: 'JetBrains Mono', monospace;

  /* Sombras */
  --cazula-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
  --cazula-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --cazula-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --cazula-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --cazula-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Raios */
  --cazula-radius-xs: 4px;
  --cazula-radius-sm: 8px;
  --cazula-radius-md: 14px;
  --cazula-radius-lg: 20px;
  --cazula-radius-xl: 32px;
  --cazula-radius-full: 9999px;

  /* Espaçamento — Escala 8pt */
  --cazula-space-1: 4px;
  --cazula-space-2: 8px;
  --cazula-space-3: 16px;
  --cazula-space-4: 24px;
  --cazula-space-5: 32px;
  --cazula-space-6: 48px;
  --cazula-space-7: 64px;
  --cazula-space-8: 96px;
  --cazula-space-9: 120px;

  /* Transições */
  --cazula-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cazula-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --cazula-transition-smooth: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cazula-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Gradientes */
  --cazula-gradient-cta: linear-gradient(135deg, #0077C8 0%, #0F172A 100%);
  --cazula-gradient-hero: linear-gradient(135deg, #070B18 0%, #0C1B4D 45%, #070F30 100%);
  --cazula-gradient-brand: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
}

/* ============================================================
   15. ARQUITETURA DE SCROLLBAR DE LUXO (BIG TECH / LINEAR / APPLE)
   Diretriz de Design: Zero scroll desnecessário na página global.
   Rolagem contida estritamente dentro do container do conteúdo.
   Scrollbar flutuante (floating pill), translúcida e com glow reativo.
   ============================================================ */

/* Scrollbar Universal Fluida & Flutuante (WebKit & Blink) */
*::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

*::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
  margin: 4px !important;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 9999px !important;
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
  transition: background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 163, 255, 0.75) !important;
  box-shadow: 0 0 12px rgba(0, 163, 255, 0.55) !important;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #00A3FF !important;
  box-shadow: 0 0 18px rgba(0, 163, 255, 0.85) !important;
}

*::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Fallback Firefox Nativo (não sobrescreve o motor WebKit do Chromium) */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
  }
}

/* ── Comportamento Reativo nos Containers de Rolagem ── */
.cazula-scrollable::-webkit-scrollbar-thumb,
.cazula-scroll-area::-webkit-scrollbar-thumb,
.cazula-content-area::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

.cazula-scrollable:hover::-webkit-scrollbar-thumb,
.cazula-scroll-area:hover::-webkit-scrollbar-thumb,
.cazula-content-area:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.24) !important;
}

.cazula-scrollable::-webkit-scrollbar-thumb:hover,
.cazula-scroll-area::-webkit-scrollbar-thumb:hover,
.cazula-content-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 163, 255, 0.85) !important;
  box-shadow: 0 0 14px rgba(0, 163, 255, 0.6) !important;
}

.cazula-scrollable:hover::-webkit-scrollbar-track,
.cazula-scroll-area:hover::-webkit-scrollbar-track,
.cazula-content-area:hover::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 9999px !important;
}

/* Variante Slim (Para painéis compactos, modais e sidebars) */
.cazula-scroll-slim::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}
.cazula-scroll-slim::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid transparent !important;
}
.cazula-scroll-slim::-webkit-scrollbar-thumb:hover {
  background-color: #00A3FF !important;
  box-shadow: 0 0 8px rgba(0, 163, 255, 0.5) !important;
}

/* Variante Glow (Executiva / Cyberpunk para destaques) */
.cazula-scroll-glow::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0088FF, #00A3FF, #38BDF8) !important;
  border: 1.5px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 10px rgba(0, 163, 255, 0.4) !important;
}
.cazula-scroll-glow::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 16px rgba(0, 163, 255, 0.8) !important;
}

/* Variante Invisível (mantém rolagem com teclado e touch) */
.cazula-scroll-hidden {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.cazula-scroll-hidden::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Classes Utilitárias de Rolagem Contida */
.cazula-app-shell {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100% !important;
  overflow: hidden !important;
}

.cazula-content-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  position: relative !important;
}

.cazula-scrollable {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.cazula-scrollable-x {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain !important;
}

.cazula-scrollable-both {
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

/* Container de tela travada para Workspaces (Zero scroll na janela) */
.cazula-workspace-fixed {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 64px) !important;
  height: calc(100dvh - 64px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ============================================================
   SISTEMA DE DESIGN CORPORATIVO & MATRIZ DE TEMAS CAZULA
   (ESCURO / CLARO / SISTEMA COM TRANSIÇÃO ULTRA SUAVE)
   ============================================================ */

:root, [data-theme="dark"] {
  /* Fundo e Superfícies (Escuro High-End) */
  --nexus-bg-canvas: #060913;
  --nexus-bg-subtle: #0A0F1D;
  --nexus-surface-base: #0B1122;
  --nexus-surface-card: linear-gradient(180deg, rgba(16, 24, 48, 0.85) 0%, rgba(10, 15, 32, 0.92) 100%);
  --nexus-surface-card-hover: linear-gradient(180deg, rgba(23, 34, 68, 0.94) 0%, rgba(14, 21, 44, 0.96) 100%);
  --nexus-surface-overlay: rgba(6, 9, 19, 0.95);
  --nexus-surface-glass: rgba(16, 24, 48, 0.72);
  --nexus-surface-inverse: #FFFFFF;

  /* Bordas e Divisores */
  --nexus-border-subtle: rgba(255, 255, 255, 0.08);
  --nexus-border-default: rgba(255, 255, 255, 0.14);
  --nexus-border-strong: rgba(255, 255, 255, 0.25);
  --nexus-border-brand: rgba(0, 163, 255, 0.45);

  /* Tipografia & Hierarquia */
  --nexus-text-title: #FFFFFF;
  --nexus-text-body: #E2E8F0;
  --nexus-text-muted: #94A3B8;
  --nexus-text-faint: #64748B;

  /* Cores Semânticas de Ação (Vívidas no Escuro) */
  --nexus-primary: #0077C8;
  --nexus-primary-hover: #008CEB;
  --nexus-accent: #00A3FF;
  --nexus-accent-hover: #3DB8FF;
  --nexus-success: #10B981;
  --nexus-success-bg: rgba(16, 185, 129, 0.15);
  --nexus-warning: #F59E0B;
  --nexus-warning-bg: rgba(245, 158, 11, 0.15);
  --nexus-danger: #EF4444;
  --nexus-danger-bg: rgba(239, 68, 68, 0.15);
  --nexus-purple: #8B5CF6;
  --nexus-purple-bg: rgba(139, 92, 246, 0.15);

  /* Sombras & Brilhos (Glows) */
  --nexus-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --nexus-shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 163, 255, 0.35), 0 0 20px rgba(0, 163, 255, 0.15);
  --nexus-glow-brand: 0 0 24px rgba(0, 163, 255, 0.3);

  /* Variáveis de Compatibilidade de Telas */
  --bg-dark: #060913;
  --bg-base: #060913;
  --bg-surface: #0B1122;
  --bg-surface-elevated: linear-gradient(180deg, rgba(23, 34, 64, 0.9) 0%, rgba(14, 21, 44, 0.95) 100%);
  --bg-card: rgba(16, 24, 46, 0.85);
  --bg-card-hover: rgba(24, 34, 64, 0.95);
  --text-main: #FFFFFF;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(0, 163, 255, 0.4);
  --cazula-blue: #00A3FF;
  --cazula-blue-glow: rgba(0, 163, 255, 0.35);

  /* Fundo de Conteúdo Principal */
  --cazula-content-bg: #060913 radial-gradient(1200px circle at 15% 10%, rgba(0, 119, 200, 0.1) 0%, transparent 60%), radial-gradient(900px circle at 85% 85%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);

  /* Componentes UI Dinâmicos */
  --cazula-input-bg: rgba(0, 0, 0, 0.4);
  --cazula-input-border: rgba(255, 255, 255, 0.12);
  --cazula-input-text: #FFFFFF;
  --cazula-deck-bg: linear-gradient(180deg, rgba(16, 23, 44, 0.88) 0%, rgba(10, 15, 30, 0.94) 100%);
  --cazula-deck-border: rgba(255, 255, 255, 0.1);
  --cazula-deck-btn-bg: rgba(255, 255, 255, 0.03);
  --cazula-deck-btn-text: #94A3B8;
  --cazula-deck-btn-active-bg: linear-gradient(135deg, rgba(0, 163, 255, 0.2) 0%, rgba(0, 119, 200, 0.28) 100%);
  --cazula-deck-btn-active-text: #FFFFFF;
  --cazula-deck-btn-active-border: rgba(0, 163, 255, 0.45);
  --cazula-table-th-bg: rgba(10, 16, 32, 0.7);
  --cazula-table-th-color: #94A3B8;
  --cazula-table-border: rgba(255, 255, 255, 0.07);
  --cazula-table-hover: rgba(255, 255, 255, 0.035);
}

[data-theme="light"] {
  /* Fundo e Superfícies (Claro Sleek Minimalist) */
  --nexus-bg-canvas: #F8FAFC;
  --nexus-bg-subtle: #F1F5F9;
  --nexus-surface-base: #FFFFFF;
  --nexus-surface-card: #FFFFFF;
  --nexus-surface-card-hover: #FFFFFF;
  --nexus-surface-overlay: rgba(255, 255, 255, 0.98);
  --nexus-surface-glass: rgba(255, 255, 255, 0.88);
  --nexus-surface-inverse: #0F172A;

  /* Bordas e Divisores */
  --nexus-border-subtle: #E2E8F0;
  --nexus-border-default: #CBD5E1;
  --nexus-border-strong: #94A3B8;
  --nexus-border-brand: rgba(0, 119, 200, 0.45);

  /* Tipografia & Hierarquia (Alto Contraste) */
  --nexus-text-title: #0F172A;
  --nexus-text-body: #334155;
  --nexus-text-muted: #64748B;
  --nexus-text-faint: #94A3B8;

  /* Cores Semânticas de Ação (Calibradas para Fundo Claro) */
  --nexus-primary: #0077C8;
  --nexus-primary-hover: #005E9E;
  --nexus-accent: #0088D6;
  --nexus-accent-hover: #0070B3;
  --nexus-success: #059669;
  --nexus-success-bg: rgba(5, 150, 105, 0.1);
  --nexus-warning: #D97706;
  --nexus-warning-bg: rgba(217, 119, 6, 0.1);
  --nexus-danger: #DC2626;
  --nexus-danger-bg: rgba(220, 38, 38, 0.1);
  --nexus-purple: #7C3AED;
  --nexus-purple-bg: rgba(124, 58, 237, 0.1);

  /* Sombras Elegantes & Tridimensionais */
  --nexus-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 18px -4px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.9);
  --nexus-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 14px 28px -6px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(0, 119, 200, 0.35);
  --nexus-glow-brand: 0 0 20px rgba(0, 119, 200, 0.2);

  /* Variáveis de Compatibilidade de Telas */
  --bg-dark: #F8FAFC;
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --border-subtle: #E2E8F0;
  --border-accent: rgba(0, 119, 200, 0.35);
  --cazula-blue: #0077C8;
  --cazula-blue-glow: rgba(0, 119, 200, 0.2);

  /* Fundo de Conteúdo Principal */
  --cazula-content-bg: #F8FAFC radial-gradient(1200px circle at 15% 10%, rgba(0, 119, 200, 0.05) 0%, transparent 60%), radial-gradient(900px circle at 85% 85%, rgba(139, 92, 246, 0.03) 0%, transparent 60%);

  /* Componentes UI Dinâmicos */
  --cazula-input-bg: #FFFFFF;
  --cazula-input-border: #CBD5E1;
  --cazula-input-text: #0F172A;
  --cazula-deck-bg: #F1F5F9;
  --cazula-deck-border: #E2E8F0;
  --cazula-deck-btn-bg: transparent;
  --cazula-deck-btn-text: #64748B;
  --cazula-deck-btn-active-bg: #FFFFFF;
  --cazula-deck-btn-active-text: #0F172A;
  --cazula-deck-btn-active-border: #CBD5E1;
  --cazula-table-th-bg: #F8FAFC;
  --cazula-table-th-color: #475569;
  --cazula-table-border: #E2E8F0;
  --cazula-table-hover: #F1F5F9;
}

/* ============================================================
   REGRAS GLOBAIS DE ADAPTAÇÃO & NORMALIZAÇÃO TEMÁTICA
   ============================================================ */
html {
  background: var(--nexus-bg-canvas);
  color: var(--nexus-text-body);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background: var(--nexus-bg-canvas);
  color: var(--nexus-text-body);
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blindagem de Viewport exclusiva para Cockpits e App Shells Administrativos com rolagem interna */
html.cazula-app-locked,
body.cazula-app-locked,
body.cazula-admin-body,
body.cockpit-locked {
  overflow: hidden !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
}

.cazula-content-area {
  background: var(--cazula-content-bg) !important;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adaptação Automática de Cards no Modo Claro */
[data-theme="light"] .kpi-card,
[data-theme="light"] .card,
[data-theme="light"] .bento-card,
[data-theme="light"] .panel,
[data-theme="light"] .cazula-card {
  background: var(--nexus-surface-card) !important;
  border-color: var(--nexus-border-subtle) !important;
  box-shadow: var(--nexus-shadow-card) !important;
  color: var(--nexus-text-body) !important;
}

[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .card:hover,
[data-theme="light"] .bento-card:hover,
[data-theme="light"] .panel:hover {
  border-color: var(--nexus-border-brand) !important;
  box-shadow: var(--nexus-shadow-card-hover) !important;
}

/* Adaptação de Títulos e Textos no Modo Claro */
[data-theme="light"] .page-title,
[data-theme="light"] .hero-title,
[data-theme="light"] .card-title,
[data-theme="light"] .section-title,
[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3 {
  color: var(--nexus-text-title) !important;
  -webkit-text-fill-color: initial !important;
}

[data-theme="light"] .page-desc,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .text-muted,
[data-theme="light"] p {
  color: var(--nexus-text-muted);
}

/* Adaptação de Inputs, Selects e Textareas no Modo Claro */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: var(--cazula-input-bg) !important;
  border-color: var(--cazula-input-border) !important;
  color: var(--cazula-input-text) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--nexus-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.15) !important;
}

/* Adaptação do Deck de Abas Mestre no Modo Claro */
[data-theme="light"] .cazula-deck-nav {
  background: var(--cazula-deck-bg) !important;
  border-color: var(--cazula-deck-border) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .cazula-deck-tab {
  color: var(--cazula-deck-btn-text) !important;
}

[data-theme="light"] .cazula-deck-tab:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--nexus-text-title) !important;
}

[data-theme="light"] .cazula-deck-tab.active {
  background: var(--cazula-deck-btn-active-bg) !important;
  color: var(--cazula-deck-btn-active-text) !important;
  border-color: var(--cazula-deck-btn-active-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* Adaptação de Tabelas no Modo Claro */
[data-theme="light"] table th {
  background: var(--cazula-table-th-bg) !important;
  color: var(--cazula-table-th-color) !important;
  border-color: var(--cazula-table-border) !important;
}

[data-theme="light"] table td {
  border-color: var(--cazula-table-border) !important;
  color: var(--nexus-text-body) !important;
}

[data-theme="light"] table tr:hover td {
  background: var(--cazula-table-hover) !important;
}

/* Adaptação de Botões Glass no Modo Claro */
[data-theme="light"] .btn-glass {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--nexus-border-subtle) !important;
  color: var(--nexus-text-body) !important;
}

[data-theme="light"] .btn-glass:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--nexus-text-title) !important;
  border-color: var(--nexus-border-default) !important;
}

/* ============================================================
   ASTRO SPACE UXDS — TOKENS DE STATUS & TELEMETRIA MILITAR/AEROESPACIAL
   Baseado na especificação oficial @astrouxds/tokens (W3C DTCG)
   ============================================================ */
:root {
  /* Cores de Status de Missão Crítica */
  --astro-status-normal: #56F000;
  --astro-status-normal-bg: rgba(86, 240, 0, 0.12);
  --astro-status-normal-border: rgba(86, 240, 0, 0.35);

  --astro-status-standby: #2DCCFF;
  --astro-status-standby-bg: rgba(45, 204, 255, 0.12);
  --astro-status-standby-border: rgba(45, 204, 255, 0.35);

  --astro-status-caution: #FCE83A;
  --astro-status-caution-bg: rgba(252, 232, 58, 0.14);
  --astro-status-caution-border: rgba(252, 232, 58, 0.4);

  --astro-status-serious: #FFB302;
  --astro-status-serious-bg: rgba(255, 179, 2, 0.14);
  --astro-status-serious-border: rgba(255, 179, 2, 0.4);

  --astro-status-critical: #FF3838;
  --astro-status-critical-bg: rgba(255, 56, 56, 0.15);
  --astro-status-critical-border: rgba(255, 56, 56, 0.45);

  --astro-status-off: #A4ABB6;
  --astro-status-off-bg: rgba(164, 171, 182, 0.12);
  --astro-status-off-border: rgba(164, 171, 182, 0.3);

  /* Paleta Científica de Visualização de Dados (Astro Dataviz) */
  --astro-dataviz-1: #00C7CB;
  --astro-dataviz-2: #938BDB;
  --astro-dataviz-3: #4DACFF;
  --astro-dataviz-4: #70DDE0;
  --astro-dataviz-5: #C9C5ED;
  --astro-dataviz-6: #92CBFF;
  --astro-dataviz-7: #A1E9EB;
  --astro-dataviz-8: #B7DCFF;

  /* Superfícies Aeroespaciais de Alta Densidade */
  --astro-surface-space: #101923;
  --astro-surface-panel: #172635;
  --astro-surface-selected: #1C3F5E;
}

/* Badges e Pílulas de Telemetria Astro UXDS */
.astro-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  line-height: 1.2;
}

.astro-status-badge.status-normal {
  color: var(--astro-status-normal);
  background: var(--astro-status-normal-bg);
  border-color: var(--astro-status-normal-border);
}

.astro-status-badge.status-standby {
  color: var(--astro-status-standby);
  background: var(--astro-status-standby-bg);
  border-color: var(--astro-status-standby-border);
}

.astro-status-badge.status-caution {
  color: var(--astro-status-caution);
  background: var(--astro-status-caution-bg);
  border-color: var(--astro-status-caution-border);
}

.astro-status-badge.status-serious {
  color: var(--astro-status-serious);
  background: var(--astro-status-serious-bg);
  border-color: var(--astro-status-serious-border);
}

.astro-status-badge.status-critical {
  color: var(--astro-status-critical);
  background: var(--astro-status-critical-bg);
  border-color: var(--astro-status-critical-border);
}

.astro-status-badge.status-off {
  color: var(--astro-status-off);
  background: var(--astro-status-off-bg);
  border-color: var(--astro-status-off-border);
}

.astro-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ============================================================
   TRANSMUTAÇÃO LINEAR.APP — PADRÃO LUXO DE PROFUNDIDADE & GRAIN
   Base: Extraído via FERRAMENTAS/ASTRO-FORGE/vibe_design_extractor.py
   ============================================================ */
:root {
  --linear-bg-canvas: #08090A;
  --linear-surface-elevated: #111418;
  --linear-border-subtle: rgba(255, 255, 255, 0.08);
  --linear-border-hover: rgba(255, 255, 255, 0.18);
  --linear-glow-cyan: rgba(0, 163, 255, 0.12);
  --linear-glow-purple: rgba(143, 164, 255, 0.10);
}

/* 1. Card Lapidado Linear com Chanfro Superior Sub-Pixel */
.cazula-linear-card {
  background: linear-gradient(180deg, rgba(17, 20, 24, 0.75) 0%, rgba(10, 12, 16, 0.90) 100%);
  border: 1px solid var(--linear-border-subtle);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, box-shadow 200ms ease;
}

.cazula-linear-card:hover {
  border-color: var(--linear-border-hover);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 16px 48px rgba(0, 0, 0, 0.65);
}

/* 2. Textura Analógica de Grain (Linear Style) */
.cazula-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 0);
  background-size: 24px 24px;
}

/* 3. Iluminação Radial de Fundo (Mesh Glow) */
.cazula-glow-mesh {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 163, 255, 0.15) 0%, rgba(143, 164, 255, 0.06) 50%, transparent 100%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* 4. Badge de Alta Precisão (Padrão Linear / Raycast) */
.cazula-linear-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #E2E4E7;
  letter-spacing: 0.02em;
}

[data-theme="light"] .cazula-linear-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 1px 0 #FFFFFF;
}

[data-theme="light"] .cazula-linear-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   5. ANATOMIA CIRÚRGICA DE COMPONENTES (Padrão Big Tech / Emil Kowalski)
   ============================================================ */

/* ── Botão Tátil de Alta Precisão (Luz de Chanfro + Gravidade Física) ── */
.btn-tactile-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  font-family: var(--nexus-font-body, 'Inter', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient(180deg, var(--nexus-primary) 0%, rgba(var(--nexus-primary-rgb), 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--nexus-radius-sm, 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  text-decoration: none;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 140ms ease, background 140ms ease;
  user-select: none;
}

.btn-tactile-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 20px rgba(var(--nexus-primary-rgb), 0.4);
}

.btn-tactile-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-tactile-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  font-family: var(--nexus-font-body, 'Inter', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--nexus-radius-sm, 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), border-color 140ms ease, background 140ms ease;
}

.btn-tactile-secondary:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* ── Card de Superfície com Chanfro (Sub-pixel 1px) ── */
.card-chamfer-surface {
  position: relative;
  background: var(--nexus-surface-card, rgba(16, 24, 46, 0.85));
  border: 1px solid var(--nexus-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--nexus-radius-lg, 18px);
  padding: 1.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 180ms ease;
}

.card-chamfer-surface:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* ── Input de Precisão com Focus Ring Acessível ── */
.input-tactile-field {
  width: 100%;
  padding: 0.65rem 0.95rem;
  background: rgba(4, 7, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--nexus-radius-sm, 8px);
  font-family: var(--nexus-font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  color: #FFFFFF;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.input-tactile-field:focus {
  border-color: var(--nexus-accent, #00A3FF);
  box-shadow: 0 0 0 3px rgba(var(--nexus-primary-rgb), 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ── Badge de Telemetria Mono ── */
.telemetry-mono-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--nexus-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #94A3B8;
}

/* ============================================================
   6. VIBE ENGINE: MATRIZ DE PERSONALIDADES DE DESIGN
   ============================================================ */

/* ── Vibe 1: Linear Dark Tactile ── */
[data-vibe="linear"] {
  --nexus-bg-canvas: #08090C !important;
  --nexus-surface-base: #0F1015 !important;
  --nexus-primary: #5E6AD2 !important;
  --nexus-primary-hover: #717DE0 !important;
  --nexus-primary-rgb: 94, 106, 210 !important;
  --nexus-accent: #7C86DF !important;
  --vibe-glow: rgba(94, 106, 210, 0.35) !important;
  --vibe-border: rgba(94, 106, 210, 0.3) !important;
  --nexus-font-display: 'Inter', sans-serif !important;
}

/* ── Vibe 2: Stripe Corporate Authority ── */
[data-vibe="stripe"] {
  --nexus-bg-canvas: #0A101D !important;
  --nexus-surface-base: #111C30 !important;
  --nexus-primary: #635BFF !important;
  --nexus-primary-hover: #7A73FF !important;
  --nexus-primary-rgb: 99, 91, 255 !important;
  --nexus-accent: #00D4FF !important;
  --vibe-glow: rgba(99, 91, 255, 0.35) !important;
  --vibe-border: rgba(99, 91, 255, 0.3) !important;
  --nexus-font-display: 'Inter', sans-serif !important;
}

/* ── Vibe 3: Raycast macOS Precision ── */
[data-vibe="raycast"] {
  --nexus-bg-canvas: #050505 !important;
  --nexus-surface-base: #121212 !important;
  --nexus-primary: #FF6363 !important;
  --nexus-primary-hover: #FF7B7B !important;
  --nexus-primary-rgb: 255, 99, 99 !important;
  --nexus-accent: #FF9F43 !important;
  --vibe-glow: rgba(255, 99, 99, 0.35) !important;
  --vibe-border: rgba(255, 99, 99, 0.3) !important;
  --nexus-font-mono: 'JetBrains Mono', monospace !important;
}

/* ── Vibe 4: Supabase Hacker Telemetry ── */
[data-vibe="supabase"] {
  --nexus-bg-canvas: #0A0A0A !important;
  --nexus-surface-base: #141414 !important;
  --nexus-primary: #3ECF8E !important;
  --nexus-primary-hover: #52DE9E !important;
  --nexus-primary-rgb: 62, 207, 142 !important;
  --nexus-accent: #24B47E !important;
  --vibe-glow: rgba(62, 207, 142, 0.35) !important;
  --vibe-border: rgba(62, 207, 142, 0.3) !important;
  --nexus-font-mono: 'JetBrains Mono', monospace !important;
}

/* ── Vibe 5: Driftime Luxury Editorial ── */
[data-vibe="driftime"] {
  --nexus-bg-canvas: #0D0F12 !important;
  --nexus-surface-base: #151920 !important;
  --nexus-primary: #C5A059 !important;
  --nexus-primary-hover: #D4B26F !important;
  --nexus-primary-rgb: 197, 160, 89 !important;
  --nexus-accent: #E5C383 !important;
  --vibe-glow: rgba(197, 160, 89, 0.35) !important;
  --vibe-border: rgba(197, 160, 89, 0.3) !important;
}