/* Alcance do scanner. O v4 acha os arquivos sozinho a partir da raiz do git,
   mas isso varreria `docs/` (149 markdowns cheios de exemplo de classe) e
   `tests/` — o CSS engordaria com utilitário que nenhuma tela usa, e um
   `bg-red-500` escrito numa doc viraria regra publicada. `source(none)` desliga
   a descoberta automática e as quatro linhas abaixo repõem EXATAMENTE o
   `content` que o `tailwind.config.ts` declarava. Ao criar pasta nova de UI,
   acrescente-a aqui — senão as classes dela somem sem erro nenhum. */
/* Escuro por atributo, não por classe. Equivale ao `darkMode: ["class",
   "[data-theme='dark']"]` do v3: a forma de duas casas do v3 NÃO acumula com
   `.dark` — ela SUBSTITUI o seletor padrão, e o produto inteiro liga o tema
   por `<html data-theme="dark">` (ver `[data-theme="dark"]` mais abaixo e o
   `color-scheme` no `@layer base`).

   O `:where()` zera a especificidade do seletor de tema, para que `dark:bg-x`
   e `bg-x` continuem competindo só pela ordem em que aparecem — sem ele, todo
   utilitário `dark:` ganharia um ponto de especificidade a mais e venceria
   coisas que no v3 ele não vencia. */
/* ─────────────────────────────────────────────────────────────────────────
   DeskcommCRM — Design System tokens (Sage palette · density Aerada)
   Source of truth: /app/design/lib/tokens.ts (PALETTES.sage)
   Light + dark drawn separately (NOT inverted).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces (light) */
  --color-bg: #eef4e6;
  --color-surface: #ffffff;
  --color-surface-elevated: #f4f9ee;
  --color-overlay: rgba(10, 30, 15, 0.42);

  /* Text (light) */
  --color-text: #0d1a0f;
  --color-text-muted: #55685a;
  --color-text-subtle: #66786a;

  /* Borders (light) */
  --color-border: #d9e4cf;
  --color-border-strong: #b9ccaa;

  /* Accent — Sage (11 stops) */
  --color-accent-50: #f3f6f1;
  --color-accent-100: #e4ebe0;
  --color-accent-200: #c8d6c1;
  --color-accent-300: #a4ba9a;
  --color-accent-400: #82a077;
  --color-accent-500: #8fd11a;
  --color-accent-600: #5f9a0c;
  --color-accent-700: #41573b;
  --color-accent-800: #374731;
  --color-accent-900: #2f3c2b;
  --color-accent-950: #171f15;
  --color-accent: var(--color-accent-600);
  --color-accent-fg: #071003;
  --color-accent-soft: rgba(143, 209, 26, 0.16);
  --color-accent-hover: var(--color-accent-700);

  /* Neutrals — greige (11 stops, light) */
  --color-neutral-50: #eef4e6;
  --color-neutral-100: #e3ecd9;
  --color-neutral-200: #cdd9c2;
  --color-neutral-300: #a9bb9c;
  --color-neutral-400: #8a9e83;
  --color-neutral-500: #66786a;
  --color-neutral-600: #55685a;
  --color-neutral-700: #3f5044;
  --color-neutral-800: #2a3a2e;
  --color-neutral-900: #0d1a0f;
  --color-neutral-950: #050b06;

  /* States (light) */
  --color-success: #5a8a5f;
  --color-success-bg: rgba(90, 138, 95, 0.12);
  --color-success-fg: #41673f;
  --color-warning: #b07a2b;
  --color-warning-bg: rgba(176, 122, 43, 0.12);
  --color-warning-fg: #875a1a;
  --color-error: #a94a3c;
  --color-error-bg: rgba(169, 74, 60, 0.12);
  --color-error-fg: #8a3a2e;
  --color-info: #4a7a93;
  --color-info-bg: rgba(74, 122, 147, 0.12);
  --color-info-fg: #355d72;

  /* Spacing (4-base) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows — desaturated, neutral-based */
  --shadow-xs: 0 1px 2px 0 rgba(20, 18, 14, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(20, 18, 14, 0.05), 0 1px 1px 0 rgba(20, 18, 14, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(20, 18, 14, 0.06), 0 2px 4px -1px rgba(20, 18, 14, 0.04);
  --shadow-lg: 0 12px 32px -6px rgba(20, 18, 14, 0.1), 0 4px 12px -2px rgba(20, 18, 14, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(20, 18, 14, 0.16), 0 8px 16px -4px rgba(20, 18, 14, 0.08);

  /* Density — Aerada */
  --density-row: 56px;
  --density-gap: 24px;
  --density-px: 20px;
  --density-py: 16px;

  /* Motion — os quatro pares canônicos de `docs/design-system/07-motion-language.md`.
     Os nomes daqui são os de lá: `ease-out` = `ease-out-fast` (hover, micro-feedback),
     `ease-in-out` = `ease-base` (fade, cor), `ease-out-slow` = página/modal/gaveta,
     `ease-spring` = pop pontual.

     `--ease-out-slow` e `--duration-spring` faltavam, e a falta não era cosmética:
     a curva `(0.16, 1, 0.3, 1)` é a que a lei MANDA usar em transição de página,
     modal e gaveta, e ela existia só em `app/design/showcase.css`, em
     `app/design/lib/tokens.ts` e em três documentos — em lugar nenhum que o
     produto pudesse consumir. Sem este par a lei era inimplementável, e foi por
     isso que todo overlay ficou sem movimento (ver o bloco de keyframes no fim
     deste arquivo). */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-spring: 420ms;

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 20;
  --z-sticky: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* shadcn-compat aliases (mantém consumers legados funcionando) */
  --background: var(--color-bg);
  --foreground: var(--color-text);
  --card: var(--color-surface);
  --card-foreground: var(--color-text);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-text);
  --primary: var(--color-accent);
  --primary-foreground: var(--color-accent-fg);
  --secondary: var(--color-surface-elevated);
  --secondary-foreground: var(--color-text);
  --muted: var(--color-surface-elevated);
  --muted-foreground: var(--color-text-muted);
  --accent-foreground: var(--color-accent-fg);
  --destructive: var(--color-error);
  --destructive-foreground: #ffffff;
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-accent-500);
  --radius: var(--radius-md);
  /* ---- Agenda · cor de pessoa (8 trilhas) ------------------------------
   * Quem é o dono do compromisso é o eixo visual da grade, e a accent NÃO
   * serve para isso: ela é substituída em runtime pelo revendedor
   * (`<style id="marca-instalacao">` no layout), então uma agenda pintada
   * com ela ficaria monocromática — e azul — na instalação que comprou a
   * marca em azul.
   *
   * OS VALORES SÃO DERIVADOS, NÃO ESCOLHIDOS A OLHO — e a primeira versão
   * destas linhas dizia "os matizes saem de Okabe-Ito", o que a medição
   * desmentiu: eu tinha ajustado tanto a luminosidade que a separação da
   * referência não sobreviveu. Medido no par mais próximo, em OKLab:
   *
   *     versão anterior (azul x petróleo) : 0.0507   <- indistinguíveis
   *     Okabe-Ito, a referência (n=7)     : 0.1558
   *     esta versão, pior par             : 0.1162
   *
   * A régua é a distância OKLab entre os pares, e ela vem da própria
   * referência em vez de um número inventado. Não alcançamos os 0.1558 dela
   * por duas razões declaradas: são OITO trilhas no espaço em que ela põe
   * sete, e o croma fica limitado a 0.13 porque este produto é para quem
   * encara a tela oito horas por dia — a Okabe-Ito não tem essa restrição.
   *
   * Os matizes (30 70 100 190 225 262 300 340) são espalhados de propósito, e
   * não pelo que maximiza a distância: uma busca livre chegou a 0.1155 pondo
   * TRÊS trilhas na faixa dos roxos. Distância mede distinguibilidade e não
   * mede NOMEABILIDADE — "o roxo da Ana" e "o roxo do Bruno" não servem numa
   * equipe. Por isso Telha, Âmbar, Oliva, Turquesa, Azul, Índigo, Violeta,
   * Framboesa: oito palavras diferentes.
   *
   * A faixa 113-165 é vetada: é onde mora a accent Sage (139 graus). Cor de
   * PESSOA não pode ser confundida com cor de ESTADO do sistema.
   *
   * A luminosidade ALTERNA entre vizinhos, que é o truque da Okabe-Ito para
   * separar o azul-céu do azul — e foi exatamente o que a minha versão
   * anterior perdeu ao uniformizar o brilho.
   *
   * MESMO ASSIM, cor nunca é a única informação: todo lugar que usa uma
   * destas trilhas carrega junto a inicial da pessoa.
   *
   * O fundo suave de cada bloco é derivado com `color-mix` no ponto de uso,
   * não duplicado aqui — assim a relação entre a faixa e o fundo é uma só,
   * e não dois hex que envelhecem separados.
   */
  --agenda-pessoa-1: #ac4d40; /* telha */
  --agenda-pessoa-2: #bd7c20; /* âmbar */
  --agenda-pessoa-3: #7e6f01; /* oliva */
  --agenda-pessoa-4: #11a19b; /* turquesa */
  --agenda-pessoa-5: #0b7a9a; /* azul */
  --agenda-pessoa-6: #608bda; /* índigo */
  --agenda-pessoa-7: #7b5bad; /* violeta */
  --agenda-pessoa-8: #cc77b1; /* framboesa */
}

/* ─────────────────────────────────────────────────────────────────────────
   Espelho do tema claro para SUBÁRVORE.

   `:root` casa só o `<html>`. Medido antes de escrever: `grep -c
   'data-theme="light"' app/globals.css` = 0 — ou seja, um `<div
   data-theme="light">` dentro de uma página escura NÃO recebia nenhum token
   claro; herdava os escuros do `<html>` e renderizava uma tela que mente. É
   exatamente o que o preview lado a lado da marca precisa fazer.

   Custom property herdada não tem como voltar ao valor do `:root` dentro de
   uma subárvore (`initial`/`revert` a deixam sem valor, não com o valor de
   cima), então redeclarar é obrigação da linguagem, não escolha. O conjunto
   redeclarado é EXATAMENTE o que `[data-theme="dark"]` sobrescreve — 59
   props — e um teste (`tests/unit/branding-tema-claro-escopavel.test.ts`)
   reprova quando os dois divergem; sem ele a cópia envelhece calada.

   Por que a seletor NÃO é `:root, [data-theme="light"]`, que seria a forma
   óbvia: `extrairRegua` (lib/branding/contraste.ts) acha o bloco claro por
   igualdade exata de seletor (`r.seletor === ":root"`), e a lista o quebraria
   — a régua inteira, e com ela os 37 testes de contraste, deixariam de ser
   extraídos.

   As 11 paradas `--color-accent-NNN` ficam DE FORA de propósito. Elas são
   idênticas nos dois blocos do produto, então omiti-las não muda pixel algum
   aqui; e, na instalação que trocou a cor, a subárvore clara passa a herdar a
   rampa do `<html>` (a do revendedor) em vez de fixar a Sage. Pelo mesmo
   motivo os papéis abaixo mantêm a forma `var(--color-accent-NNN)`.

   Buraco conhecido: `--color-accent-fg` é literal `#ffffff` e, numa subárvore
   clara sob página escura, ficaria preso ao branco mesmo quando a marca exige
   preto. Fechar isso pede um bloco de escopo claro no CSS injetado
   (lib/branding/css.ts), que só ganha consumidor com a tela de marca.
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg: #eef4e6;
  --color-surface: #ffffff;
  --color-surface-elevated: #f4f9ee;
  --color-overlay: rgba(10, 30, 15, 0.42);
  --color-text: #0d1a0f;
  --color-text-muted: #55685a;
  --color-text-subtle: #66786a;
  --color-border: #d9e4cf;
  --color-border-strong: #b9ccaa;
  --color-accent: var(--color-accent-600);
  --color-accent-fg: #071003;
  --color-accent-soft: rgba(143, 209, 26, 0.16);
  --color-accent-hover: var(--color-accent-700);
  --color-neutral-50: #eef4e6;
  --color-neutral-100: #e3ecd9;
  --color-neutral-200: #cdd9c2;
  --color-neutral-300: #a9bb9c;
  --color-neutral-400: #8a9e83;
  --color-neutral-500: #66786a;
  --color-neutral-600: #55685a;
  --color-neutral-700: #3f5044;
  --color-neutral-800: #2a3a2e;
  --color-neutral-900: #0d1a0f;
  --color-neutral-950: #050b06;
  --color-success: #5a8a5f;
  --color-success-bg: rgba(90, 138, 95, 0.12);
  --color-success-fg: #41673f;
  --color-warning: #b07a2b;
  --color-warning-bg: rgba(176, 122, 43, 0.12);
  --color-warning-fg: #875a1a;
  --color-error: #a94a3c;
  --color-error-bg: rgba(169, 74, 60, 0.12);
  --color-error-fg: #8a3a2e;
  --color-info: #4a7a93;
  --color-info-bg: rgba(74, 122, 147, 0.12);
  --color-info-fg: #355d72;
  --shadow-xs: 0 1px 2px 0 rgba(20, 18, 14, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(20, 18, 14, 0.05), 0 1px 1px 0 rgba(20, 18, 14, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(20, 18, 14, 0.06), 0 2px 4px -1px rgba(20, 18, 14, 0.04);
  --shadow-lg: 0 12px 32px -6px rgba(20, 18, 14, 0.1), 0 4px 12px -2px rgba(20, 18, 14, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(20, 18, 14, 0.16), 0 8px 16px -4px rgba(20, 18, 14, 0.08);
  --background: var(--color-bg);
  --foreground: var(--color-text);
  --card: var(--color-surface);
  --card-foreground: var(--color-text);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-text);
  --primary: var(--color-accent);
  --primary-foreground: var(--color-accent-fg);
  --secondary: var(--color-surface-elevated);
  --secondary-foreground: var(--color-text);
  --muted: var(--color-surface-elevated);
  --muted-foreground: var(--color-text-muted);
  --accent-foreground: var(--color-accent-fg);
  --destructive: var(--color-error);
  --destructive-foreground: #ffffff;
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-accent-500);
  /* ---- Agenda · cor de pessoa (espelho do :root) -----------------------
   * Espelhado aqui porque o tema escuro sobrescreve estas oito chaves, e
   * `tests/unit/branding-tema-claro-escopavel.test.ts` exige que este bloco
   * cubra EXATAMENTE o que o escuro cobre: uma subárvore `data-theme="light"`
   * dentro de página escura herdaria os valores escuros, e a amostra de cor
   * mentiria sobre a cor que a pessoa tem.
   */
  --agenda-pessoa-1: #ac4d40; /* telha */
  --agenda-pessoa-2: #bd7c20; /* âmbar */
  --agenda-pessoa-3: #7e6f01; /* oliva */
  --agenda-pessoa-4: #11a19b; /* turquesa */
  --agenda-pessoa-5: #0b7a9a; /* azul */
  --agenda-pessoa-6: #608bda; /* índigo */
  --agenda-pessoa-7: #7b5bad; /* violeta */
  --agenda-pessoa-8: #cc77b1; /* framboesa */
}

