/* ==========================================================================
   DESIGN SYSTEM 6.0 — GEMINI CANVAS UI (Web Code Canvas + Generative UI)
   Tokens, Glassmorphism, Aurora Prisms, Vibrant Dual-Mode & Observability
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Default Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;

  /* Base Canvas Colors (Dark Mode Default: Obsidian Void) */
  --canvas-bg: #07090E;
  --surface-base: #0B0F19;
  --surface-card: #0F1626;
  --surface-elevated: #151F36;
  --surface-hover: #1C2A47;
  --surface-overlay: rgba(11, 15, 25, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-highlight: rgba(255, 255, 255, 0.25);

  --text-main: #F1F5F9;
  --text-muted: #94A3B8;
  --text-subtle: #64748B;
  --text-inverse: #07090E;

  /* Signature Gemini Aurora Accent Colors */
  --gemini-cyan: #00D2FF;
  --gemini-indigo: #6366F1;
  --gemini-purple: #8B5CF6;
  --gemini-pink: #EC4899;
  --gemini-emerald: #10B981;
  --gemini-amber: #F59E0B;
  --gemini-blue: #2563EB;
  --gemini-teal: #14B8A6;
  --gemini-lime: #84CC16;
  --gemini-orange: #F97316;
  --gemini-red: #EF4444;

  /* Active Theme Variables (Default: Cyan) */
  --accent: var(--gemini-cyan);
  --accent-rgb: 0, 210, 255;
  --accent-glow: rgba(0, 210, 255, 0.35);
  --accent-subtle: rgba(0, 210, 255, 0.12);
  --accent-border: rgba(0, 210, 255, 0.3);

  /* Shadows */
  --shadow-canvas: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px -3px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   LIGHT MODE OVERRIDES — VIBRANT, COLORFUL & LUMINOUS
   -------------------------------------------------------------------------- */
[data-mode="light"] {
  --canvas-bg: #E9EEF7;
  --surface-base: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-elevated: #F6F8FC;
  --surface-hover: #EBF1FA;
  --surface-overlay: rgba(255, 255, 255, 0.94);

  --border-subtle: rgba(15, 23, 42, 0.11);
  --border-medium: rgba(15, 23, 42, 0.2);
  --border-highlight: rgba(99, 102, 241, 0.45);

  --text-main: #0B1220;
  --text-muted: #334155;
  --text-subtle: #64748B;
  --text-inverse: #FFFFFF;

  --shadow-canvas: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -18px rgba(15, 23, 42, 0.22);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 26px -14px rgba(15, 23, 42, 0.28);
  --shadow-glow: 0 4px 20px -2px rgba(0, 150, 190, 0.4);
}

/* Light canvas keeps the aurora visible so the page never reads as flat white */
[data-mode="light"] .gemini-aurora-bg { opacity: 1; }

/* --------------------------------------------------------------------------
   THEME PALETTE OVERRIDES
   -------------------------------------------------------------------------- */
[data-theme="indigo"] { --accent: #6366F1; --accent-rgb: 99, 102, 241; --accent-glow: rgba(99, 102, 241, 0.4); --accent-subtle: rgba(99, 102, 241, 0.16); --accent-border: rgba(99, 102, 241, 0.4); }
[data-theme="purple"] { --accent: #8B5CF6; --accent-rgb: 139, 92, 246; --accent-glow: rgba(139, 92, 246, 0.4); --accent-subtle: rgba(139, 92, 246, 0.16); --accent-border: rgba(139, 92, 246, 0.4); }
[data-theme="pink"]   { --accent: #EC4899; --accent-rgb: 236, 72, 153; --accent-glow: rgba(236, 72, 153, 0.4); --accent-subtle: rgba(236, 72, 153, 0.16); --accent-border: rgba(236, 72, 153, 0.4); }
[data-theme="emerald"]{ --accent: #10B981; --accent-rgb: 16, 185, 129; --accent-glow: rgba(16, 185, 129, 0.4); --accent-subtle: rgba(16, 185, 129, 0.16); --accent-border: rgba(16, 185, 129, 0.4); }
[data-theme="amber"]  { --accent: #F59E0B; --accent-rgb: 245, 158, 11;  --accent-glow: rgba(245, 158, 11, 0.4);  --accent-subtle: rgba(245, 158, 11, 0.16);  --accent-border: rgba(245, 158, 11, 0.4); }
[data-theme="blue"]   { --accent: #2563EB; --accent-rgb: 37, 99, 235;  --accent-glow: rgba(37, 99, 235, 0.4);  --accent-subtle: rgba(37, 99, 235, 0.16);  --accent-border: rgba(37, 99, 235, 0.4); }
[data-theme="teal"]   { --accent: #14B8A6; --accent-rgb: 20, 184, 166; --accent-glow: rgba(20, 184, 166, 0.4); --accent-subtle: rgba(20, 184, 166, 0.16); --accent-border: rgba(20, 184, 166, 0.4); }
[data-theme="lime"]   { --accent: #84CC16; --accent-rgb: 132, 204, 22; --accent-glow: rgba(132, 204, 22, 0.4); --accent-subtle: rgba(132, 204, 22, 0.16); --accent-border: rgba(132, 204, 22, 0.4); }
[data-theme="orange"] { --accent: #F97316; --accent-rgb: 249, 115, 22; --accent-glow: rgba(249, 115, 22, 0.4); --accent-subtle: rgba(249, 115, 22, 0.16); --accent-border: rgba(249, 115, 22, 0.4); }
[data-theme="red"]    { --accent: #EF4444; --accent-rgb: 239, 68, 68;  --accent-glow: rgba(239, 68, 68, 0.4);  --accent-subtle: rgba(239, 68, 68, 0.16);  --accent-border: rgba(239, 68, 68, 0.4); }

/* --------------------------------------------------------------------------
   LIGHT MODE — THEME TOKENS (FAIXA 800)
   No branco os tokens neon de 500 piscam junto com as utilities que já
   vivem em 700-900; aqui o acento desce pra faixa 800 (densa, editorial).
   Especificidade (0,2,0) precisa vencer [data-theme] (0,1,0).
   -------------------------------------------------------------------------- */

/* Default: Cyan (sem [data-theme], o :root cai em gemini-cyan) */
[data-mode="light"] {
  --gemini-cyan: #155E75;
  --gemini-indigo: #3730A3;
  --gemini-purple: #6B21A8;
  --gemini-pink: #9D174D;
  --gemini-emerald: #065F46;
  --gemini-amber: #92400E;
  --gemini-blue: #1E40AF;
  --gemini-teal: #115E59;
  --gemini-lime: #3F6212;
  --gemini-orange: #9A3412;
  --gemini-red: #991B1B;

  --accent: var(--gemini-cyan);
  --accent-rgb: 21, 94, 117;
  --accent-glow: rgba(21, 94, 117, 0.4);
  --accent-subtle: rgba(21, 94, 117, 0.14);
  --accent-border: rgba(21, 94, 117, 0.4);

  --border-highlight: rgba(21, 94, 117, 0.45);
  --shadow-glow: 0 4px 20px -2px rgba(21, 94, 117, 0.45);
}

/* Temas escolhidos — hexes da faixa 800 de cada matiz */
[data-mode="light"][data-theme="indigo"] { --accent: #3730A3; --accent-rgb: 55, 48, 163; --accent-glow: rgba(55, 48, 163, 0.4); --accent-subtle: rgba(55, 48, 163, 0.16); --accent-border: rgba(55, 48, 163, 0.4); }
[data-mode="light"][data-theme="purple"] { --accent: #6B21A8; --accent-rgb: 107, 33, 168; --accent-glow: rgba(107, 33, 168, 0.4); --accent-subtle: rgba(107, 33, 168, 0.16); --accent-border: rgba(107, 33, 168, 0.4); }
[data-mode="light"][data-theme="pink"]   { --accent: #9D174D; --accent-rgb: 157, 23, 77; --accent-glow: rgba(157, 23, 77, 0.4); --accent-subtle: rgba(157, 23, 77, 0.16); --accent-border: rgba(157, 23, 77, 0.4); }
[data-mode="light"][data-theme="emerald"]{ --accent: #065F46; --accent-rgb: 6, 95, 70; --accent-glow: rgba(6, 95, 70, 0.4); --accent-subtle: rgba(6, 95, 70, 0.16); --accent-border: rgba(6, 95, 70, 0.4); }
[data-mode="light"][data-theme="amber"]  { --accent: #92400E; --accent-rgb: 146, 64, 14; --accent-glow: rgba(146, 64, 14, 0.4); --accent-subtle: rgba(146, 64, 14, 0.16); --accent-border: rgba(146, 64, 14, 0.4); }
[data-mode="light"][data-theme="blue"]   { --accent: #1E40AF; --accent-rgb: 30, 64, 175; --accent-glow: rgba(30, 64, 175, 0.4); --accent-subtle: rgba(30, 64, 175, 0.16); --accent-border: rgba(30, 64, 175, 0.4); }
[data-mode="light"][data-theme="teal"]   { --accent: #115E59; --accent-rgb: 17, 94, 89; --accent-glow: rgba(17, 94, 89, 0.4); --accent-subtle: rgba(17, 94, 89, 0.16); --accent-border: rgba(17, 94, 89, 0.4); }
[data-mode="light"][data-theme="lime"]   { --accent: #3F6212; --accent-rgb: 63, 98, 18; --accent-glow: rgba(63, 98, 18, 0.4); --accent-subtle: rgba(63, 98, 18, 0.16); --accent-border: rgba(63, 98, 18, 0.4); }
[data-mode="light"][data-theme="orange"] { --accent: #9A3412; --accent-rgb: 154, 52, 18; --accent-glow: rgba(154, 52, 18, 0.4); --accent-subtle: rgba(154, 52, 18, 0.16); --accent-border: rgba(154, 52, 18, 0.4); }
[data-mode="light"][data-theme="red"]    { --accent: #991B1B; --accent-rgb: 153, 27, 27; --accent-glow: rgba(153, 27, 27, 0.4); --accent-subtle: rgba(153, 27, 27, 0.16); --accent-border: rgba(153, 27, 27, 0.4); }

/* Acento virou escuro: texto sobre ele precisa inverter pra branco.
   Especificidade (0,2,0) pra vencer as regras base .accent-fill/.on-accent
   (0,1,0) que vêm mais pra baixo no stylesheet. */
[data-mode="light"] .accent-fill,
[data-mode="light"] .on-accent { color: #FFFFFF; }

/* Canvas de código no light: fundo segue escuro (highlight de syntax),
   só a borda acompanha o acento 800 — ver bloco após a regra base. */

/* --------------------------------------------------------------------------
   FONT PRESETS
   -------------------------------------------------------------------------- */
[data-font="jakarta"] { --font-body: 'Plus Jakarta Sans', sans-serif; --font-heading: 'Plus Jakarta Sans', sans-serif; }
[data-font="poppins"] { --font-body: 'Poppins', sans-serif; --font-heading: 'Poppins', sans-serif; }
[data-font="fira"]    { --font-body: 'Inter', sans-serif; --font-heading: 'Outfit', sans-serif; --font-mono: 'Fira Code', monospace; }

/* --------------------------------------------------------------------------
   BASE STYLES
   -------------------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: var(--canvas-bg);
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   GEMINI GENERATIVE CANVAS UTILITIES & GLASSMORPHISM
   -------------------------------------------------------------------------- */
.gemini-glass {
  background: var(--surface-overlay);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-canvas);
}

.gemini-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.gemini-card-interactive {
  cursor: pointer;
}

.gemini-gradient-text {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--accent) 50%, #A855F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-mode="light"] .gemini-gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #3730A3 45%, #9D174D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Aurora Ambient Glow Blobs */
.gemini-aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.75;
}

.gemini-aurora-blob-1 {
  position: absolute;
  top: -10%;
  right: 10%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(60px);
  animation: aurora-float 20s infinite alternate ease-in-out;
}

.gemini-aurora-blob-2 {
  position: absolute;
  bottom: 5%;
  left: -5%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.35) 0%, rgba(139, 92, 246, 0.22) 45%, transparent 70%);
  filter: blur(70px);
  animation: aurora-float 25s infinite alternate-reverse ease-in-out;
}

/* Third prism: emerald → gold, keeps the canvas chromatically alive */
.gemini-aurora-blob-3 {
  position: absolute;
  top: 42%;
  left: 38%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.26) 0%, rgba(245, 158, 11, 0.16) 45%, transparent 70%);
  filter: blur(85px);
  animation: aurora-float 28s infinite alternate ease-in-out;
}

[data-mode="light"] .gemini-aurora-blob-1 {
  background: radial-gradient(circle, rgba(21, 94, 117, 0.5) 0%, rgba(55, 48, 163, 0.34) 45%, transparent 70%);
  filter: blur(75px);
}

[data-mode="light"] .gemini-aurora-blob-2 {
  background: radial-gradient(circle, rgba(157, 23, 77, 0.45) 0%, rgba(107, 33, 168, 0.3) 45%, transparent 70%);
  filter: blur(80px);
}

[data-mode="light"] .gemini-aurora-blob-3 {
  background: radial-gradient(circle, rgba(6, 95, 70, 0.4) 0%, rgba(146, 64, 14, 0.24) 45%, transparent 70%);
  filter: blur(90px);
}

@keyframes aurora-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(45px, -35px) scale(1.1); }
  100% { transform: translate(-35px, 45px) scale(0.95); }
}

/* Shimmer Loading / AI Generation Effect */
@keyframes gemini-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.shimmer-active {
  position: relative;
  overflow: hidden;
}

.shimmer-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  animation: gemini-shimmer 1.8s infinite;
}

/* --------------------------------------------------------------------------
   DESIGN SYSTEM UTILITIES
   -------------------------------------------------------------------------- */
/* `shadow-glow` is used all over the markup (cards, badges, buttons) but was
   never defined as a class, so every glow silently rendered as nothing. */
.shadow-glow {
  box-shadow: var(--shadow-glow);
}

.shadow-glow-sm {
  box-shadow: 0 0 14px -4px var(--accent-glow);
}

/* Light: acento virou escuro (faixa 800), entao glow denso em vez de neon */
[data-mode="light"] .shadow-glow-sm { box-shadow: 0 0 14px -4px rgba(21, 94, 117, 0.4); }

/* Accent-colored left rail for vertical tabs (follows the active palette) */
.accent-side {
  border-left-color: var(--accent);
}

.accent-fill {
  background-color: var(--accent);
  color: #05070C;
  box-shadow: 0 8px 22px -8px var(--accent-glow);
}

/* Texto sobre fundo de acento — no dark o acento é neon (texto escuro),
   no light ele desce pra faixa 800 (texto branco) */
.on-accent {
  color: #05070C;
}

.accent-fill:hover {
  filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   CODE CANVAS STYLES
   -------------------------------------------------------------------------- */
.code-canvas-box {
  background: #060911;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: #E2E8F0;
  position: relative;
  overflow: hidden;
}

[data-mode="light"] .code-canvas-box {
  background: #090D1A;
  border: 1px solid rgba(21, 94, 117, 0.28);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
}

.code-canvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

/* --------------------------------------------------------------------------
   APP LAYOUT & DESKTOP COLLAPSE
   -------------------------------------------------------------------------- */
.ds-app {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.ds-sidebar-wrapper {
  width: 270px;
  flex-shrink: 0;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 40;
}

body.sidebar-collapsed .ds-sidebar-wrapper {
  width: 82px;
}

.ds-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: all 0.28s ease;
}

@media (max-width: 1024px) {
  .ds-sidebar-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  body.sidebar-mobile-open .ds-sidebar-wrapper {
    transform: translateX(0);
  }
}

/* ==============================================================
   LIGHT MODE — gradientes sem neon
   No branco as paradas vivas piscam demais; as utilities de
   destaque agora vivem em 700-900 e aqui são pinadas no stop 900
   (profundas, editoriais). O dark mantém o irisado vivo.
   ============================================================ */

[data-mode="light"] .from-cyan-700 {
  --tw-gradient-from: #164e63;
  --tw-gradient-to: rgb(22 78 99 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-cyan-800 {
  --tw-gradient-from: #164e63;
  --tw-gradient-to: rgb(22 78 99 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-blue-800 {
  --tw-gradient-from: #1e3a8a;
  --tw-gradient-to: rgb(30 58 138 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-blue-900 {
  --tw-gradient-from: #1e3a8a;
  --tw-gradient-to: rgb(30 58 138 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-indigo-800 {
  --tw-gradient-from: #312e81;
  --tw-gradient-to: rgb(49 46 129 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-indigo-900 {
  --tw-gradient-from: #312e81;
  --tw-gradient-to: rgb(49 46 129 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-violet-700 {
  --tw-gradient-from: #4c1d95;
  --tw-gradient-to: rgb(76 29 149 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-violet-800 {
  --tw-gradient-from: #4c1d95;
  --tw-gradient-to: rgb(76 29 149 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-fuchsia-800 {
  --tw-gradient-from: #701a75;
  --tw-gradient-to: rgb(112 26 117 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-pink-800 {
  --tw-gradient-from: #831843;
  --tw-gradient-to: rgb(131 24 67 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-rose-700 {
  --tw-gradient-from: #881337;
  --tw-gradient-to: rgb(136 19 55 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-rose-800 {
  --tw-gradient-from: #881337;
  --tw-gradient-to: rgb(136 19 55 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-red-900 {
  --tw-gradient-from: #7f1d1d;
  --tw-gradient-to: rgb(127 29 29 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-emerald-700 {
  --tw-gradient-from: #064e3b;
  --tw-gradient-to: rgb(6 78 59 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-emerald-900 {
  --tw-gradient-from: #064e3b;
  --tw-gradient-to: rgb(6 78 59 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-teal-800 {
  --tw-gradient-from: #134e4a;
  --tw-gradient-to: rgb(19 78 74 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-teal-900 {
  --tw-gradient-from: #134e4a;
  --tw-gradient-to: rgb(19 78 74 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-amber-700 {
  --tw-gradient-from: #78350f;
  --tw-gradient-to: rgb(120 53 15 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-orange-900 {
  --tw-gradient-from: #7c2d12;
  --tw-gradient-to: rgb(124 45 18 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .from-lime-700 {
  --tw-gradient-from: #365314;
  --tw-gradient-to: rgb(54 83 20 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
[data-mode="light"] .to-cyan-700 { --tw-gradient-to: rgb(22 78 99 / 0); }
[data-mode="light"] .to-cyan-800 { --tw-gradient-to: rgb(22 78 99 / 0); }
[data-mode="light"] .to-blue-800 { --tw-gradient-to: rgb(30 58 138 / 0); }
[data-mode="light"] .to-blue-900 { --tw-gradient-to: rgb(30 58 138 / 0); }
[data-mode="light"] .to-indigo-800 { --tw-gradient-to: rgb(49 46 129 / 0); }
[data-mode="light"] .to-indigo-900 { --tw-gradient-to: rgb(49 46 129 / 0); }
[data-mode="light"] .to-violet-700 { --tw-gradient-to: rgb(76 29 149 / 0); }
[data-mode="light"] .to-violet-800 { --tw-gradient-to: rgb(76 29 149 / 0); }
[data-mode="light"] .to-fuchsia-800 { --tw-gradient-to: rgb(112 26 117 / 0); }
[data-mode="light"] .to-pink-800 { --tw-gradient-to: rgb(131 24 67 / 0); }
[data-mode="light"] .to-rose-700 { --tw-gradient-to: rgb(136 19 55 / 0); }
[data-mode="light"] .to-rose-800 { --tw-gradient-to: rgb(136 19 55 / 0); }
[data-mode="light"] .to-red-900 { --tw-gradient-to: rgb(127 29 29 / 0); }
[data-mode="light"] .to-emerald-700 { --tw-gradient-to: rgb(6 78 59 / 0); }
[data-mode="light"] .to-emerald-900 { --tw-gradient-to: rgb(6 78 59 / 0); }
[data-mode="light"] .to-teal-800 { --tw-gradient-to: rgb(19 78 74 / 0); }
[data-mode="light"] .to-teal-900 { --tw-gradient-to: rgb(19 78 74 / 0); }
[data-mode="light"] .to-amber-700 { --tw-gradient-to: rgb(120 53 15 / 0); }
[data-mode="light"] .to-orange-900 { --tw-gradient-to: rgb(124 45 18 / 0); }
[data-mode="light"] .to-lime-700 { --tw-gradient-to: rgb(54 83 20 / 0); }

[data-mode="light"] .via-blue-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a, var(--tw-gradient-to);
}
[data-mode="light"] .via-indigo-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #312e81, var(--tw-gradient-to);
}
[data-mode="light"] .via-pink-800 {
  --tw-gradient-stops: var(--tw-gradient-from), #831843, var(--tw-gradient-to);
}
[data-mode="light"] .via-cyan-700 {
  --tw-gradient-stops: var(--tw-gradient-from), #164e63, var(--tw-gradient-to);
}

/* Texto dos botões com gradiente: no light, sempre claro sobre o tom profundo */
[data-mode="light"] button.bg-gradient-to-r.text-black,
[data-mode="light"] button.bg-gradient-to-tr.text-black { color: #fff; }

/* Glows neon cortados no light (quase invisíveis em fundo branco) */
[data-mode="light"] .shadow-cyan-800\/40, [data-mode="light"] .shadow-cyan-800\/50, [data-mode="light"] .shadow-cyan-800\/70,
[data-mode="light"] .shadow-indigo-800\/40, [data-mode="light"] .shadow-violet-800\/40, [data-mode="light"] .shadow-pink-800\/40,
[data-mode="light"] .shadow-emerald-800\/40, [data-mode="light"] .shadow-amber-800\/40, [data-mode="light"] .shadow-rose-800\/40,
[data-mode="light"] .shadow-lime-800\/40, [data-mode="light"] .shadow-blue-800\/40, [data-mode="light"] .shadow-red-800\/40,
[data-mode="light"] .shadow-orange-800\/40, [data-mode="light"] .shadow-teal-800\/40, [data-mode="light"] .shadow-purple-800\/40 {
  --tw-shadow-color: rgb(15 23 42 / 0.16);
}


/* ==========================================================================
   Web components — display dos hosts
   Custom elements sem regra ficam `inline` e margens verticais (space-y-*,
   mb-*) são IGNORADAS. Block-level abaixo; componentes inline/inline-flex
   (ui-badge, ui-toggle, ui-tooltip, ui-popover) continuam por conta própria.
   ========================================================================== */
ui-card, ui-alert, ui-stat-card, ui-progress, ui-list-item,
ui-accordion, ui-form-input, ui-calendar, ui-canvas,
ui-toast-container, ui-modal, ui-drawer {
  display: block;
}