[data-theme="dark"] {
  /* Surfaces (dark — drawn) */
  --color-bg: #011315;
  --color-surface: #011410;
  --color-surface-elevated: #04191d;
  --color-overlay: rgba(0, 0, 0, 0.6);

  /* Text (dark) */
  --color-text: #eef7e6;
  --color-text-muted: #8fa892;
  --color-text-subtle: #7d947f;

  /* Borders (dark) */
  --color-border: rgba(195, 245, 60, 0.16);
  --color-border-strong: rgba(195, 245, 60, 0.42);

  /* Accent stays same hex stops; default shifts up for dark contrast */
  --color-accent-50: #f3f6f1;
  --color-accent-100: #e4ebe0;
  --color-accent-200: #c8d6c1;
  --color-accent-300: #e6ff9a;
  --color-accent-400: #b7fe56;
  --color-accent-500: #a6ef3f;
  --color-accent-600: #506d48;
  --color-accent-700: #41573b;
  --color-accent-800: #374731;
  --color-accent-900: #2f3c2b;
  --color-accent-950: #171f15;
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #071003;
  --color-accent-soft: rgba(183, 254, 86, 0.12);
  --color-accent-hover: var(--color-accent-300);

  /* Neutrals — greige (11 stops, dark) */
  --color-neutral-50: #eef7e6;
  --color-neutral-100: #dfe9d6;
  --color-neutral-200: #bcc9b3;
  --color-neutral-300: #8fa892;
  --color-neutral-400: #66786a;
  --color-neutral-500: #4b5d4f;
  --color-neutral-600: #34443a;
  --color-neutral-700: #243129;
  --color-neutral-800: #15201a;
  --color-neutral-900: #0b1511;
  --color-neutral-950: #011315;

  /* States (dark) */
  --color-success: #82a077;
  --color-success-bg: rgba(130, 160, 119, 0.18);
  --color-success-fg: #a4ba9a;
  --color-warning: #d09455;
  --color-warning-bg: rgba(208, 148, 85, 0.18);
  --color-warning-fg: #e0ad77;
  --color-error: #c87263;
  --color-error-bg: rgba(200, 114, 99, 0.18);
  --color-error-fg: #d99182;
  --color-info: #7da9bf;
  --color-info-bg: rgba(125, 169, 191, 0.18);
  --color-info-fg: #9bbfd2;

  /* Shadows — heavier in dark */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 1px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px -6px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 8px 16px -4px rgba(0, 0, 0, 0.5);

  /* shadcn-compat aliases */
  --background: var(--color-bg);
  --foreground: var(--color-text);
  --card: var(--color-surface);
  --card-foreground: var(--color-text);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-text);
  --primary: var(--color-accent);
  --primary-foreground: var(--color-accent-fg);
  --secondary: var(--color-surface-elevated);
  --secondary-foreground: var(--color-text);
  --muted: var(--color-surface-elevated);
  --muted-foreground: var(--color-text-muted);
  --accent-foreground: var(--color-accent-fg);
  --destructive: var(--color-error);
  --destructive-foreground: #ffffff;
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-accent-400);
  /* ---- Agenda · cor de pessoa (tema escuro) ----------------------------
   * Mais claras e menos saturadas que as do claro: sobre `#161510` a versão
   * escura de cada matiz sumiria. Mesma ordem, mesmos nomes.
   */
  --agenda-pessoa-1: #f89080;
  --agenda-pessoa-2: #ca8931;
  --agenda-pessoa-3: #d1bf55;
  --agenda-pessoa-4: #0cafa8;
  --agenda-pessoa-5: #4ccffb;
  --agenda-pessoa-6: #6c97e7;
  --agenda-pessoa-7: #be9ef6;
  --agenda-pessoa-8: #cc77b1;
}

/* ─────────────────────────────────────────────────────────────────────────
   Ponte token → utilitário (o que era `theme.extend` no `tailwind.config.ts`).

   `@theme inline` e não `@theme`: com `inline`, o utilitário recebe o
   `var(--color-…)` LITERAL em vez de uma cópia do valor. É o que preserva o
   tema — `.bg-bg` vira `background-color: var(--color-bg)` e passa a valer o
   que `[data-theme="dark"]` disser naquele ponto da árvore. Com `@theme` sem
   `inline`, o valor claro seria assado dentro do utilitário e o tema escuro
   pararia de existir.

   Os três blocos de token acima (`:root`, `[data-theme="light"]`,
   `[data-theme="dark"]`) ficam onde estão, sem layer e sem renomear. Não é
   preferência: `extrairRegua` (lib/branding/contraste.ts) acha o bloco claro
   por igualdade EXATA de seletor (`r.seletor === ":root"`), e
   `tests/unit/branding-tema-claro-escopavel.test.ts` compara prop a prop os
   blocos claro e escuro. Mover qualquer um deles para dentro de `@theme`
   quebraria os dois.

   Efeito colateral conhecido e inofensivo: como os nomes de token daqui são os
   MESMOS do bloco `:root` (o produto já batizava tudo de `--color-*`), o v4
   emite, dentro de `@layer theme`, linhas auto-referentes do tipo
   `--color-bg: var(--color-bg)`. Elas nunca vencem — declaração sem layer tem
   precedência sobre declaração em layer, e o `:root` autoral está fora de
   layer. Vigiado por `tests/unit/tailwind-tokens.test.ts`; se um dia alguém
   embrulhar o `:root` num `@layer`, o teste reprova e a explicação está aqui.
   ───────────────────────────────────────────────────────────────────────── */
@theme inline {
  /* Foundation */
  --color-bg: var(--color-bg);
  --color-surface: var(--color-surface);
  --color-surface-elevated: var(--color-surface-elevated);
  --color-overlay: var(--color-overlay);

  --color-text: var(--color-text);
  --color-text-muted: var(--color-text-muted);
  --color-text-subtle: var(--color-text-subtle);

  /* Accent — Sage */
  --color-accent: var(--color-accent);
  --color-accent-foreground: var(--color-accent-fg);
  --color-accent-soft: var(--color-accent-soft);
  --color-accent-hover: var(--color-accent-hover);
  --color-accent-50: var(--color-accent-50);
  --color-accent-100: var(--color-accent-100);
  --color-accent-200: var(--color-accent-200);
  --color-accent-300: var(--color-accent-300);
  --color-accent-400: var(--color-accent-400);
  --color-accent-500: var(--color-accent-500);
  --color-accent-600: var(--color-accent-600);
  --color-accent-700: var(--color-accent-700);
  --color-accent-800: var(--color-accent-800);
  --color-accent-900: var(--color-accent-900);
  --color-accent-950: var(--color-accent-950);

  /* Neutrals — greige */
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
  --color-neutral-600: var(--color-neutral-600);
  --color-neutral-700: var(--color-neutral-700);
  --color-neutral-800: var(--color-neutral-800);
  --color-neutral-900: var(--color-neutral-900);
  --color-neutral-950: var(--color-neutral-950);

  /* States */
  --color-success: var(--color-success);
  --color-success-bg: var(--color-success-bg);
  --color-success-fg: var(--color-success-fg);
  --color-warning: var(--color-warning);
  --color-warning-bg: var(--color-warning-bg);
  --color-warning-fg: var(--color-warning-fg);
  --color-error: var(--color-error);
  --color-error-bg: var(--color-error-bg);
  --color-error-fg: var(--color-error-fg);
  --color-info: var(--color-info);
  --color-info-bg: var(--color-info-bg);
  --color-info-fg: var(--color-info-fg);

  /* Aliases shadcn (consumers ainda não migrados). Espelham 1:1 o que o
     `tailwind.config.ts` mapeava — inclusive `ring`, que apontava para a
     parada 500 fixa e NÃO para `--ring` (que muda no escuro). Mantido igual de
     propósito: trocar aqui mudaria o anel de foco de toda a aplicação, e isso
     é decisão de design, não de migração. */
  --color-border: var(--color-border);
  --color-border-strong: var(--color-border-strong);
  --color-input: var(--color-border);
  --color-ring: var(--color-accent-500);
  --color-background: var(--color-bg);
  --color-foreground: var(--color-text);
  --color-primary: var(--color-accent);
  --color-primary-foreground: var(--color-accent-fg);
  --color-secondary: var(--color-surface-elevated);
  --color-secondary-foreground: var(--color-text);
  --color-destructive: var(--color-error);
  --color-destructive-foreground: #ffffff;
  --color-muted: var(--color-surface-elevated);
  --color-muted-foreground: var(--color-text-muted);
  --color-popover: var(--color-surface);
  --color-popover-foreground: var(--color-text);
  --color-card: var(--color-surface);
  --color-card-foreground: var(--color-text);

  /* Tipografia */
  --font-sans:
    var(--font-atkinson), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Espaçamento. Os valores são px LITERAIS (`--space-6` = 24px), não rem — e
     essa diferença é carregada por quem consome: ver o cálculo de altura em
     `components/inbox/InboxLayout.tsx`, que soma `var(--space-6)` a um `3.5rem`
     justamente porque as duas parcelas NÃO estão na mesma unidade.

     As paradas fora desta lista (`p-7`, `gap-1.5`, `mt-14`…) continuam
     existindo: o v4 as calcula pelo multiplicador `--spacing` (0.25rem), do
     mesmo jeito que a escala default do v3 as fornecia. */
  --spacing-0: var(--space-0);
  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-8: var(--space-8);
  --spacing-10: var(--space-10);
  --spacing-12: var(--space-12);
  --spacing-16: var(--space-16);
  --spacing-20: var(--space-20);
  --spacing-24: var(--space-24);
  --spacing-32: var(--space-32);

  /* Raio */
  --radius-none: var(--radius-none);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-full: var(--radius-full);

  /* Sombra */
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);

  /* Motion */
  --ease-out: var(--ease-out);
  --ease-in-out: var(--ease-in-out);
  --ease-out-slow: var(--ease-out-slow);
  --ease-spring: var(--ease-spring);
}

/* `duration-*` não tem espaço de tema no v4 (o `transitionDuration` do v3 não
   tem equivalente em `@theme`), então o apelido vira utilitário explícito. */
@utility duration-fast {
  transition-duration: var(--duration-fast);
}
@utility duration-base {
  transition-duration: var(--duration-base);
}
@utility duration-slow {
  transition-duration: var(--duration-slow);
}
@utility duration-spring {
  transition-duration: var(--duration-spring);
}

/* ---- Área segura do rodapé (notch e indicador de home) --------------------
   `env(safe-area-inset-bottom)` só devolve número diferente de zero quando o
   documento declara `viewport-fit=cover` — que é o `viewportFit: "cover"` do
   `viewport` em `app/layout.tsx`. Sem aquela linha este utilitário é um
   `max(var(--space-6), 0px)` e não muda nada; com ela, o conteúdo para de ficar
   atrás do indicador de home no iOS em tela cheia.

   Por que utilitário e não classe arbitrária espalhada: a faixa de baixo já tem
   DONO — o contrato de `lib/ui/rodape-ocupado.tsx`. Este utilitário é o piso
   dele para quando não há peça fixa registrada; quando há, quem decide é o
   `estiloDaReserva()`, que também soma a área segura ao `max()`. Duas medidas
   para a mesma coisa foi exatamente o defeito da issue #1305. */
@utility pb-area-segura {
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
}

/* ---- Alvo de 44px SEM mexer no desenho -------------------------------------
   Para o controle cujo tamanho visível é parte do desenho e não pode crescer.

   O caso que a criou: os avatares do filtro de pessoas da agenda medem 32px e
   se SOBREPÕEM (`-space-x-2`). Engordá-los para 44 afastaria um do outro e
   desfaria a pilha; e o truque de `p-3.5 -m-3.5`, que resolveu o X das gavetas,
   não serve aqui porque a margem negativa brigaria com a do `space-x`.

   Um pseudo-elemento centralizado resolve: ele não ocupa espaço no fluxo, não
   muda uma linha de layout, e o clique nele é clique no botão — então a área
   que o dedo alcança cresce e o desenho fica idêntico.

   `max(100%, 2.75rem)` para o alvo nunca ENCOLHER um controle que já passe de
   44px. E `content: none` de `lg` para cima: ali quem aciona é cursor, e uma
   área invisível maior que o botão só atrapalharia os vizinhos. */
.ds-alvo-44 {
  position: relative;
}

.ds-alvo-44::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: max(100%, 2.75rem);
  height: max(100%, 2.75rem);
}

@media (width >= 64rem) {
  .ds-alvo-44::after {
    content: none;
  }
}

/* ---- O X do aviso (sonner) -------------------------------------------------
   O botão de fechar do toast mede **20×20** — medido em 360px, e ele aparece em
   TODA tela do produto, porque `closeButton` está ligado no `app/layout.tsx`.
   Vinte pixels é alvo de cursor; o dedo que erra acerta o conteúdo do aviso, que
   em muitos casos navega para outro lugar.

   Em CSS e não em prop: o sonner desenha esse botão por dentro e não expõe
   classe para ele; o que ele expõe é o atributo. A faixa visível continua a
   mesma — cresce a área que recebe o toque, como no X das gavetas.

   Até `lg`, o mesmo corte de `components/ui/button.tsx`. */
@media (width < 64rem) {
  [data-sonner-toast] [data-close-button] {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@layer base {
  /* O preflight do v4 não pinta mais borda por padrão (`border: 0 solid`, cor
     = `currentColor`), então os ~300 `class="border"` sem cor desta base
     dependem inteiramente desta regra. Ela já existia no v3 pelo mesmo motivo;
     o que mudou é que os pseudo-elementos entraram na lista — o preflight do
     v4 os zera junto com o elemento, e sem eles um `::before` com `border`
     desenharia na cor do texto. */
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-border);
  }

  /* ---- cursor de botão · reposto do preflight do Tailwind v3 -------------
     NÃO É REDUNDANTE — não apague achando que o preflight já faz isto. Até a
     v3 estas duas regras vinham de graça no `@tailwind base`
     (`tailwindcss@3.4.19`, `src/css/preflight.css:339-353`, verbatim). O v4
     as REMOVEU de propósito, para se alinhar ao default do navegador — e o
     default do navegador para `<button>` é a SETA, não a mãozinha.

     Sem este bloco, todo controle do produto que renda um `<button>` nativo
     passa a mostrar a seta: `<Button>`, `SelectTrigger`, `TabsTrigger`,
     `Switch`, os gatilhos de Dropdown/Popover/Tooltip/Dialog/Sheet/
     AlertDialog e os `<button>` crus. Para recontar sem confiar neste texto:

       git grep -o -F '<button' -- 'app/*.tsx' 'components/*.tsx' | wc -l

     Por que aqui e não em `buttonVariants`: uma classe em `buttonVariants` só
     alcança o que passa por `<Button>` (e por `AlertDialogAction`/`Cancel`,
     que a reusam) — deixaria de fora todo o resto acima, além do `<button>`
     que uma biblioteca de terceiro renderiza dentro da nossa árvore, que
     classe nenhuma nossa tocaria.

     A segunda regra é o par obrigatório da primeira, e vinha logo depois dela
     no v3 pelo mesmo motivo: sem ela, botão DESABILITADO passa a convidar o
     clique. Ela tem de vir DEPOIS — `:disabled` (0,1,0) empata em
     especificidade com `[role="button"]` (0,1,0), e quem decide o empate é a
     ordem no arquivo.

     Nada aqui vence uma classe: `@layer base` perde para `@layer utilities`,
     então os `cursor-default`, `cursor-not-allowed` e `disabled:cursor-*` que
     já existem no código continuam mandando. */
  button,
  [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  html {
    color-scheme: light;
    /* Rede de segurança DE VERDADE contra scroll horizontal da PÁGINA — a
       de `main` (app/app/_components/AppShell.tsx) não bastava porque
       TopBar e Sidebar ficam FORA de `main`; qualquer estouro ali (ou em
       qualquer página que esqueça de conter o próprio overflow) ainda
       chegava até aqui e movia a tela inteira. Isto NUNCA deixa a barra de
       scroll horizontal aparecer, não importa o que role solto lá dentro —
       o componente que precisa de scroll horizontal (tabela, kanban)
       continua rolando, contido nele mesmo; só a página como um todo não.

       ⚠️ `clip` DEPOIS de `hidden`, e as duas linhas são necessárias.

       `overflow-x: hidden` faz o elemento virar CONTÊINER DE ROLAGEM (a
       especificação computa o eixo oposto para `auto`), e um contêiner de
       rolagem no `<html>` quebra `position: sticky` lá dentro: a barra lateral
       — que é `sticky top-0 h-screen` em `components/shell/Sidebar.tsx`, com um
       comentário longo explicando por que não é `fixed` — deixava de grudar e
       rolava com a página, sumindo do alto e deixando faixa vazia embaixo.

       `overflow-x: clip` corta igual e NÃO cria contêiner de rolagem, então a
       proteção continua inteira e o sticky volta. A linha `hidden` fica como
       reserva para motor que não conhece `clip` (Safari < 16): lá o
       comportamento segue exatamente o de hoje — protegido, sem sticky. */
    overflow-x: hidden;
    overflow-x: clip;
  }
  [data-theme="dark"] {
    color-scheme: dark;
  }
  /* Par do espelho de tokens acima: sem isto, uma subárvore clara dentro de uma
     página escura recebe os tokens claros mas mantém o `color-scheme: dark` do
     `<html>` — e o navegador continua pintando scrollbar, `<input>` e menu
     nativo em escuro dentro de uma caixa clara. */
  [data-theme="light"] {
    color-scheme: light;
  }

  body {
    /* Mesma trava do `html` logo acima, duplicada aqui de propósito: alguns
       motores móveis (Safari/iOS em particular) ignoram `overflow-x` só no
       `html` em certas versões — as duas juntas é o par que realmente
       bloqueia em todo navegador testado pela comunidade.

       Mesmo par `hidden` + `clip` do `<html>`, e pela mesma razão: sem o `clip`
       aqui o `<body>` volta a ser contêiner de rolagem e a barra lateral perde
       o sticky de novo — consertar só um dos dois não conserta nada. */
    overflow-x: hidden;
    overflow-x: clip;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family:
      var(--font-atkinson),
      ui-sans-serif,
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
    font-feature-settings:
      "rlig" 1,
      "calt" 1,
      "ss01" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  code,
  kbd,
  pre,
  samp {
    font-family:
      var(--font-mono), ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    font-variant-numeric: tabular-nums;
  }

  ::selection {
    background-color: var(--color-accent-200);
    color: var(--color-accent-950);
  }
  [data-theme="dark"] ::selection {
    background-color: var(--color-accent-700);
    color: var(--color-accent-50);
  }

  /* Focus ring: Sage 500/400, 2px with offset */
  :focus-visible {
    outline: 2px solid var(--color-accent-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  [data-theme="dark"] :focus-visible {
    outline-color: var(--color-accent-400);
  }

  /* Modo de alto contraste do sistema (Windows High Contrast / forced-colors).
     O problema: arquivos que matam o `outline` e desenham o foco com `ring-*`
     — que é `box-shadow`, e o forced-colors APAGA box-shadow. Neles o
     indicador de foco some por completo naquele modo: quem navega por teclado
     perde a posição do cursor. É WCAG 2.4.7 nível A, não preferência.

     Quantos são hoje (comando, e não número — número envelhece; a migração
     para o Tailwind 4 já invalidou o que estava escrito aqui, porque
     `outline-none` virou `outline-hidden` e o grep antigo passou a devolver
     zero):

       grep -rlE 'outline-hidden|outline:\s*none|outline-\[?transparent' \
         app components lib --include='*.tsx' --include='*.ts' | wc -l
       # …| xargs grep -lE 'ring-[a-z0-9]' | wc -l   ← os que dependem de ring

     `Highlight` é cor de sistema (a paleta do usuário), a única que o modo não
     substitui. `!important` porque o que precisa ser vencido é justamente o
     `outline: none`/`outline: transparent` desses 14 arquivos. */
  @media (forced-colors: active) {
    :focus-visible {
      outline: 2px solid Highlight !important;
      outline-offset: 2px !important;
    }
  }

  /* Scrollbar — subtle greige */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-300) transparent;
  }
  [data-theme="dark"] * {
    scrollbar-color: var(--color-neutral-600) transparent;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-400);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-600);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-500);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
}

/* ---- XYFlow · controles do canvas de follow-up --------------------------
   A lib pinta o botão de zoom com fundo `#fefefe` e `color: inherit`. O SVG
   usa `fill: currentColor`. No tema escuro o texto da página é claro, então
   o ícone some no branco: o usuário vê um retângulo branco e os botões de
   zoom/encaixe parecem ausentes.

   As vars SEM o sufixo `-default` vencem o fallback da folha da lib. Os
   tokens já trocam com `[data-theme]`, então claro e escuro saem do mesmo
   bloco — não precisa do `colorMode` do React Flow (que no SSR nasceria
   `light` e divergiria do `data-theme` já pintado pelo script do layout). */
.react-flow {
  --xy-controls-button-background-color: var(--color-surface);
  --xy-controls-button-background-color-hover: var(--color-surface-elevated);
  --xy-controls-button-color: var(--color-text);
  --xy-controls-button-color-hover: var(--color-text);
  --xy-controls-button-border-color: var(--color-border);
  --xy-controls-box-shadow: var(--shadow-md);
  --xy-edge-label-background-color: var(--color-surface);
  --xy-edge-label-color: var(--color-text);
  /* A linha que liga dois passos é o desenho do fluxo, não enfeite: no cinza
     padrão da lib (#b1b1b7) ela dava 2,03:1 sobre o fundo claro — abaixo dos
     3:1 que a WCAG pede para elemento gráfico essencial, e no print do canvas
     ela some. `text-muted` é o único token que passa nos DOIS temas
     (claro 6,63:1, escuro 5,35:1); `text-subtle` cairia para 2,81:1 no escuro. */
  --xy-edge-stroke: var(--color-text-muted);
  --xy-edge-stroke-selected: var(--color-accent);
  /* A linha que segue o cursor enquanto se arrasta uma ligação lia a mesma var
     default da lib — o cinza reprovado acima. */
  --xy-connectionline-stroke: var(--color-accent);
  --xy-handle-background-color: var(--color-accent);
  --xy-handle-border-color: var(--color-surface);
}

.react-flow__controls {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* ---- Pulso de chegada no card do Kanban (CRM Vivo, Wave 3) --------------
   Vivo é o que RESPONDE, não o que se agita: um pulso, uma vez, e cessa.
   A animação não repete (sem `infinite`) — ficar animando é rejeição de review.

   `prefers-reduced-motion: reduce` NÃO é o caminho degradado: o mesmo anel
   aparece, só que parado. O card continua dizendo "acabei de mudar" para quem
   desligou animação — e continua LEGÍVEL, que é o ponto (ver o media query).

   BORDA, e não `box-shadow`: este overlay ocupa o card inteiro e o card é
   `overflow-hidden`, então uma sombra externa (`0 0 0 2px`) seria recortada
   justamente na faixa onde ela desenha. Borda com `box-sizing: border-box`
   desenha para dentro da própria caixa e não depende do overflow do pai.
   Provado na tela nos três cenários (claro, escuro, reduce) —
   `evidence/wave3-pulso/`. */
@keyframes deskcomm-card-pulse {
  from {
    border-color: var(--color-accent);
  }
  to {
    border-color: transparent;
  }
}

/* Overlay próprio, e não uma classe no card: o elemento é REMONTADO a cada
   evento (key = contador de pulsos), e é a remontagem que faz a animação
   recomeçar. Alternar classe no mesmo nó não reinicia animação em CSS. */
.card-pulse {
  animation: deskcomm-card-pulse var(--duration-slow) var(--ease-out) 1;
  border: 2px solid transparent;
  border-radius: inherit;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .card-pulse {
    animation: none;
    /* Anel ESTÁTICO, não fundo: no tema claro `--color-accent-soft` é cor
       sólida (#e4ebe0), e um overlay sólido sobre o card inteiro deixaria quem
       usa movimento reduzido 1,2s SEM LER o card. O caminho de acessibilidade
       é para ser igual, não pior — então o aviso é o mesmo anel, só que parado.
       Ele dura os PULSE_MS inteiros (useBoard.ts), NÃO os 320ms da animação:
       a diferença entre os dois números é deliberada e está explicada lá. */
    border-color: var(--color-accent);
  }
}

/* ---- Agenda · a coluna de horários que desliza para dentro ----------------
   O painel de marcação tem três tempos (escolher dia → escolher horário →
   confirmar) e a coluna de horários NÃO existe no primeiro. Quando o dia é
   escolhido, ela entra pela direita e o painel cresce — é isso que dá a
   sensação de "abriu" em vez de "trocou de tela", e é o único motivo pelo qual
   um painel de marcação parece fluido em vez de parecer um formulário de três
   páginas.

   Por que `width` e `grid-template-columns` não: animar a coluna do grid
   funciona em Chrome recente e falha calado em Safari, e este produto roda no
   celular do dono da clínica. `width` + `overflow: hidden` anima em tudo.

   `tailwindcss-animate` NÃO está instalado neste repo (`plugins: []` no
   tailwind.config.ts) — `animate-in`/`slide-in-from-*` são classes que não
   existem e falham em silêncio. Os seis Sheets em produção abrem sem transição
   nenhuma por causa disso. Daí este bloco ser CSS à mão, no modelo do
   `.card-pulse` acima, que é o precedente local. */
.agenda-coluna-horarios {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(8px);
  transition:
    width var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.agenda-coluna-horarios[data-aberta="true"] {
  width: var(--agenda-largura-horarios, 240px);
  opacity: 1;
  transform: translateX(0);
}

/* ⚠️ NO CELULAR A COLUNA OCUPA TUDO — e isto era só um comentário até agora.
   `PainelDeMarcacao.tsx:184` já dizia "no celular a coluna ocupa tudo" como
   justificativa para o `min-width` do corpo. O CSS não implementava: a coluna
   abria com 240px fixos e `shrink-0` em QUALQUER largura, e numa tela de 390px
   o painel passava 67px da borda.

   O sintoma não era barra de rolagem: `overflow-x: hidden` no `html` e no
   `body` cortava o excedente, então a coluna de horários simplesmente sumia
   pela direita — sem rolagem, sem aviso, sem como alcançá-la. E a asserção que
   deveria pegar isso media `documentElement.scrollWidth`, que o mesmo
   `overflow-x: hidden` grampeia: o gate dava zero enquanto o usuário perdia a
   metade da tela em que se escolhe o horário.

   Trocada a medida para `body.scrollWidth`, o estouro apareceu na primeira
   execução. */
/* ⚠️ O CORTE MUDOU DE 767 PARA 1023, e é o conserto do defeito da v1.8.0.
   As três colunas do painel somam 980px, e entre 768 e 1023 o Sheet que as
   hospeda tem 768: a coluna de horários ficava fora da tela — medido em 1280,
   só 42 dos 280px apareciam. Empilhada, ela ocupa a largura toda e cabe. */
@media (max-width: 1023px) {
  .agenda-coluna-horarios[data-aberta="true"] {
    width: 100%;
  }
}

/* A borda só existe quando a coluna existe. Deixá-la no estado fechado
   desenharia um risco vertical de 1px no meio de um painel sem coluna
   nenhuma — e daria à coluna "de largura zero" um retângulo de 1px de
   largura, que é uma medida difícil de explicar a quem lê o teste. */
/* A borda-esquerda só existe quando a coluna É uma coluna. Empilhada, ela
   desenharia um risco vertical no meio de uma seção que ocupa a largura toda.
   Por isso as duas regras moram no MESMO breakpoint em que o painel vira
   `flex-row` — separá-las foi o que deixou uma borda de coluna numa seção
   empilhada entre 768 e 1023. */
@media (min-width: 1024px) {
  .agenda-coluna-horarios[data-aberta="true"] {
    width: var(--agenda-largura-horarios-lg, 280px);
    border-left: 1px solid var(--color-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* O destino é o MESMO — só chega sem o percurso. Esconder a coluna, ou
     entregá-la por um caminho diferente, faria de "movimento reduzido" uma
     versão pior do produto em vez de uma versão calma dele. */
  .agenda-coluna-horarios {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO DOS SOBREPOSTOS — a lei de `docs/design-system/07-motion-language.md`
   ═══════════════════════════════════════════════════════════════════════════

   ─── O defeito que este bloco fecha ────────────────────────────────────────

   TODO sobreposto do produto abria de um quadro para o outro: gaveta, modal,
   menu, seletor, dica. Não por escolha — por classe que não existe.

   O shadcn gera `animate-in` / `animate-out` / `fade-in-0` / `zoom-in-95` /
   `slide-in-from-left` assumindo o plugin `tailwindcss-animate`, que NUNCA foi
   instalado aqui. Classe inexistente no Tailwind não é erro: ela simplesmente
   não gera CSS. Eram ~24 delas, em `sheet`, `dialog`, `alert-dialog`, `popover`,
   `dropdown-menu`, `select`, `tooltip` e nos dois painéis de chamada — todas
   escritas, nenhuma com efeito, e o build verde o tempo todo. O comentário em
   `.agenda-coluna-horarios`, acima, já tinha registrado o diagnóstico.

   ─── Por que `animation` e não `transition` ────────────────────────────────

   Não é estilo: é requisito do Radix. O `Presence` dele decide quando DESMONTAR
   o nó olhando `getComputedStyle(node).animationName !== "none"` e esperando o
   `animationend`. Com `transition`, o nó sai da árvore no mesmo quadro em que
   `data-state` vira `closed` — a animação de saída não chega a existir. É por
   isso que o shadcn usa animação, e não transição, e por isso a volta para
   `transition` aqui faria a gaveta fechar seca de novo.

   ─── Uma curva, e a divergência da lei ─────────────────────────────────────

   A lei se contradiz: a seção "Component enter/exit" diz "320ms ease-spring"
   para a gaveta, e a tabela de curvas diz `ease-out-slow` para "page enter,
   modal, sheet". Segui a TABELA. `ease-spring` tem passagem acima de 1
   (`0.34, 1.56, 0.64, 1`): numa gaveta ancorada na borda, o excesso desenharia
   a gaveta PASSANDO da borda e voltando — abre uma faixa vazia de alguns pixels
   entre a gaveta e o lado da tela, no meio da entrada. A tabela está certa e a
   prosa envelheceu; a prosa foi corrigida no mesmo PR. */

/* ---- A cortina ---------------------------------------------------------- */
@keyframes ds-cortina-entra {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ds-cortina-sai {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.ds-cortina[data-state="open"] {
  animation: ds-cortina-entra var(--duration-base) var(--ease-in-out) both;
}
.ds-cortina[data-state="closed"] {
  animation: ds-cortina-sai var(--duration-base) var(--ease-in-out) both;
}

/* ---- A gaveta (Sheet), por lado ----------------------------------------
   UM par de keyframes serve os quatro lados: o lado só decide de ONDE ela vem,
   e isso é um token (`--ds-gaveta-de`) que o atributo `data-lado` troca. Quatro
   pares de keyframes seriam a mesma animação escrita quatro vezes.

   A propriedade é `translate` (individual), e não `transform`, pelo mesmo
   motivo explicado no bloco do modal mais abaixo: o Tailwind 4 compila
   `translate-x-*`/`translate-y-*` para `translate`, e as duas propriedades
   COMPÕEM em vez de se substituir. Hoje nenhuma gaveta carrega classe de
   translate, então `transform` funcionaria — mas no dia em que alguém
   acrescentar uma, `transform` somaria em silêncio e `translate` substitui.
   O modo de falha mais seguro, pelo mesmo preço.

   Dois valores nas duas pontas (`100% 0` → `0 0`), de propósito: é o mesmo
   formato nos dois extremos, então o navegador interpola número contra número.
   Formatos diferentes empurram para interpolação por matriz, que é onde o
   Safari costuma divergir do Chrome — e o aviso de `.agenda-coluna-horarios`
   sobre "falha calado no Safari" é deste repositório, não teórico. */
.ds-gaveta {
  --ds-gaveta-de: 100% 0;
}
.ds-gaveta[data-lado="left"] {
  --ds-gaveta-de: -100% 0;
}
.ds-gaveta[data-lado="top"] {
  --ds-gaveta-de: 0 -100%;
}
.ds-gaveta[data-lado="bottom"] {
  --ds-gaveta-de: 0 100%;

  /* A gaveta de BAIXO é a única que encosta no indicador de home, e por isso é
     a única que reserva a área segura aqui.

     Em regra de CSS, e não em utilitário: `padding-bottom` por utilitário e o
     `p-6` da base do Sheet são os dois um seletor de UMA classe, então quem
     vence depende da ordem em que o Tailwind emite as duas — que não é contrato.
     `.ds-gaveta[data-lado="bottom"]` é classe MAIS atributo, e ganha do `.p-6`
     por especificidade, que é contrato.

     Consequência a conhecer: numa gaveta de baixo isto vence também um `p-0`
     passado por quem chama. É deliberado — conteúdo encostado no indicador de
     home não é escolha de layout, é defeito. As gavetas da esquerda e da direita
     ficam de fora porque elas usam `p-0` de propósito (a navegação do celular
     desenha a própria lista até a borda) e ali a área segura é tratada por
     dentro, no último item. */
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
}

@keyframes ds-gaveta-entra {
  from {
    translate: var(--ds-gaveta-de);
  }
  to {
    translate: 0 0;
  }
}
@keyframes ds-gaveta-sai {
  from {
    translate: 0 0;
  }
  to {
    translate: var(--ds-gaveta-de);
  }
}

/* A gaveta só DESLIZA — sem opacidade. A lei pede "slide + fade do backdrop",
   e é a cortina que faz o fade. Somar opacidade à gaveta a deixaria translúcida
   no meio do caminho, com o conteúdo da página aparecendo através dela.

   O atraso de 8ms cumpre o "a cortina entra ANTES do conteúdo (5–10ms)" da lei.
   `both` é obrigatório junto do atraso: sem `animation-fill-mode`, durante os
   8ms o nó pinta no estado FINAL (já aberto, no lugar) e só então salta para o
   começo — um quadro de gaveta inteira piscando antes de a animação começar. */
.ds-gaveta[data-state="open"] {
  animation: ds-gaveta-entra var(--duration-slow) var(--ease-out-slow) 8ms both;
}
.ds-gaveta[data-state="closed"] {
  animation: ds-gaveta-sai var(--duration-slow) var(--ease-out-slow) both;
}

/* ---- O modal (Dialog e AlertDialog) ------------------------------------
   Os números são os da lei: 8px de subida, `scale(0.985)` e 320ms. Duas
   propriedades em movimento (opacidade e posição), que é o teto que ela declara.

   ⚠️ AQUI AS PROPRIEDADES INDIVIDUAIS `translate` E `scale`, E NUNCA `transform`.
   Isto não é preferência — é a diferença entre centralizado e fora da tela.

   O modal se centraliza com `left-[50%] top-[50%]` mais um deslocamento de
   -50%/-50%, escrito como `translate-x-[-50%] translate-y-[-50%]` em
   `components/ui/dialog.tsx`. E o Tailwind 4 compila aquelas classes para a
   propriedade INDIVIDUAL:

       .translate-x-\[-50\%\] {
         --tw-translate-x: -50%;
         translate: var(--tw-translate-x) var(--tw-translate-y);
       }

   `translate` e `transform` são propriedades DIFERENTES, e o navegador aplica as
   duas em sequência. Animar `transform: translate(-50%, …)` somaria ao `-50%`
   que já vem do `translate` do Tailwind: o modal nasceria deslocado 100% para
   cima e para a esquerda — fora da janela — e voltaria ao lugar no fim da
   animação. Animando a MESMA propriedade, o keyframe substitui o valor do
   Tailwind durante a animação e `both` o mantém no fim; antes dela, e se a
   animação nunca rodar, vale o do Tailwind. Os dois valores em repouso são o
   mesmo `-50% -50%`, então não há estado em que o modal saia do centro.

   O suporte é o mesmo que o framework já exige de si: se `translate` individual
   não existisse no navegador, as classes de centralização do Tailwind 4 também
   não funcionariam. */
/* O DESLOCAMENTO DE CENTRALIZAÇÃO VEM DE VARIÁVEL, E ISSO NÃO É ENFEITE.

   `animation-fill-mode: both` faz o valor FINAL do keyframe continuar valendo
   depois que a animação termina — então um `-50% -50%` cravado aqui VENCE o
   `translate-y-0` de qualquer modal que escolha outro ancoramento, e o Tailwind
   não tem como ganhar dessa disputa.

   Foi o que aconteceu com a paleta de comandos (⌘K), que abria em `top-[10%]`
   com `translate-y-0`: a animação a puxava meia altura para cima do próprio
   ponto, e ela saía cortada no topo da tela. Com variável, quem ancora
   diferente só declara `--ds-modal-y` e a animação acompanha. */
@keyframes ds-modal-entra {
  from {
    opacity: 0;
    translate: var(--ds-modal-x, -50%) calc(var(--ds-modal-y, -50%) + 8px);
    scale: 0.985;
  }
  to {
    opacity: 1;
    translate: var(--ds-modal-x, -50%) var(--ds-modal-y, -50%);
    scale: 1;
  }
}
@keyframes ds-modal-sai {
  from {
    opacity: 1;
    translate: var(--ds-modal-x, -50%) var(--ds-modal-y, -50%);
    scale: 1;
  }
  to {
    opacity: 0;
    translate: var(--ds-modal-x, -50%) calc(var(--ds-modal-y, -50%) + 8px);
    scale: 0.985;
  }
}

.ds-modal[data-state="open"] {
  animation: ds-modal-entra var(--duration-slow) var(--ease-out-slow) 8ms both;
}
.ds-modal[data-state="closed"] {
  animation: ds-modal-sai var(--duration-slow) var(--ease-out-slow) both;
}

/* ---- Painéis presos a um gatilho (menu, seletor, popover, dica) --------
   `fade + 8px` em 200ms, e o deslocamento vem do LADO em que o Radix abriu
   (`data-side`), que é o que faz o painel parecer sair do botão em vez de
   aparecer solto perto dele. É a "continuidade espacial" que abre a lei.

   Sem o -50% de centralização aqui: quem posiciona estes painéis é o Radix, na
   camada de cima (`[data-radix-popper-content-wrapper]`), então o deslocamento
   deste nó é só o nosso. E `translate` individual, pelo mesmo motivo do modal. */
@keyframes ds-painel-entra {
  from {
    opacity: 0;
    translate: var(--ds-painel-de, 0 -8px);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes ds-painel-sai {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: var(--ds-painel-de, 0 -8px);
  }
}

/* O deslocamento aponta para o GATILHO: painel que abriu para baixo
   (`data-side="bottom"`) entra subindo de -8px, como se saísse do botão. É a
   "continuidade espacial" que abre a lei — a interface se desloca da posição
   anterior para a atual, em vez de aparecer. */
.ds-painel[data-side="top"] {
  --ds-painel-de: 0 8px;
}
.ds-painel[data-side="bottom"] {
  --ds-painel-de: 0 -8px;
}
.ds-painel[data-side="left"] {
  --ds-painel-de: 8px 0;
}
.ds-painel[data-side="right"] {
  --ds-painel-de: -8px 0;
}

.ds-painel[data-state="open"] {
  animation: ds-painel-entra var(--duration-base) var(--ease-out) both;
}
.ds-painel[data-state="closed"] {
  animation: ds-painel-sai var(--duration-fast) var(--ease-out) both;
}

/* ---- Peça que surge da borda (painéis de chamada) ----------------------
   Para peça que MONTA e DESMONTA sem passar pelo `Presence` do Radix: não há
   `data-state` para o CSS ler, então existe só a entrada. A saída seguiria
   precisando de quem segure o nó na árvore até o `animationend`, e nem o painel
   de chamada ativa nem o aviso de chamada entrando têm isso hoje — eles
   simplesmente deixam de ser renderizados, que é o comportamento de antes.

   `--ds-surge-de` diz de qual borda. O painel de chamada vem de baixo (ele mora
   no canto inferior direito); o aviso de chamada entrando vem de cima. */
@keyframes ds-surge {
  from {
    opacity: 0;
    translate: var(--ds-surge-de, 0 16px);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.ds-surge {
  animation: ds-surge var(--duration-slow) var(--ease-out-slow) both;
}
.ds-surge[data-de="cima"] {
  --ds-surge-de: 0 -16px;
}

/* ---- Entrada de rota: NÃO EXISTE, e a decisão está registrada ----------
   A lei pede transição de página (tipo 1: fade + 8px de subida, 320ms). Ela não
   foi construída, e isto é escolha medida, não esquecimento.

   O gancho idiomático seria `app/app/template.tsx` — o Next o remonta a cada
   navegação, e `layout.tsx` não serve porque persiste entre rotas. Mas um
   `template.tsx` acrescenta um `<div>` entre o `<main>` da casca e a página, e
   **55 páginas de `app/app/**` usam `h-full`, `flex-1` ou `min-h-0` na raiz**,
   contando com o `<main>` como pai DIRETO. Com o wrapper no meio, `h-full`
   passa a resolver contra um div de altura automática: colapso de layout
   silencioso em toda a área do tenant, por um ganho cosmético.

   Aplicar por página, na raiz de cada tela, evita o wrapper — e foi recusado por
   outro motivo: as superfícies remontam em granularidades diferentes. Em
   `/app/inbox/[id]` a página remonta a cada CONVERSA aberta, então a "transição
   de tela" viraria uma piscada a cada clique na lista. Movimento que aparece em
   duas telas e não nas outras duas lê como defeito, não como linguagem.

   O sinal de que a navegação está em curso já existe e é honesto:
   `components/shell/BarraDeProgressoNavegacao.tsx`.

   Para construir isto depois, o caminho é tirar o `h-full` da raiz das páginas
   (fazendo o `<main>` ser `flex flex-col` e as páginas `flex-1`), e só então o
   wrapper fica barato. É refatoração de layout, não de movimento. */

/* ---- Esqueleto de carregamento ----------------------------------------
   ─── O defeito medido ───────────────────────────────────────────────────
   O primitivo era `animate-pulse bg-primary/10`, e `bg-primary/10` dá **1,146:1
   sobre branco**: o esqueleto era invisível — a tela parecia vazia, não
   carregando. A medição não é minha; está na tabela de
   `components/agenda/estados.tsx:34-44`, que contornou o problema localmente e
   registrou, com razão, que consertar o primitivo era item de produto e não
   conserto de passagem (113 usos em 51 arquivos). Aqui ele sobe para o
   primitivo. A tabela, sobre superfície branca:

       candidato          cheio    apagado   delta L*
       bg-primary/10      1.146     1.067      2.81
       bg-border          1.281     1.129      4.85
       border-strong      1.588     1.249      8.82
       neutral-400        2.512     1.525     16.77   <- escolhido

   ─── Por que gradiente, e não o pulso consertado ────────────────────────
   O `animate-pulse` oscila a opacidade entre 1 e .5, então o esqueleto vive
   entre DOIS contrastes — e o pior deles, 1.525:1, é quase invisível de novo.
   Metade de cada ciclo desfazia o conserto. O gradiente mantém o corpo SEMPRE
   no piso medido e faz passar uma faixa de contraste MAIOR: o movimento nunca
   vai para baixo. É também o que a lei pede (§4), em 1.6s — "não 1s, fica
   frenético; não 2s, fica lento".

   Os hexes da lei (`surface-elevated` misturado com `accent-soft`) ficaram de
   fora de propósito: aquele trecho foi escrito para a paleta do showcase, e
   aqui existe medição. Medição vence ilustração.

   ─── O brilho anda em DIREÇÕES OPOSTAS nos dois temas ───────────────────
   `neutral-400` foi escolhido por ser quase simétrico (2.512 claro / 2.622
   escuro), e a casa registrou por quê: "um esqueleto que aparece num tema e
   some no outro é o mesmo defeito resolvido pela metade". A faixa que atravessa
   tem de respeitar isso.

   As rampas são desenhadas separadamente, não invertidas — no claro a 500
   (#7d786c) é mais ESCURA que a 400 (#a9a395), e no escuro a 500 (#444239)
   também é. Contra fundo claro, mais escuro = mais contraste; contra fundo
   escuro, mais escuro = MENOS contraste. Usar a 500 nos dois temas daria uma
   faixa que realça no claro e APAGA no escuro, caindo abaixo do piso justamente
   onde o esqueleto já é mais difícil de ver. Então o brilho é a 500 no claro e
   a 300 no escuro: nos dois casos ele se afasta do fundo, e o piso de 2.5:1
   nunca é furado. */
@keyframes ds-esqueleto {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.ds-esqueleto {
  --ds-esqueleto-corpo: var(--color-neutral-400);
  --ds-esqueleto-brilho: var(--color-neutral-500);
  background-image: linear-gradient(
    90deg,
    var(--ds-esqueleto-corpo) 0%,
    var(--ds-esqueleto-brilho) 50%,
    var(--ds-esqueleto-corpo) 100%
  );
  background-size: 200% 100%;
  animation: ds-esqueleto 1.6s linear infinite;
}

[data-theme="dark"] .ds-esqueleto {
  --ds-esqueleto-brilho: var(--color-neutral-300);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO — o atalho global que a lei prescreve
   ═══════════════════════════════════════════════════════════════════════════

   A lei manda "simplificar para fade de duração reduzida", não remover: o
   destino é o mesmo, só sem o percurso. Os dois blocos deliberados acima
   (`.card-pulse`, que mantém o anel PARADO e legível, e
   `.agenda-coluna-horarios`, que entrega a coluna sem o deslize) continuam
   valendo — eles declaram `animation: none` e `transition: none`, e sem nome de
   animação nem propriedade de transição a duração abaixo não tem o que encurtar.

   ─── Duas exceções, e as duas pelo MESMO motivo ─────────────────────────────

   `animation-iteration-count: 1` é o termo perigoso deste bloco: ele para toda
   animação que existe para dizer "ainda estou trabalhando". Parada, ela passa a
   dizer "travei" — e sinal de travamento é PIOR do que o movimento que se
   quis evitar. Quem desligou animação pediu calma, não pediu uma interface que
   parece quebrada.

   1. `.ds-esqueleto` — a própria lei abre esta: "skeleton shimmer pode manter
      (não causa motion sickness)". Sem a exceção, o gradiente congelaria no
      primeiro ciclo e sobraria uma faixa cinza imóvel.

   2. `.animate-spin` — **31 usos no produto**, e é o indicador de "carregando"
      mais comum da casa (inclusive dentro do painel de chamada, onde ele
      acompanha "Chamando…"). Um círculo de progresso imóvel ao lado da palavra
      "Chamando…" é exatamente a leitura errada. Rotação pequena e contínua está
      na mesma categoria do shimmer: não é movimento de deslocamento, que é o
      que dispara desconforto vestibular.

   As duas devolvem a duração ORIGINAL além da contagem: só repor
   `iteration-count` deixaria a animação repetindo em 0.01ms, o que é pior que
   parada — vira cintilação. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .ds-esqueleto {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }

  .animate-spin {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   ClickLead — moldura de vidro das telas de acesso (login e afins).
   Fundo da página inalterado; o cartão é vidro escuro com uma luz verde
   refletindo na borda de cima e um brilho diagonal sutil.
   ───────────────────────────────────────────────────────────────────────── */
.login-glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(195, 245, 60, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 40px -12px rgba(140, 235, 70, 0.25);
}
/* Luz verde refletindo na borda superior */
.login-glass::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: 60%;
  height: 2px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(183, 254, 86, 0.95), rgba(183, 254, 86, 0) 70%);
  filter: blur(0.5px);
  pointer-events: none;
}
/* Reflexo diagonal sutil no vidro */
.login-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
[data-theme="light"] .login-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
  border-color: rgba(90, 160, 20, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 24px 48px -20px rgba(30, 70, 20, 0.25);
}

/* ---------------------------------------------------------------------------
   Menu lateral: vidro escuro e item ativo com luz verde (visual aprovado na
   prévia `previa-verde-preto.html`). Só visual: não muda estrutura nem rotas.
   --------------------------------------------------------------------------- */
[data-sidebar-vidro] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-right-color: var(--color-border);
}
.sidebar-ativo {
  color: var(--color-text);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(90% 150% at 88% 115%, rgba(var(--cl-acento-rgb), 0.6), rgba(var(--cl-acento-rgb), 0.2) 55%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent-400) 14%, var(--color-bg)) 0%, color-mix(in srgb, var(--color-accent-400) 34%, var(--color-bg)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 16px rgba(var(--cl-acento-rgb), 0.2);
}
/* Tema claro: mesmo degradê, texto branco (como na prévia). */
[data-theme="light"] .sidebar-ativo {
  color: #ffffff;
}
[data-theme="light"] [data-sidebar-vidro] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
  border-right-color: rgba(40, 90, 20, 0.14);
}

/* Caixas de preencher no tema escuro: fundo #142829 (pedido do dono, 20/10/2026).
   Vale para campo de texto, área de texto e seleção; não mexe em caixa de marcar,
   botão de opção, controle deslizante nem envio de arquivo. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--cl-campo, #142829);
}

/* Estado do material no tema escuro (pedido do dono, 20/10/2026):
   "O agente já sabe" em verde aceso; "ainda não sabe" e "não entrou" em vermelho aceso. */
[data-theme="dark"] [data-estado="ready"] {
  background-color: rgba(var(--cl-acento-rgb), 0.16);
  color: var(--color-accent-400);
  border-color: rgba(var(--cl-acento-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--cl-acento-rgb), 0.35);
  font-weight: 600;
}
[data-theme="dark"] [data-estado="not_indexed"],
[data-theme="dark"] [data-estado="failed"] {
  background-color: rgba(255, 59, 59, 0.16);
  color: #ff5252;
  border-color: rgba(255, 82, 82, 0.65);
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.4);
  font-weight: 600;
}
/* Só nas etiquetas (span): em cartões e blocos com data-estado o texto precisa quebrar, senão a tela estoura no celular. */
span[data-estado] {
  white-space: nowrap;
}

/* >>> TEMAS (gerado por .seed-local/gerar-temas.js; não editar à mão) */

:root { --cl-texto-claro: #eef7e6; --cl-mudo-claro: #8fa892; --cl-texto-escuro: #0d1a0f; --cl-mudo-escuro: #55685a; --cl-acento-rgb: 183, 254, 86; --cl-v2-rgb: 45, 212, 191; --cl-v3-rgb: 167, 139, 250; --cl-grad: linear-gradient(135deg, #b7fe56, #34d399); --cl-campo: #142829; }

[data-theme="dark"][data-tema="petroleo-laranja"] {
  --color-bg: #020c0f;
  --color-surface: #053a41;
  --color-surface-elevated: #044f58;
  --color-text: #f2f8f8;
  --color-text-muted: #cde5e7;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(252, 147, 31, 0.18);
  --color-border-strong: rgba(252, 147, 31, 0.42);
  --color-accent-300: #ffb454;
  --color-accent-400: #fc931f;
  --color-accent-500: #fc931f;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #020c0f;
  --color-accent-soft: rgba(252, 147, 31, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 252, 147, 31;
  --cl-v2-rgb: 42, 157, 166;
  --cl-v3-rgb: 28, 124, 132;
  --cl-grad: linear-gradient(135deg, #fc931f, #f67608);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #020c0f 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #020c0f 62%, black) 80%, white);
  --cl-texto-claro: #f2f8f8;
  --cl-mudo-claro: #cde5e7;
}

[data-theme="dark"][data-tema="marinho-brasa"] {
  --color-bg: #0a0c12;
  --color-surface: #0c1c33;
  --color-surface-elevated: #023661;
  --color-text: #eef2f7;
  --color-text-muted: #bec5cd;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(219, 82, 39, 0.18);
  --color-border-strong: rgba(219, 82, 39, 0.42);
  --color-accent-300: #f0703f;
  --color-accent-400: #db5227;
  --color-accent-500: #db5227;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #ffffff;
  --color-accent-soft: rgba(219, 82, 39, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 219, 82, 39;
  --cl-v2-rgb: 118, 130, 142;
  --cl-v3-rgb: 59, 130, 246;
  --cl-grad: linear-gradient(135deg, #db5227, #f0703f);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0a0c12 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0a0c12 62%, black) 80%, white);
  --cl-texto-claro: #eef2f7;
  --cl-mudo-claro: #bec5cd;
}

[data-theme="dark"][data-tema="grafite-amarelo"] {
  --color-bg: #192230;
  --color-surface: #2c2f38;
  --color-surface-elevated: #3d474e;
  --color-text: #f1f3f4;
  --color-text-muted: #dce1e3;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(255, 205, 0, 0.18);
  --color-border-strong: rgba(255, 205, 0, 0.42);
  --color-accent-300: #ffe04d;
  --color-accent-400: #ffcd00;
  --color-accent-500: #ffcd00;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #192230;
  --color-accent-soft: rgba(255, 205, 0, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 255, 205, 0;
  --cl-v2-rgb: 154, 166, 173;
  --cl-v3-rgb: 61, 71, 78;
  --cl-grad: linear-gradient(135deg, #ffcd00, #ff9f00);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #192230 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #192230 62%, black) 80%, white);
  --cl-texto-claro: #f1f3f4;
  --cl-mudo-claro: #dce1e3;
}

[data-theme="dark"][data-tema="nevoa-petroleo"] {
  --color-bg: #0f1e23;
  --color-surface: #132e35;
  --color-surface-elevated: #2c4a52;
  --color-text: #eef1f2;
  --color-text-muted: #dae0e2;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(171, 175, 181, 0.18);
  --color-border-strong: rgba(171, 175, 181, 0.42);
  --color-accent-300: #d0d3d8;
  --color-accent-400: #abafb5;
  --color-accent-500: #abafb5;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #0f1e23;
  --color-accent-soft: rgba(171, 175, 181, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 171, 175, 181;
  --cl-v2-rgb: 103, 126, 139;
  --cl-v3-rgb: 44, 74, 82;
  --cl-grad: linear-gradient(135deg, #abafb5, #677e8b);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0f1e23 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0f1e23 62%, black) 80%, white);
  --cl-texto-claro: #eef1f2;
  --cl-mudo-claro: #dae0e2;
}

[data-theme="dark"][data-tema="marinho-ouro"] {
  --color-bg: #0b1428;
  --color-surface: #14213d;
  --color-surface-elevated: #1c2f55;
  --color-text: #ffffff;
  --color-text-muted: #b4bdcf;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(252, 163, 17, 0.18);
  --color-border-strong: rgba(252, 163, 17, 0.42);
  --color-accent-300: #ffbe4d;
  --color-accent-400: #fca311;
  --color-accent-500: #fca311;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #14213d;
  --color-accent-soft: rgba(252, 163, 17, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 252, 163, 17;
  --cl-v2-rgb: 170, 180, 200;
  --cl-v3-rgb: 59, 89, 152;
  --cl-grad: linear-gradient(135deg, #fca311, #ffd166);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0b1428 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0b1428 62%, black) 80%, white);
  --cl-texto-claro: #ffffff;
  --cl-mudo-claro: #b4bdcf;
}

[data-theme="dark"][data-tema="asfalto-ambar"] {
  --color-bg: #081a2d;
  --color-surface: #0a2742;
  --color-surface-elevated: #05355d;
  --color-text: #f3f7fb;
  --color-text-muted: #a9c7dd;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(254, 186, 83, 0.18);
  --color-border-strong: rgba(254, 186, 83, 0.42);
  --color-accent-300: #ffd083;
  --color-accent-400: #feba53;
  --color-accent-500: #feba53;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #081a2d;
  --color-accent-soft: rgba(254, 186, 83, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 254, 186, 83;
  --cl-v2-rgb: 84, 154, 190;
  --cl-v3-rgb: 21, 96, 139;
  --cl-grad: linear-gradient(135deg, #feba53, #8a5438);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #081a2d 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #081a2d 62%, black) 80%, white);
  --cl-texto-claro: #f3f7fb;
  --cl-mudo-claro: #a9c7dd;
}

[data-theme="dark"][data-tema="cosmico"] {
  --color-bg: #0a0a0f;
  --color-surface: #0f172a;
  --color-surface-elevated: #1a1f3b;
  --color-text: #f5f7fa;
  --color-text-muted: #a5adbd;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(108, 59, 255, 0.18);
  --color-border-strong: rgba(108, 59, 255, 0.42);
  --color-accent-300: #8f6bff;
  --color-accent-400: #6c3bff;
  --color-accent-500: #6c3bff;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #ffffff;
  --color-accent-soft: rgba(108, 59, 255, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 108, 59, 255;
  --cl-v2-rgb: 85, 181, 255;
  --cl-v3-rgb: 214, 178, 94;
  --cl-grad: linear-gradient(135deg, #6c3bff, #55b5ff);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0a0a0f 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0a0a0f 62%, black) 80%, white);
  --cl-texto-claro: #f5f7fa;
  --cl-mudo-claro: #a5adbd;
}

[data-theme="dark"][data-tema="verde-neon"] {
  --color-bg: #050d06;
  --color-surface: #0b160c;
  --color-surface-elevated: #12220f;
  --color-text: #eaffea;
  --color-text-muted: #93b393;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(55, 253, 18, 0.18);
  --color-border-strong: rgba(55, 253, 18, 0.42);
  --color-accent-300: #7fff00;
  --color-accent-400: #37fd12;
  --color-accent-500: #37fd12;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #031003;
  --color-accent-soft: rgba(55, 253, 18, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 55, 253, 18;
  --cl-v2-rgb: 0, 168, 107;
  --cl-v3-rgb: 127, 255, 0;
  --cl-grad: linear-gradient(135deg, #37fd12, #00a86b);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #050d06 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #050d06 62%, black) 80%, white);
  --cl-texto-claro: #eaffea;
  --cl-mudo-claro: #93b393;
}

[data-theme="dark"][data-tema="limao-floresta"] {
  --color-bg: #06231d;
  --color-surface: #0c342c;
  --color-surface-elevated: #076653;
  --color-text: #fffdee;
  --color-text-muted: #fffdee;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(227, 239, 38, 0.18);
  --color-border-strong: rgba(227, 239, 38, 0.42);
  --color-accent-300: #f1fa6e;
  --color-accent-400: #e3ef26;
  --color-accent-500: #e3ef26;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #06231d;
  --color-accent-soft: rgba(227, 239, 38, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 227, 239, 38;
  --cl-v2-rgb: 7, 102, 83;
  --cl-v3-rgb: 226, 251, 206;
  --cl-grad: linear-gradient(135deg, #e3ef26, #076653);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #06231d 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #06231d 62%, black) 80%, white);
  --cl-texto-claro: #fffdee;
  --cl-mudo-claro: #fffdee;
}

[data-theme="dark"][data-tema="violeta-eletrico"] {
  --color-bg: #010030;
  --color-surface: #0b0050;
  --color-surface-elevated: #160078;
  --color-text: #ffe5f1;
  --color-text-muted: #b0a1fe;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(240, 66, 255, 0.18);
  --color-border-strong: rgba(240, 66, 255, 0.42);
  --color-accent-300: #ff7dff;
  --color-accent-400: #f042ff;
  --color-accent-500: #f042ff;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #160078;
  --color-accent-soft: rgba(240, 66, 255, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 240, 66, 255;
  --cl-v2-rgb: 114, 38, 255;
  --cl-v3-rgb: 135, 245, 245;
  --cl-grad: linear-gradient(135deg, #f042ff, #7226ff);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #010030 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #010030 62%, black) 80%, white);
  --cl-texto-claro: #ffe5f1;
  --cl-mudo-claro: #b0a1fe;
}

[data-theme="dark"][data-tema="vidro-liquido"] {
  --color-bg: #090826;
  --color-surface: #100d36;
  --color-surface-elevated: #1a1450;
  --color-text: #f4f2ff;
  --color-text-muted: #aaa2d8;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(139, 92, 255, 0.18);
  --color-border-strong: rgba(139, 92, 255, 0.42);
  --color-accent-300: #a98aff;
  --color-accent-400: #8b5cff;
  --color-accent-500: #8b5cff;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #ffffff;
  --color-accent-soft: rgba(139, 92, 255, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 139, 92, 255;
  --cl-v2-rgb: 61, 139, 255;
  --cl-v3-rgb: 255, 138, 61;
  --cl-grad: linear-gradient(135deg, #8b5cff, #3d8bff);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #090826 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #090826 62%, black) 80%, white);
  --cl-texto-claro: #f4f2ff;
  --cl-mudo-claro: #aaa2d8;
}

[data-theme="dark"][data-tema="aurora"] {
  --color-bg: #0b1022;
  --color-surface: #0f1730;
  --color-surface-elevated: #162040;
  --color-text: #eef3ff;
  --color-text-muted: #9eadcb;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(74, 168, 255, 0.18);
  --color-border-strong: rgba(74, 168, 255, 0.42);
  --color-accent-300: #7cc0ff;
  --color-accent-400: #4aa8ff;
  --color-accent-500: #4aa8ff;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #04101f;
  --color-accent-soft: rgba(74, 168, 255, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 74, 168, 255;
  --cl-v2-rgb: 255, 159, 67;
  --cl-v3-rgb: 255, 93, 108;
  --cl-grad: linear-gradient(135deg, #4aa8ff, #7a5cff);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0b1022 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0b1022 62%, black) 80%, white);
  --cl-texto-claro: #eef3ff;
  --cl-mudo-claro: #9eadcb;
}

[data-theme="dark"][data-tema="estado-quantico"] {
  --color-bg: #030712;
  --color-surface: #0e0a24;
  --color-surface-elevated: #25104f;
  --color-text: #f3f0ff;
  --color-text-muted: #afa5d4;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(190, 242, 100, 0.18);
  --color-border-strong: rgba(190, 242, 100, 0.42);
  --color-accent-300: #d4f78f;
  --color-accent-400: #bef264;
  --color-accent-500: #bef264;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #030712;
  --color-accent-soft: rgba(190, 242, 100, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 190, 242, 100;
  --cl-v2-rgb: 45, 212, 191;
  --cl-v3-rgb: 140, 92, 255;
  --cl-grad: linear-gradient(135deg, #bef264, #2dd4bf);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #030712 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #030712 62%, black) 80%, white);
  --cl-texto-claro: #f3f0ff;
  --cl-mudo-claro: #afa5d4;
}

[data-theme="dark"][data-tema="vale-silicio"] {
  --color-bg: #0a1020;
  --color-surface: #111c38;
  --color-surface-elevated: #172a66;
  --color-text: #f8fafc;
  --color-text-muted: #b4bfce;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(96, 165, 250, 0.18);
  --color-border-strong: rgba(96, 165, 250, 0.42);
  --color-accent-300: #93c5fd;
  --color-accent-400: #60a5fa;
  --color-accent-500: #60a5fa;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #04122e;
  --color-accent-soft: rgba(96, 165, 250, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 96, 165, 250;
  --cl-v2-rgb: 129, 140, 248;
  --cl-v3-rgb: 56, 189, 248;
  --cl-grad: linear-gradient(135deg, #60a5fa, #1e40af);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0a1020 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0a1020 62%, black) 80%, white);
  --cl-texto-claro: #f8fafc;
  --cl-mudo-claro: #b4bfce;
}

[data-theme="dark"][data-tema="mar-profundo"] {
  --color-bg: #000814;
  --color-surface: #001d3d;
  --color-surface-elevated: #003566;
  --color-text: #f4f8ff;
  --color-text-muted: #b3c5dc;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(255, 195, 0, 0.18);
  --color-border-strong: rgba(255, 195, 0, 0.42);
  --color-accent-300: #ffd60a;
  --color-accent-400: #ffc300;
  --color-accent-500: #ffc300;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #000814;
  --color-accent-soft: rgba(255, 195, 0, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 255, 195, 0;
  --cl-v2-rgb: 59, 130, 246;
  --cl-v3-rgb: 14, 165, 233;
  --cl-grad: linear-gradient(135deg, #ffc300, #ff8c00);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #000814 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #000814 62%, black) 80%, white);
  --cl-texto-claro: #f4f8ff;
  --cl-mudo-claro: #b3c5dc;
}

[data-theme="dark"][data-tema="amarelo-azul"] {
  --color-bg: #000741;
  --color-surface: #04195a;
  --color-surface-elevated: #062a78;
  --color-text: #eff0f0;
  --color-text-muted: #afc0e3;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(238, 221, 85, 0.18);
  --color-border-strong: rgba(238, 221, 85, 0.42);
  --color-accent-300: #f5e98a;
  --color-accent-400: #eedd55;
  --color-accent-500: #eedd55;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #000741;
  --color-accent-soft: rgba(238, 221, 85, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 238, 221, 85;
  --cl-v2-rgb: 59, 130, 246;
  --cl-v3-rgb: 233, 173, 23;
  --cl-grad: linear-gradient(135deg, #eedd55, #095baf);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #000741 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #000741 62%, black) 80%, white);
  --cl-texto-claro: #eff0f0;
  --cl-mudo-claro: #afc0e3;
}

[data-theme="dark"][data-tema="capacete-ambar"] {
  --color-bg: #0b1430;
  --color-surface: #142652;
  --color-surface-elevated: #213878;
  --color-text: #eef3ff;
  --color-text-muted: #bdd0f1;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(193, 145, 27, 0.18);
  --color-border-strong: rgba(193, 145, 27, 0.42);
  --color-accent-300: #e0b04a;
  --color-accent-400: #c1911b;
  --color-accent-500: #c1911b;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #0b1430;
  --color-accent-soft: rgba(193, 145, 27, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 193, 145, 27;
  --cl-v2-rgb: 179, 68, 26;
  --cl-v3-rgb: 136, 184, 255;
  --cl-grad: linear-gradient(135deg, #c1911b, #b3441a);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0b1430 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0b1430 62%, black) 80%, white);
  --cl-texto-claro: #eef3ff;
  --cl-mudo-claro: #bdd0f1;
}

[data-theme="dark"][data-tema="robo-aco"] {
  --color-bg: #171f22;
  --color-surface: #1e282c;
  --color-surface-elevated: #2b3438;
  --color-text: #eef3f2;
  --color-text-muted: #b8c5c7;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(193, 209, 207, 0.18);
  --color-border-strong: rgba(193, 209, 207, 0.42);
  --color-accent-300: #e3ecea;
  --color-accent-400: #c1d1cf;
  --color-accent-500: #c1d1cf;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #171f22;
  --color-accent-soft: rgba(193, 209, 207, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 193, 209, 207;
  --cl-v2-rgb: 116, 139, 145;
  --cl-v3-rgb: 193, 209, 207;
  --cl-grad: linear-gradient(135deg, #c1d1cf, #748b91);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #171f22 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #171f22 62%, black) 80%, white);
  --cl-texto-claro: #eef3f2;
  --cl-mudo-claro: #b8c5c7;
}

[data-theme="dark"][data-tema="duna-marciana"] {
  --color-bg: #1f160f;
  --color-surface: #3c2c1e;
  --color-surface-elevated: #4a3b2e;
  --color-text: #f1ece6;
  --color-text-muted: #dbd1c7;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(185, 152, 124, 0.18);
  --color-border-strong: rgba(185, 152, 124, 0.42);
  --color-accent-300: #d3b9a0;
  --color-accent-400: #b9987c;
  --color-accent-500: #b9987c;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #1f160f;
  --color-accent-soft: rgba(185, 152, 124, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 185, 152, 124;
  --cl-v2-rgb: 128, 85, 57;
  --cl-v3-rgb: 221, 221, 216;
  --cl-grad: linear-gradient(135deg, #b9987c, #805539);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #1f160f 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #1f160f 62%, black) 80%, white);
  --cl-texto-claro: #f1ece6;
  --cl-mudo-claro: #dbd1c7;
}

[data-theme="dark"][data-tema="esmeralda-cobre"] {
  --color-bg: #04211b;
  --color-surface: #073a2e;
  --color-surface-elevated: #0b4d3d;
  --color-text: #f6f0e8;
  --color-text-muted: #d4ded4;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(201, 139, 94, 0.18);
  --color-border-strong: rgba(201, 139, 94, 0.42);
  --color-accent-300: #e3b087;
  --color-accent-400: #c98b5e;
  --color-accent-500: #c98b5e;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #1c0f07;
  --color-accent-soft: rgba(201, 139, 94, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 201, 139, 94;
  --cl-v2-rgb: 201, 139, 94;
  --cl-v3-rgb: 227, 176, 135;
  --cl-grad: linear-gradient(135deg, #c98b5e, #8f5a3a);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #04211b 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #04211b 62%, black) 80%, white);
  --cl-texto-claro: #f6f0e8;
  --cl-mudo-claro: #d4ded4;
}

[data-theme="dark"][data-tema="montanhas-escuras"] {
  --color-bg: #0e1116;
  --color-surface: #151b21;
  --color-surface-elevated: #29343e;
  --color-text: #eef2f4;
  --color-text-muted: #b9c3c9;
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(194, 206, 213, 0.18);
  --color-border-strong: rgba(194, 206, 213, 0.42);
  --color-accent-300: #dfe7eb;
  --color-accent-400: #c2ced5;
  --color-accent-500: #c2ced5;
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: #0e1116;
  --color-accent-soft: rgba(194, 206, 213, 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: 194, 206, 213;
  --cl-v2-rgb: 128, 144, 155;
  --cl-v3-rgb: 75, 90, 102;
  --cl-grad: linear-gradient(135deg, #c2ced5, #4b5a66);
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: color-mix(in srgb, #0e1116 62%, black);
  --cl-mudo-escuro: color-mix(in srgb, color-mix(in srgb, #0e1116 62%, black) 80%, white);
  --cl-texto-claro: #eef2f4;
  --cl-mudo-claro: #b9c3c9;
}

[data-theme="dark"][data-tema="personalizado"] {
  --color-bg: var(--p-bg);
  --color-surface: var(--p-surface);
  --color-surface-elevated: var(--p-elevated);
  --color-text: var(--p-text);
  --color-text-muted: var(--p-muted);
  --color-text-subtle: color-mix(in srgb, var(--color-text-muted) 100%, var(--color-bg));
  --color-border: rgba(var(--p-acento-rgb), 0.18);
  --color-border-strong: rgba(var(--p-acento-rgb), 0.42);
  --color-accent-300: var(--p-hover);
  --color-accent-400: var(--p-accent);
  --color-accent-500: var(--p-accent);
  --color-accent-600: color-mix(in srgb, var(--color-accent-400) 55%, var(--color-bg));
  --color-accent-700: color-mix(in srgb, var(--color-accent-400) 42%, var(--color-bg));
  --color-accent-800: color-mix(in srgb, var(--color-accent-400) 30%, var(--color-bg));
  --color-accent-900: color-mix(in srgb, var(--color-accent-400) 20%, var(--color-bg));
  --color-accent-950: color-mix(in srgb, var(--color-accent-400) 10%, var(--color-bg));
  --color-accent: var(--color-accent-400);
  --color-accent-fg: var(--p-fg);
  --color-accent-soft: rgba(var(--p-acento-rgb), 0.12);
  --color-accent-hover: var(--color-accent-300);
  --color-neutral-50: var(--color-text);
  --color-neutral-100: color-mix(in srgb, var(--color-text) 90%, var(--color-bg));
  --color-neutral-200: color-mix(in srgb, var(--color-text) 72%, var(--color-bg));
  --color-neutral-300: var(--color-text-muted);
  --color-neutral-400: color-mix(in srgb, var(--color-text) 42%, var(--color-bg));
  --color-neutral-500: color-mix(in srgb, var(--color-text) 30%, var(--color-bg));
  --color-neutral-600: color-mix(in srgb, var(--color-text) 20%, var(--color-bg));
  --color-neutral-700: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
  --color-neutral-800: color-mix(in srgb, var(--color-text) 9%, var(--color-bg));
  --color-neutral-900: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  --color-neutral-950: var(--color-bg);
  --cl-acento-rgb: var(--p-acento-rgb);
  --cl-v2-rgb: var(--p-v2-rgb);
  --cl-v3-rgb: var(--p-v3-rgb);
  --cl-grad: linear-gradient(135deg, var(--p-accent), var(--p-g2));
  --cl-campo: color-mix(in srgb, var(--color-surface-elevated) 80%, var(--color-text));
  --cl-texto-escuro: var(--p-texto-escuro);
  --cl-mudo-escuro: var(--p-mudo-escuro);
  --cl-texto-claro: var(--p-texto-claro);
  --cl-mudo-claro: var(--p-mudo-claro);
}

/* <<< TEMAS */

/* ---------------------------------------------------------------------------
   Estilo "Vidro com brilhos" (escolhido em Configurações > Aparência).
   Vidro grosso: borda de 2 px com luz, reflexo diagonal, tinta de cor e brilho
   que escorre pela borda de baixo, como nos cartões da tela de fitness em vidro
   (20/10/2026). Só no escuro. As cores vêm do tema: destaque, segunda e terceira.
   --------------------------------------------------------------------------- */
[data-theme="dark"][data-estilo="vidro"] body {
  background-image:
    radial-gradient(1200px 680px at 78% -12%, rgba(var(--cl-acento-rgb), 0.15), transparent 60%),
    radial-gradient(1000px 700px at -12% 108%, rgba(var(--cl-v2-rgb), 0.09), transparent 60%),
    radial-gradient(1px 1px at 18px 22px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 96px 74px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.3px 1.3px at 60px 130px, rgba(255, 255, 255, 0.45), transparent);
  background-size: auto, auto, 140px 150px, 140px 150px, 140px 150px;
  background-attachment: fixed;
}
[data-theme="dark"][data-estilo="vidro"] [data-card] {
  --v: var(--cl-acento-rgb);
  position: relative;
  border-width: 1.5px;
  border-color: rgba(var(--v), 0.34);
  /* Brilho concentrado no canto inferior direito, como nos cartões da referência. */
  background:
    /* Flare no canto de baixo à direita: núcleo claro pequeno e halo largo, tudo em degradê (sem linha dura). */
    radial-gradient(150px 30px at 88% 100%, rgba(255, 255, 255, 0.26), rgba(var(--v), 0.5) 40%, transparent 100%),
    radial-gradient(440px 110px at 88% 100%, rgba(var(--v), 0.36), rgba(var(--v), 0.1) 55%, transparent 100%),
    radial-gradient(75% 95% at 96% 118%, rgba(var(--v), 0.34), rgba(var(--v), 0.1) 45%, transparent 72%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0.015)),
    rgba(var(--v), 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset -2px -3px 10px -6px rgba(var(--v), 0.85),
    5px 7px 22px -12px rgba(var(--v), 0.5),
    0 16px 34px -22px rgba(0, 0, 0, 0.75);
}
/* Reflexo diagonal no canto de cima, como luz batendo no vidro. */
[data-theme="dark"][data-estilo="vidro"] [data-card]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 36%);
  pointer-events: none;
}
/* Vidro colorido em sequência, com as três cores do tema (destaque, segunda e terceira). */
[data-theme="dark"][data-estilo="vidro"] [data-card]:nth-child(3n + 2) {
  --v: var(--cl-v2-rgb);
}
[data-theme="dark"][data-estilo="vidro"] [data-card]:nth-child(3n) {
  --v: var(--cl-v3-rgb);
}
[data-theme="dark"][data-estilo="vidro"] [data-sidebar-vidro] {
  background:
    radial-gradient(120% 40% at 100% 108%, rgba(var(--cl-acento-rgb), 0.28), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(var(--cl-acento-rgb), 0.04);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-right: 1.5px solid rgba(var(--cl-acento-rgb), 0.3);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08), 6px 0 26px -16px rgba(var(--cl-acento-rgb), 0.45);
}
[data-theme="dark"][data-estilo="vidro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"][data-estilo="vidro"] textarea,
[data-theme="dark"][data-estilo="vidro"] select {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--cl-acento-rgb), 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="dark"][data-estilo="vidro"] input:focus-visible,
[data-theme="dark"][data-estilo="vidro"] textarea:focus-visible {
  box-shadow: 0 0 0 1px rgba(var(--cl-acento-rgb), 0.8), 0 0 22px -2px rgba(var(--cl-acento-rgb), 0.7);
}
@media (prefers-reduced-transparency: reduce) {
  [data-theme="dark"][data-estilo="vidro"] [data-card],
  [data-theme="dark"][data-estilo="vidro"] [data-sidebar-vidro] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Degradê do tema nos botões principais (todos os estilos, só no escuro). */
[data-theme="dark"] button.bg-accent:not(:disabled) {
  background-image: var(--cl-grad);
}
[data-theme="dark"][data-estilo="vidro"] button.bg-accent {
  box-shadow: 0 0 14px -4px rgba(var(--cl-acento-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* >>> ESTILOS E FUNDOS (gerado por .seed-local/estilos.js; não editar à mão) */
/* Listas de seleção (select): opções sólidas e legíveis em qualquer estilo, em vez de herdar fundo translúcido. */
[data-theme="dark"] select {
  color-scheme: dark;
}
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
  background-color: var(--color-surface-elevated, #0b1511);
  color: var(--color-text, #eef7e6);
}
[data-theme="light"] select option {
  background-color: #ffffff;
  color: #0d1a0f;
}

/* Luz e sombra dos estilos em relevo (variam com o modo). */
:root {
  --cl-luz: rgba(255, 255, 255, 0.07);
  --cl-sombra: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] {
  --cl-luz: rgba(255, 255, 255, 0.95);
  --cl-sombra: rgba(40, 55, 90, 0.2);
}

/* ===== 3D macio: cartões e botões em relevo, cantos bem redondos ===== */
[data-estilo="macio"] [data-card] {
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-surface-elevated) 88%, white 12%), var(--color-surface-elevated) 55%, color-mix(in srgb, var(--color-surface-elevated) 90%, black 10%));
  box-shadow:
    inset 1px 1px 0 var(--cl-luz),
    10px 12px 26px -8px var(--cl-sombra),
    -7px -7px 18px -6px var(--cl-luz);
}
[data-estilo="macio"] button.bg-accent,
[data-estilo="macio"] a.bg-accent {
  border-radius: 16px;
  background-image: var(--cl-grad);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.2),
    0 10px 18px -8px rgba(var(--cl-acento-rgb), 0.7);
}
[data-estilo="macio"] button:not(.bg-accent):not([role]) {
  border-radius: 14px;
}
[data-estilo="macio"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="macio"] textarea,
[data-estilo="macio"] select {
  border: 0;
  border-radius: 14px;
  background-color: var(--cl-campo, var(--color-surface));
  box-shadow: inset 3px 3px 8px var(--cl-sombra), inset -3px -3px 8px var(--cl-luz);
}
[data-estilo="macio"] [data-sidebar-vidro] {
  border-right: 0;
  box-shadow: 8px 0 24px -12px var(--cl-sombra), inset -1px 0 0 var(--cl-luz);
}
[data-estilo="macio"] .sidebar-ativo {
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 8px rgba(0, 0, 0, 0.2), 0 8px 16px -8px rgba(var(--cl-acento-rgb), 0.6);
}

/* ===== HUD tecnológico: cantos recortados, linhas de luz, letras de painel ===== */
[data-estilo="hud"] {
  --hud: rgba(var(--cl-acento-rgb), 0.95);
}
[data-estilo="hud"] [data-card] {
  position: relative;
  border: 1px solid rgba(var(--cl-acento-rgb), 0.28);
  border-radius: 2px;
  background:
    radial-gradient(130px 26px at 88% 100%, rgba(255, 255, 255, 0.22), rgba(var(--cl-v2-rgb), 0.5) 40%, transparent 100%),
    radial-gradient(380px 96px at 88% 100%, rgba(var(--cl-v2-rgb), 0.32), transparent 100%),
    linear-gradient(180deg, rgba(var(--cl-acento-rgb), 0.08), transparent 40%),
    color-mix(in srgb, var(--color-bg) 70%, transparent);
  box-shadow: inset 0 0 22px -12px rgba(var(--cl-acento-rgb), 0.5), 0 0 18px -8px rgba(var(--cl-acento-rgb), 0.45);
}
/* Colchetes de luz nos quatro cantos. */
[data-estilo="hud"] [data-card]::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--hud), var(--hud)) top left / 16px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top left / 2px 16px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 16px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 2px 16px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 2px 16px no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--cl-acento-rgb), 0.9));
}
[data-estilo="hud"] h1 {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-estilo="hud"] button.bg-accent {
  border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background-image: var(--cl-grad);
  box-shadow: none;
  letter-spacing: 0.04em;
}
[data-estilo="hud"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="hud"] textarea,
[data-estilo="hud"] select {
  border-radius: 0;
  border-color: rgba(var(--cl-acento-rgb), 0.4);
  background-color: rgba(var(--cl-acento-rgb), 0.05);
}
[data-estilo="hud"] [data-sidebar-vidro] {
  border-right: 1px solid rgba(var(--cl-acento-rgb), 0.45);
  box-shadow: 0 0 26px -10px rgba(var(--cl-acento-rgb), 0.55), inset -1px 0 0 rgba(var(--cl-acento-rgb), 0.2);
}
[data-estilo="hud"] .sidebar-ativo {
  border-radius: 0;
  box-shadow: inset 3px 0 0 var(--hud), 0 0 16px -4px rgba(var(--cl-acento-rgb), 0.5);
}

/* ===== Vidro fosco: leitoso, grosso, com aresta clara e borda que reflete (vídeo AI Sales Automation) ===== */
[data-estilo="fosco"] [data-card] {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.12)),
    rgba(var(--cl-acento-rgb), 0.05);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 26px 44px -22px rgba(0, 0, 0, 0.65);
}
/* Borda que reflete: degradê de luz que contorna o vidro (some no meio, aparece nos cantos). */
[data-estilo="fosco"] [data-card]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(140, 190, 255, 0.28) 28%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 160, 240, 0.24) 78%, rgba(255, 255, 255, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Reflexo macio de luz vinda do canto de cima à esquerda. */
[data-estilo="fosco"] [data-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
}
[data-estilo="fosco"] button.bg-accent {
  border-radius: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 52%), var(--cl-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(0, 0, 0, 0.2), 0 10px 22px -10px rgba(var(--cl-acento-rgb), 0.8);
}
[data-estilo="fosco"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="fosco"] textarea,
[data-estilo="fosco"] select {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-estilo="fosco"] [data-sidebar-vidro] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12), 8px 0 30px -18px rgba(0, 0, 0, 0.6);
}
/* Título da página em cápsula azul, com dois flares no topo (como a cápsula do vídeo). */
[data-estilo="fosco"] h1 {
  position: relative;
  display: inline-block;
  padding: 0.28em 0.95em;
  border: 1.5px solid rgba(120, 160, 255, 0.75);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(80, 100, 240, 0.3), rgba(14, 18, 66, 0.6));
  box-shadow: 0 0 26px -8px rgba(110, 150, 255, 0.75), inset 0 0 16px -8px rgba(120, 160, 255, 0.7);
}
[data-estilo="fosco"] h1::before,
[data-estilo="fosco"] h1::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 54px;
  height: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95), rgba(120, 170, 255, 0.6) 32%, transparent 72%);
  filter: blur(1.5px);
}
[data-estilo="fosco"] h1::before {
  left: 8%;
}
[data-estilo="fosco"] h1::after {
  right: 8%;
}

/* ===== Máquina sci-fi: cerâmica branca, parafusos, filete dourado, fresta e relevo ===== */
[data-estilo="maquina"] [data-card] {
  position: relative;
  border: 1px solid rgba(20, 22, 28, 0.28);
  border-radius: 10px;
  background:
    radial-gradient(circle 5px at 13px 13px, #20222a 0 38%, #fff 44% 56%, #aeb3bd 62%, transparent 68%),
    radial-gradient(circle 5px at calc(100% - 13px) 13px, #20222a 0 38%, #fff 44% 56%, #aeb3bd 62%, transparent 68%),
    radial-gradient(circle 5px at 13px calc(100% - 13px), #20222a 0 38%, #fff 44% 56%, #aeb3bd 62%, transparent 68%),
    radial-gradient(circle 5px at calc(100% - 13px) calc(100% - 13px), #20222a 0 38%, #fff 44% 56%, #aeb3bd 62%, transparent 68%),
    linear-gradient(90deg, rgba(var(--cl-acento-rgb), 1) 0 5px, rgba(0, 0, 0, 0.22) 5px 6px, transparent 6px),
    linear-gradient(180deg, #ffffff, color-mix(in srgb, #ffffff 84%, var(--color-bg)));
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -3px 0 rgba(0, 0, 0, 0.1),
    inset 0 0 0 4px rgba(255, 255, 255, 0.55),
    0 14px 20px -12px rgba(20, 24, 34, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Moldura de metal escovado: aresta cromada com brilho que corre pela borda. */
[data-estilo="maquina"] [data-card]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 4px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(0, 0, 0, 0.1) 1px 2px),
    linear-gradient(135deg, #f8f9fb 0%, #9aa1ad 22%, #ffffff 40%, #7d8490 58%, #e9ecf0 78%, #9aa1ad 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Fresta (como a alça no pé do painel). */
[data-estilo="maquina"] [data-card]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 54px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 3px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.55), rgba(20, 22, 28, 0.25));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-estilo="maquina"] button.bg-accent {
  border-radius: 8px;
  color: #1b1d23;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), var(--cl-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 4px 0 rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
[data-estilo="maquina"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="maquina"] textarea,
[data-estilo="maquina"] select {
  border-radius: 6px;
  border: 1px solid rgba(20, 22, 28, 0.35);
  background-color: #e7e9ee;
  color: #1b1d23;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.22), 0 1px 0 #fff;
}
[data-estilo="maquina"] [data-sidebar-vidro] {
  background: linear-gradient(180deg, #f6f7f9, #d3d7de);
  border-right: 3px solid rgba(var(--cl-acento-rgb), 1);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 8px 0 18px -10px rgba(20, 24, 34, 0.5);
}
[data-estilo="maquina"] h1,
[data-estilo="maquina"] h2 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ===== Gabinete hi-tech: fibra de carbono, filete dourado e brilho de laca ===== */
[data-estilo="gabinete"] [data-card] {
  position: relative;
  border: 1px solid rgba(var(--cl-acento-rgb), 0.85);
  border-radius: 14px;
  background-color: #121214;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 34%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.05) 0%, transparent 38%, transparent 62%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(27deg, #0e0e10 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #0e0e10 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, #1c1c20 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, #1c1c20 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #131316 10px, transparent 10px),
    linear-gradient(#17171a 25%, #121214 25%, #121214 50%, transparent 50%, transparent 75%, #1f1f23 75%, #1f1f23);
  background-size: auto, auto, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
  isolation: isolate;
  /* Camadas de peças: a moldura do cartão, duas placas empilhadas atrás (deslocadas, com sombra) e a placa interna na frente. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.7),
    inset 0 0 0 3px rgba(0, 0, 0, 0.85),
    inset 0 0 0 4px rgba(var(--cl-acento-rgb), 0.55),
    5px 6px 0 -1px #0c0c0e,
    5px 6px 0 0 rgba(var(--cl-acento-rgb), 0.5),
    10px 12px 0 -3px #08080a,
    10px 12px 0 -2px rgba(255, 255, 255, 0.1),
    14px 24px 30px -8px rgba(0, 0, 0, 0.95);
}
/* Placa interna em relevo: fica por cima da moldura, com sombra própria, filete dourado e listras no centro. */
[data-estilo="gabinete"] [data-card]::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 9px;
  pointer-events: none;
  background-color: #1a1a1e;
  background-image:
    linear-gradient(115deg, transparent 0 14%, rgba(255, 255, 255, 0.09) 18%, rgba(255, 255, 255, 0.02) 28%, transparent 32% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1.5px, transparent 1.5px 5px),
    linear-gradient(27deg, #0e0e10 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #0e0e10 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, #242428 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, #242428 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #151518 10px, transparent 10px),
    linear-gradient(#1b1b1f 25%, #151518 25%, #151518 50%, transparent 50%, transparent 75%, #222227 75%, #222227);
  background-size: auto, auto, 30% 100%, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
  background-position: 0 0, 0 0, 50% 0, 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.95),
    0 0 0 2px rgba(var(--cl-acento-rgb), 0.4),
    0 8px 14px -4px rgba(0, 0, 0, 0.9);
}
/* Peça dourada no pé do cartão (triângulo amarelo brilhante, como na referência). */
[data-estilo="gabinete"] [data-card]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 96px;
  height: 9px;
  transform: translateX(-50%);
  clip-path: polygon(0 100%, 14% 0, 86% 0, 100% 100%);
  pointer-events: none;
  background: linear-gradient(180deg, #fff3a0, rgba(var(--cl-acento-rgb), 1) 45%, rgba(var(--cl-v2-rgb), 1));
}
[data-estilo="gabinete"] button.bg-accent {
  border-radius: 12px;
  color: #17130a;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 52%), var(--cl-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -3px 5px rgba(0, 0, 0, 0.3), 0 8px 18px -8px rgba(var(--cl-acento-rgb), 0.85);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-estilo="gabinete"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="gabinete"] textarea,
[data-estilo="gabinete"] select {
  border-radius: 10px;
  border: 1px solid rgba(var(--cl-acento-rgb), 0.5);
  background-color: #0a0a0c;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Menu lateral: furos de grade (como a tela de ventilação do gabinete) e filete dourado. */
[data-estilo="gabinete"] [data-sidebar-vidro] {
  background-color: #0d0d0f;
  background-image:
    radial-gradient(circle 1.6px at 50% 50%, rgba(255, 255, 255, 0.1) 0 90%, transparent),
    linear-gradient(180deg, #1a1a1e, #0b0b0d);
  background-size: 9px 9px, auto;
  border-right: 2px solid rgba(var(--cl-acento-rgb), 0.95);
  box-shadow: 0 0 18px -4px rgba(var(--cl-acento-rgb), 0.5), inset -1px 0 0 rgba(255, 255, 255, 0.08);
}
[data-estilo="gabinete"] h1,
[data-estilo="gabinete"] h2 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ===== Chapa de cobre escovado: metal com fio de escova, brilho que corre pela chapa e aresta polida ===== */
[data-estilo="cobre"] [data-card] {
  position: relative;
  border: 1px solid rgba(255, 226, 196, 0.6);
  border-radius: 18px;
  background-color: #b97a4f;
  background-image:
    linear-gradient(180deg, rgba(255, 246, 232, 0.34), rgba(255, 246, 232, 0) 36%),
    linear-gradient(104deg, transparent 0 24%, rgba(255, 238, 218, 0.34) 38%, transparent 52%, rgba(255, 238, 218, 0.2) 68%, transparent 80%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(70, 32, 10, 0.1) 1px 2px, rgba(255, 255, 255, 0.03) 2px 3px),
    linear-gradient(150deg, #e2ab80 0%, #bd7e52 34%, #d39a68 58%, #94603f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 232, 0.75),
    inset 0 -2px 0 rgba(72, 34, 12, 0.4),
    inset 0 0 0 1px rgba(120, 66, 34, 0.35),
    0 18px 26px -16px rgba(0, 0, 0, 0.8),
    0 2px 0 rgba(0, 0, 0, 0.3);
}
/* Filete de luz na aresta de cima, como o corte polido de uma chapa. */
[data-estilo="cobre"] [data-card]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 240, 0.95), transparent);
}
[data-estilo="cobre"] button.bg-accent {
  border-radius: 999px;
  color: #1c0f07;
  border: 1px solid rgba(255, 226, 196, 0.6);
  background-color: #b97a4f;
  background-image:
    linear-gradient(180deg, rgba(255, 246, 232, 0.5), rgba(255, 246, 232, 0) 55%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(70, 32, 10, 0.1) 1px 2px),
    linear-gradient(150deg, #e2ab80, #bd7e52 45%, #94603f);
  box-shadow: inset 0 1px 0 rgba(255, 246, 232, 0.8), inset 0 -2px 0 rgba(72, 34, 12, 0.4), 0 8px 12px -6px rgba(0, 0, 0, 0.7);
  font-weight: 700;
}
[data-estilo="cobre"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="cobre"] textarea,
[data-estilo="cobre"] select {
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 196, 0.45);
  background-color: rgba(2, 22, 17, 0.9);
  /* Campo escuro dentro da chapa: o texto digitado e o exemplo são CLAROS (a chapa força texto escuro e o campo herdava isso). */
  color: #f6eee2;
  caret-color: #f6eee2;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 226, 196, 0.25);
}
[data-estilo="cobre"] input::placeholder,
[data-estilo="cobre"] textarea::placeholder {
  color: #cdbba6;
  opacity: 1;
}
:root[data-estilo="cobre"] main [data-card] select option {
  background-color: #0b2a22;
  color: #f6eee2;
}
/* Menu lateral: superfície do tema com aresta de cobre e fio de escova bem leve. */
[data-estilo="cobre"] [data-sidebar-vidro] {
  background-image: repeating-linear-gradient(0deg, rgba(255, 226, 196, 0.035) 0 1px, transparent 1px 3px);
  border-right: 2px solid rgba(201, 139, 94, 0.85);
  box-shadow: 8px 0 22px -12px rgba(0, 0, 0, 0.7);
}
[data-estilo="cobre"] h1,
[data-estilo="cobre"] h2 {
  letter-spacing: 0.04em;
}
/* O cobre é um metal de tom médio e fixo (não segue o destaque do tema): o texto sobre a chapa usa o tom escuro da paleta. */
:root[data-estilo="cobre"] main [data-card] {
  --color-text: var(--cl-texto-escuro, #1c0f07);
  --color-text-muted: #24150a;
  --color-text-subtle: #2a190c;
  color: var(--color-text);
}
/* Etiquetas e selos: a chapa é de metal médio, então a etiqueta vira uma peça escura com texto creme (texto escuro sobre fundo escuro era ilegível).
   Os selos de status (sucesso, aviso, erro, info) mantêm as próprias cores. */
:root[data-estilo="cobre"] main [data-card] .rounded-full.border {
  background-color: rgba(28, 16, 7, 0.9);
  border-color: rgba(246, 238, 226, 0.4);
  font-weight: 600;
}
:root[data-estilo="cobre"] main [data-card] .rounded-full.border:not(.bg-success-bg):not(.bg-warning-bg):not(.bg-error-bg):not(.bg-info-bg) {
  color: #f6eee2;
}
/* Linha da tabela sob o cursor ou marcada: escurece a chapa, em vez de tingir de roxo (o tingimento do tema derrubava o contraste do texto escuro). */
:root[data-estilo="cobre"] main [data-card] tr:hover,
:root[data-estilo="cobre"] main [data-card] tr[data-state="selected"] {
  background-color: rgba(60, 32, 12, 0.22);
}

/* ===== Materiais com borda 3D realista =====
   Toda borda 3D é feita de camadas: filete de LUZ na aresta de cima, corpo com degradê, aresta de SOMBRA embaixo e sombra projetada. ===== */

/* --- Neumorfismo neon: relevo escuro e macio, campos afundados, botões com aro de luz --- */
[data-estilo="neon"] [data-card] {
  border: 0;
  border-radius: 26px;
  background-color: var(--color-surface);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.2));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.07),
    inset -1px -1px 0 rgba(0, 0, 0, 0.35),
    10px 12px 24px -6px rgba(0, 0, 0, 0.78),
    -8px -8px 18px -4px rgba(255, 255, 255, 0.05);
}
[data-estilo="neon"] button.bg-accent,
[data-estilo="neon"] a.bg-accent {
  border-radius: 999px;
  background-color: var(--color-surface);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.22));
  color: var(--color-accent-300);
  text-shadow: 0 0 8px rgba(var(--cl-acento-rgb), 0.8);
  box-shadow:
    inset 0 0 0 2px rgba(var(--cl-acento-rgb), 0.9),
    inset 0 0 12px rgba(var(--cl-acento-rgb), 0.35),
    0 0 16px -2px rgba(var(--cl-acento-rgb), 0.6),
    7px 9px 16px -6px rgba(0, 0, 0, 0.8),
    -5px -5px 12px -4px rgba(255, 255, 255, 0.05);
}
[data-estilo="neon"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="neon"] textarea,
[data-estilo="neon"] select {
  border: 0;
  border-radius: 16px;
  background-color: var(--cl-campo, var(--color-surface));
  box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.7), inset -3px -3px 8px rgba(255, 255, 255, 0.05);
}
[data-estilo="neon"] [data-sidebar-vidro] {
  border-right: 0;
  box-shadow: 10px 0 26px -10px rgba(0, 0, 0, 0.85), inset -1px 0 0 rgba(255, 255, 255, 0.05);
}
[data-estilo="neon"] .sidebar-ativo {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(var(--cl-acento-rgb), 0.85), 0 0 14px -3px rgba(var(--cl-acento-rgb), 0.6);
}

/* --- Kit chanfrado: aresta clara em cima, sombra embaixo, botão em pílula brilhante, campo fundo --- */
[data-estilo="chanfrado"] [data-card] {
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  background-color: var(--color-surface-elevated);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 42%, rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 16px -8px rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-estilo="chanfrado"] button.bg-accent,
[data-estilo="chanfrado"] a.bg-accent {
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 52%), var(--cl-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 5px 9px -3px rgba(0, 0, 0, 0.75);
  font-weight: 700;
}
[data-estilo="chanfrado"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="chanfrado"] textarea,
[data-estilo="chanfrado"] select {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  background-color: color-mix(in srgb, var(--color-bg) 78%, black);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.13);
}
[data-estilo="chanfrado"] [data-sidebar-vidro] {
  border-right: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.09), 8px 0 18px -8px rgba(0, 0, 0, 0.85);
}
[data-estilo="chanfrado"] .sidebar-ativo {
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%), var(--cl-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.28), 0 3px 7px -2px rgba(0, 0, 0, 0.7);
}

/* --- Armadura polida: painel grafite, linha de luz interna e placas de metal no topo e no pé --- */
[data-estilo="armadura"] [data-card] {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--color-bg) 82%, black);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 32%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 0 0 2px rgba(8, 8, 12, 1),
    inset 0 0 0 3px rgba(236, 230, 255, 0.9),
    inset 0 0 20px 2px rgba(var(--cl-acento-rgb), 0.5),
    0 0 24px -6px rgba(var(--cl-acento-rgb), 0.55),
    0 20px 30px -16px rgba(0, 0, 0, 0.9);
}
[data-estilo="armadura"] [data-card]::before,
[data-estilo="armadura"] [data-card]::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 92px;
  height: 12px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent-400) 62%, white), var(--color-accent-500) 50%, color-mix(in srgb, var(--color-accent-500) 45%, black));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
[data-estilo="armadura"] [data-card]::before {
  top: -1px;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}
[data-estilo="armadura"] [data-card]::after {
  bottom: -1px;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}
[data-estilo="armadura"] button.bg-accent,
[data-estilo="armadura"] a.bg-accent {
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 48%), var(--cl-grad);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-estilo="armadura"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="armadura"] textarea,
[data-estilo="armadura"] select {
  border-radius: 6px;
  border: 1px solid rgba(236, 230, 255, 0.4);
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
[data-estilo="armadura"] [data-sidebar-vidro] {
  border-right: 1px solid rgba(236, 230, 255, 0.7);
  box-shadow: 0 0 24px -8px rgba(var(--cl-acento-rgb), 0.6), inset -1px 0 0 rgba(236, 230, 255, 0.25);
}

/* --- Vidro escuro: painel preto translúcido, contorno prateado, reflexo diagonal de borda dura e brilhos nas arestas --- */
[data-estilo="vidro-escuro"] [data-card] {
  position: relative;
  border: 1px solid rgba(220, 226, 238, 0.38);
  border-radius: 18px;
  background:
    linear-gradient(158deg, transparent 0 44%, rgba(255, 255, 255, 0.075) 44% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(8, 9, 12, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 24px 38px -20px rgba(0, 0, 0, 0.9);
}
[data-estilo="vidro-escuro"] [data-card]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) top center / 46% 1.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8) 50%, transparent) bottom center / 38% 1.5px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7) 50%, transparent) left center / 1.5px 36% no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.7) 50%, transparent) right center / 1.5px 36% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.75));
}
[data-estilo="vidro-escuro"] button.bg-accent,
[data-estilo="vidro-escuro"] a.bg-accent {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%), var(--cl-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 16px -4px rgba(var(--cl-acento-rgb), 0.7);
}
[data-estilo="vidro-escuro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
[data-estilo="vidro-escuro"] textarea,
[data-estilo="vidro-escuro"] select {
  border-radius: 12px;
  border: 1px solid rgba(220, 226, 238, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-estilo="vidro-escuro"] [data-sidebar-vidro] {
  border-right: 1px solid rgba(220, 226, 238, 0.3);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.12), 10px 0 26px -12px rgba(0, 0, 0, 0.9);
}

/* ===== Fundos (valem sobre qualquer estilo; o fundo é desenhado atrás de tudo) ===== */
/* A casca do app pinta o próprio fundo; nos fundos com desenho ela fica transparente para o desenho aparecer. */
:root[data-fundo="galaxia"] .min-h-dvh.bg-background,
:root[data-fundo="grade"] .min-h-dvh.bg-background,
:root[data-fundo="orbes"] .min-h-dvh.bg-background,
:root[data-fundo="painel"] .min-h-dvh.bg-background,
:root[data-fundo="scifi"] .min-h-dvh.bg-background {
  background-color: transparent;
}
:root[data-fundo="galaxia"] body {
  background-image:
    radial-gradient(900px 600px at 18% 12%, rgba(var(--cl-v3-rgb), 0.5), transparent 62%),
    radial-gradient(1000px 700px at 82% 78%, rgba(var(--cl-acento-rgb), 0.38), transparent 62%),
    radial-gradient(700px 500px at 60% 30%, rgba(var(--cl-v2-rgb), 0.28), transparent 62%),
    radial-gradient(1px 1px at 22px 31px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.4px 1.4px at 110px 70px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 64px 140px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.8px 1.8px at 170px 120px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30px 190px, rgba(255, 255, 255, 0.5), transparent);
  background-size: auto, auto, auto, 190px 210px, 190px 210px, 190px 210px, 190px 210px, 190px 210px;
  background-attachment: fixed;
}
:root[data-fundo="grade"] body {
  background-image:
    radial-gradient(900px 520px at 50% -8%, rgba(var(--cl-acento-rgb), 0.22), transparent 62%),
    linear-gradient(rgba(var(--cl-acento-rgb), 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cl-acento-rgb), 0.11) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  background-attachment: fixed;
}
:root[data-fundo="painel"] body {
  background-image:
    radial-gradient(900px 600px at 50% 16%, rgba(var(--cl-acento-rgb), 0.26), transparent 65%),
    radial-gradient(800px 600px at 14% 92%, rgba(var(--cl-v2-rgb), 0.18), transparent 65%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.05) 50%, transparent calc(50% + 1px)),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Sci-fi branco e ouro: placa clara com colunas douradas e lentes (desenhado em CSS, sem usar a imagem de referência). */
:root[data-fundo="scifi"] .min-h-dvh.bg-background {
  background-color: transparent;
}
:root[data-fundo="scifi"] body {
  background-color: #dfe2e7;
  background-image:
    linear-gradient(90deg, transparent 0 1.6%, rgba(var(--cl-acento-rgb), 0.95) 1.6% 2.4%, transparent 2.4% 97.6%, rgba(var(--cl-acento-rgb), 0.95) 97.6% 98.4%, transparent 98.4%),
    repeating-linear-gradient(90deg, transparent 0 319px, rgba(0, 0, 0, 0.07) 319px 320px),
    linear-gradient(180deg, #f3f4f6, #d6d9df 70%, #c4c8cf);
  background-repeat: no-repeat, repeat, no-repeat;
  background-attachment: fixed;
}
/* Contraste por área: cada tema tem um tom CLARO e um ESCURO de texto, tirados da própria paleta. A página e cada painel recebem o
   tom que contrasta com o seu fundo real (lib/contraste-auto.ts marca data-tom). O fundo Sci-fi, claro, já nasce com o tom escuro. */
:root[data-fundo="scifi"]:not([data-tema="personalizado"]) main,
:root:not([data-tema="personalizado"]) main[data-tom="escuro"],
main [data-tom="escuro"] {
  --color-text: var(--cl-texto-escuro, #12141a);
  --color-text-muted: var(--cl-mudo-escuro, #3a4150);
  --color-text-subtle: var(--cl-mudo-escuro, #454c5c);
  color: var(--color-text);
}
main [data-tom="claro"] {
  --color-text: var(--cl-texto-claro, #eef7e6);
  --color-text-muted: var(--cl-mudo-claro, #8fa892);
  --color-text-subtle: var(--cl-mudo-claro, #8fa892);
  color: var(--color-text);
}
/* Menu lateral sobre o fundo claro Sci-fi: vidro translúcido ficaria claro com texto claro. Vira superfície sólida do tema (exceto no material Máquina, que já é claro e usa texto escuro). */
:root[data-fundo="scifi"]:not([data-estilo="maquina"]) aside[data-sidebar-vidro] {
  background: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-fundo="scifi"] main [data-escuro] {
  --color-text: var(--cl-texto-orig);
  --color-text-muted: var(--cl-mudo-orig);
  --color-text-subtle: var(--cl-sutil-orig);
  color: var(--color-text);
}
/* Material Máquina: cartões e menu são claros (cerâmica), então o texto deles usa o tom escuro da paleta. */
:root[data-estilo="maquina"] main [data-card],
:root[data-estilo="maquina"] [data-sidebar-vidro] {
  --color-text: var(--cl-texto-escuro, #12141a);
  --color-text-muted: var(--cl-mudo-escuro, #3a4150);
  --color-text-subtle: var(--cl-mudo-escuro, #454c5c);
  color: var(--color-text);
}
/* Selos de status (Ativo etc.) em cartão claro: texto no tom escuro da paleta para manter o contraste. */
:root[data-estilo="maquina"] main [data-card] .rounded-full.border {
  color: var(--cl-texto-escuro, #12141a);
  font-weight: 600;
}
:root[data-fundo="orbes"] body {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 380px at 12% 14%, rgba(var(--cl-acento-rgb), 0.34), transparent 70%),
    radial-gradient(circle 440px at 90% 28%, rgba(var(--cl-v2-rgb), 0.3), transparent 70%),
    radial-gradient(circle 360px at 70% 96%, rgba(var(--cl-v3-rgb), 0.3), transparent 70%),
    radial-gradient(circle 160px at 36% 70%, rgba(var(--cl-v2-rgb), 0.22), transparent 70%);
  background-attachment: fixed;
}
/* Fontes escolhidas em Configurações > Aparência (lib/fontes.ts). Ficam AQUI, dentro do bloco gerado, para
   nenhuma regeneração apagá-las: sem estas três regras a escolha era salva e a prévia mudava, mas a tela inteira não. */
:root[data-fontes] body {
  font-family: var(--cl-fonte-texto, var(--font-sans));
}
:root[data-fontes] h1 {
  font-family: var(--cl-fonte-titulos, var(--font-sans));
}
:root[data-fontes] :is(h2, h3, h4, h5, h6) {
  font-family: var(--cl-fonte-subtitulos, var(--font-sans));
}
/* <<< ESTILOS E FUNDOS */