/* Temas da página pública e da conversa (F5+).
 *
 * Um bloco por tema, sobre as variáveis que `form.css` e `chat.css` já
 * declaram em `:root`. Acrescentar um tema é acrescentar um bloco aqui e uma
 * linha em `services/forms/themes.py` -- nada de migration.
 *
 * A cor de destaque (`--accent`) vem do servidor quando o formulário escolheu
 * uma; quando não escolheu, ela vem daqui, com a paleta do tema.
 */

/* -- Matrix ------------------------------------------------------------- */
/* Enviado pelo dono em 2026-09-23. Igual no claro e no escuro: o terminal
   verde não tem versão clara. */
[data-theme="matrix"] {
  --bg: #000000;
  --card: #050505;
  --field: #001a00;
  --line: #003b00;
  --text: #00ff41;
  --muted: #008f11;
  --error: #ff0000;
  --ok: #00ff41;
  --mine: #001a00;
  --mono: "VT323", ui-monospace, Consolas, monospace;
  letter-spacing: 0.06em;
}
/* `.pf-page` e o proprio elemento que carrega o tema, e nao um `body` dentro
   dele: e assim que a previa do painel -- que e uma `<div>`, e nao uma pagina
   -- recebe a fonte do tema sem ninguem copiar a regra para la. */
[data-theme="matrix"] body,
body[data-theme="matrix"],
.pf-page[data-theme="matrix"] {
  font-family: "VT323", ui-monospace, Consolas, monospace;
  font-size: 19px;
}
/* Cantos retos e brilho, como no tema original. */
[data-theme="matrix"] .pf-card,
[data-theme="matrix"] .pc-card {
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
}
[data-theme="matrix"] .pf-field input,
[data-theme="matrix"] .pf-field textarea,
[data-theme="matrix"] .pf-field select,
[data-theme="matrix"] .pc-compose textarea,
[data-theme="matrix"] .pf-submit,
[data-theme="matrix"] .pc-compose button,
[data-theme="matrix"] .pc-attach span {
  border-radius: 0;
}

/* -- Lavender Glass ----------------------------------------------------- */
/* Enviado pelo dono em 2026-09-23, com variante clara e escura. A clara é o
   padrão do tema; quem tiver o sistema no escuro recebe a escura. */
[data-theme="lavender-glass"] {
  --bg: #f7f7fd;
  --card: #ecebff;
  --field: #ffffff;
  --line: #e3e3ed;
  --text: #303044;
  --muted: #727284;
  --error: #ff1a40;
  --ok: #5b579c;
  --mine: #e8e5f9;
  --mono: "Roboto Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
[data-theme="lavender-glass"] .pf-card,
[data-theme="lavender-glass"] .pc-card {
  box-shadow: 0 4px 10px rgba(52, 52, 75, 0.12);
}
/* O texto do botão de enviar é branco sobre o roxo, e não o texto do tema. */
[data-theme="lavender-glass"] .pf-submit,
[data-theme="lavender-glass"] .pc-compose button {
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-theme="lavender-glass"] {
    --bg: #15151e;
    --card: #1e1e2a;
    --field: #37374b;
    --line: #37374b;
    --text: #e6e6f1;
    --muted: #a6a6ba;
    --error: #dd7687;
    --ok: #b2a5e9;
    --mine: #35334d;
    color-scheme: dark;
  }
  :where(:root:not([data-mode="light"])) [data-theme="lavender-glass"] .pf-submit,
  :where(:root:not([data-mode="light"])) [data-theme="lavender-glass"] .pc-compose button {
    color: #15151e;
  }
}
/* Escolhido "escuro" no botao da pagina: vale mesmo com o sistema no claro. */
:where(:root[data-mode="dark"]) [data-theme="lavender-glass"] {
  --bg: #15151e;
  --card: #1e1e2a;
  --field: #37374b;
  --line: #37374b;
  --text: #e6e6f1;
  --muted: #a6a6ba;
  --error: #dd7687;
  --ok: #b2a5e9;
  --mine: #35334d;
  color-scheme: dark;
}
:where(:root[data-mode="dark"]) [data-theme="lavender-glass"] .pf-submit,
:where(:root[data-mode="dark"]) [data-theme="lavender-glass"] .pc-compose button {
  color: #15151e;
}

/* -- Zen Linen ---------------------------------------------------------- */
/* Enviado pelo dono em 2026-09-23. Papel e tinta; o destaque é o laranja do
   tema, que é o único ponto de cor. */
[data-theme="zen-linen"] {
  --bg: #e9e4d8;
  --card: #f4efe4;
  --field: #ffffff;
  --line: #d2cbbb;
  --text: #1e1e1e;
  --muted: #5e5a52;
  --error: #dc2626;
  --ok: #5e5a52;
  --mine: #e6e4d7;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
  letter-spacing: 0.01em;
}
[data-theme="zen-linen"] .pf-card,
[data-theme="zen-linen"] .pc-card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
[data-theme="zen-linen"] .pf-submit,
[data-theme="zen-linen"] .pc-compose button {
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-theme="zen-linen"] {
    --bg: #141414;
    --card: #1c1c1c;
    --field: #2c2c2c;
    --line: #2c2c2c;
    --text: #e8e3da;
    --muted: #8e8a83;
    --error: #ef4444;
    --ok: #d1cfc0;
    --mine: #363636;
    color-scheme: dark;
  }
  :where(:root:not([data-mode="light"])) [data-theme="zen-linen"] .pf-card,
  :where(:root:not([data-mode="light"])) [data-theme="zen-linen"] .pc-card {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  }
}
/* Escolhido "escuro" no botao da pagina: vale mesmo com o sistema no claro. */
:where(:root[data-mode="dark"]) [data-theme="zen-linen"] {
  --bg: #141414;
  --card: #1c1c1c;
  --field: #2c2c2c;
  --line: #2c2c2c;
  --text: #e8e3da;
  --muted: #8e8a83;
  --error: #ef4444;
  --ok: #d1cfc0;
  --mine: #363636;
  color-scheme: dark;
}
:where(:root[data-mode="dark"]) [data-theme="zen-linen"] .pf-card,
:where(:root[data-mode="dark"]) [data-theme="zen-linen"] .pc-card {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* -- Violet ------------------------------------------------------------- */
/* Enviado pelo dono em 2026-10-04. Tem clara e escura; a pagina segue a
   preferencia do navegador de quem abre.

   Veio como um tema de shadcn, com quarenta e tantas variaveis. As nove que a
   pagina usa saem assim: fundo e texto diretos, a linha de `--border`, o
   apagado de `--muted-foreground`, e o campo de `--input` -- que e o tom que
   o proprio tema reserva para caixa de escrever.

   O roxo `#846feb` e o `--primary` dele, e e o destaque do tema. */
[data-theme="violet"] {
  --bg: #fbfbff;
  --card: #ffffff;
  --field: #f1f1f8;
  --line: #e2e2f2;
  --text: #1a1b25;
  --muted: #63637e;
  --error: #eb4f4f;
  --ok: #6a57d1;
  --mine: #f0effd;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  letter-spacing: -0.01em;
  color-scheme: light;
}
/* A sombra do tema: deslocada para baixo e bem aberta, com pouca opacidade --
   e o que da a sensacao de folha pousada em vez de colada. */
[data-theme="violet"] .pf-card,
[data-theme="violet"] .pc-card {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
/* O texto do botao e branco sobre o roxo, e nao o texto do tema -- que aqui e
   quase preto e sumiria. E o `--primary-foreground` do conjunto original. */
[data-theme="violet"] .pf-submit,
[data-theme="violet"] .pc-compose button {
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-theme="violet"] {
    --bg: #0b0a12;
    --card: #14131f;
    --field: #1d1b30;
    --line: #222135;
    --text: #e6e6f2;
    --muted: #9898b8;
    --error: #eb4f4f;
    --ok: #b5a9f2;
    --mine: #252244;
    color-scheme: dark;
  }
  :where(:root:not([data-mode="light"])) [data-theme="violet"] .pf-card,
  :where(:root:not([data-mode="light"])) [data-theme="violet"] .pc-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }
}
/* Escolhido "escuro" no botao da pagina: vale mesmo com o sistema no claro. */
:where(:root[data-mode="dark"]) [data-theme="violet"] {
  --bg: #0b0a12;
  --card: #14131f;
  --field: #1d1b30;
  --line: #222135;
  --text: #e6e6f2;
  --muted: #9898b8;
  --error: #eb4f4f;
  --ok: #b5a9f2;
  --mine: #252244;
  color-scheme: dark;
}
:where(:root[data-mode="dark"]) [data-theme="violet"] .pf-card,
:where(:root[data-mode="dark"]) [data-theme="violet"] .pc-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}


/* -- Rose --------------------------------------------------------------- */
/* Enviado pelo dono em 2026-10-04. Tem clara e escura; a pagina segue a
   preferencia do navegador de quem abre.

   O mesmo mapeamento dos outros temas de shadcn: fundo e texto diretos, a
   linha de `--border`, o apagado de `--muted-foreground`, e o campo de
   `--input`, que e o tom que o proprio tema reserva para caixa de escrever.
   Aqui `--card` ja e diferente do fundo nos dois lados, entao ele entra
   direto -- diferente do Violet, onde os dois eram a mesma cor. */
[data-theme="rose"] {
  --bg: #fff9f6;
  --card: #ffffff;
  --field: #faf3f0;
  --line: #ebe0da;
  --text: #5c4b43;
  --muted: #a18e84;
  --error: #e5484d;
  --ok: #b33e5d;
  --mine: #ffdbe4;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  letter-spacing: -0.01em;
  color-scheme: light;
}
[data-theme="rose"] .pf-card,
[data-theme="rose"] .pc-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-theme="rose"] {
    --bg: #1a1412;
    --card: #241d1a;
    --field: #332a26;
    --line: #332a26;
    --text: #eae0dc;
    --muted: #a18e84;
    --error: #e5484d;
    --ok: #ffb3c6;
    --mine: #3d252a;
    color-scheme: dark;
  }
  :where(:root:not([data-mode="light"])) [data-theme="rose"] .pf-card,
  :where(:root:not([data-mode="light"])) [data-theme="rose"] .pc-card {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }
}
/* Escolhido "escuro" no botao da pagina: vale mesmo com o sistema no claro. */
:where(:root[data-mode="dark"]) [data-theme="rose"] {
  --bg: #1a1412;
  --card: #241d1a;
  --field: #332a26;
  --line: #332a26;
  --text: #eae0dc;
  --muted: #a18e84;
  --error: #e5484d;
  --ok: #ffb3c6;
  --mine: #3d252a;
  color-scheme: dark;
}
:where(:root[data-mode="dark"]) [data-theme="rose"] .pf-card,
:where(:root[data-mode="dark"]) [data-theme="rose"] .pc-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* **O texto do botao e escuro, e nao branco.**

   O rosa deste tema (`#ff7ea5`) e claro: medido, branco em cima dele da
   contraste 2,39 -- o rotulo some. O marrom do proprio tema da 7,62.

   O conjunto original diz `--primary-foreground: #ffffff` na variante clara, e
   e justamente por isso que esta regra existe em vez de uma copia: ali o botao
   rosa com texto branco teria o mesmo 2,39. O tema escuro dele ja usa o escuro
   (`#1a1412`), que e a escolha certa -- aqui ela vale nas duas. */
[data-theme="rose"] .pf-submit,
[data-theme="rose"] .pc-compose button {
  color: #1a1412;
}

/* -- fundos ------------------------------------------------------------- */

/* A grade é desenhada em CSS: custo zero e nada para animar. */
[data-background="grid"] body,
body[data-background="grid"],
.pf-page[data-background="grid"] {
  background-image:
    linear-gradient(rgba(127, 127, 127, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 127, 127, 0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  /* `form.css` poe `no-repeat` no <body> (para o brilho de cima), e sem isto
     a grade desenhava um quadrado so, no canto. */
  background-repeat: repeat;
}

/* **O fundo também é da folha, e não só da página atrás dela.**

   Pedido do dono (2026-10-04): escolher um fundo e ver a página de trás mudar
   enquanto o cartão continuava o mesmo retângulo liso fazia a escolha parecer
   pela metade -- o cartão ocupa quase toda a tela, e é nele que se olha.

   **Nada aqui escreve `background-image` no cartão.** Ele é feito de quatro
   camadas, e a de baixo é o fio da borda em degradê; uma `background-image`
   escrita aqui apagaria as quatro e a borda sumiria sem erro nenhum. O que
   estas regras trocam são as variáveis que `form.css` e `chat.css` deixaram
   abertas -- a textura e a cor da folha.

   Vale para o formulário, a conversa e o menu de suporte, e para a prévia do
   construtor, que desenha `.pf-card` com o mesmo atributo. Os seletores vêm
   em três formas porque o atributo mora no `<html>` numa página, no `<body>`
   noutra, e na `.pf-page` da prévia. */

/* A grade: a folha vira papel quadriculado. A linha é mais fraca que a de
   trás (0,055 contra 0,10) para não competir com o texto, e a medida é a
   mesma -- 32px --, para as duas grades casarem em vez de brigar. */
[data-background="grid"] .pf-card,
[data-background="grid"] .pc-card,
.pf-page[data-background="grid"] .pf-card {
  --folha-trama-a: linear-gradient(rgba(127, 127, 127, 0.055) 1px, transparent 1px);
  --folha-trama-b: linear-gradient(90deg, rgba(127, 127, 127, 0.055) 1px, transparent 1px);
  --folha-trama-tamanho: 32px 32px;
}

/* As estrelas: a borda ganha um fio da cor do tema, para a folha parecer parte
   do céu e não um papel colado por cima dele.

   **A transparência não está aqui**: ela era uma regra fixa deste fundo e
   virou escolha do formulário (`data-card`, mais abaixo). Duas fontes para a
   mesma coisa fariam o fundo brigar com a escolha. */
[data-background="stars"] .pf-card,
.pf-page[data-background="stars"] .pf-card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* -- o acabamento da folha ---------------------------------------------- */

/* Normal, fosco ou transparente. `solid` não tem regra: é o estado em que a
   folha já nasce, e escrever uma regra para ele só criaria um segundo lugar
   onde a opacidade mora.

   As duas trocam `--folha-cor` -- a camada da cor do cartão --, e **nunca**
   `background-image` ou `background-color`: o fio da borda em degradê é a
   última camada da lista, e escrever a imagem aqui apagaria as quatro sem
   erro nenhum. Ver `form.css`, na regra do `.pf-card`.

   O contraste do texto é o limite dos números. Fosco pode descer mais porque
   o desfoque apaga o detalhe do que passa: o que chega atrás das letras é um
   borrão de cor, e não o céu inteiro. Transparente não desfoca nada, então
   para mais alto. */
/* **Os numeros sao o desenho inteiro aqui, e os primeiros erraram.**

   A primeira versao punha 72% e 86% de opacidade -- medidos para o texto nao
   perder contraste nenhum. O resultado foi que o dono escolheu "transparente"
   e **nada aconteceu**: 14% de transparencia de uma folha escura sobre um ceu
   escuro nao se ve. Uma escolha que nao muda nada e pior do que nao existir,
   porque quem escolheu fica procurando o erro.

   Agora os dois deixam passar de verdade, e quem segura a leitura e o que
   esta por baixo do texto, nao a opacidade da folha:

   - **fosco** e vidro: deixa passar bastante e **desfoca**, entao o que chega
     atras das letras e um borrao de cor e nunca um detalhe. E por isso que ele
     pode ser o mais transparente dos dois.
   - **transparente** nao desfoca nada -- o fundo passa inteiro, inclusive o
     que se move. Ele para mais alto exatamente por isso. */
/* **O que estava impedindo o fundo de aparecer.**

   O dono pos "transparente", viu um vermelho fosco e disse que parecia o tema
   bloqueando. Era quase isso, e a culpa e da propria tecnica da borda.

   O cartao e feito de quatro camadas de `background`, e a **ultima** -- o
   degrade do fio da borda -- e recortada em `border-box`: ela pinta o cartao
   INTEIRO, e so parece borda porque as tres de cima a cobrem. Enquanto a folha
   era opaca isso nao se via. Com a folha translucida, quem aparece por tras
   dela e justamente essa camada opaca, que comeca com 40% da cor de destaque
   -- o vermelho que ele viu -- e termina na cor da linha. O ceu nunca teve
   chance: havia um gradiente solido na frente dele.

   Com a folha translucida o fio tem de existir **so na faixa de um pixel**, e
   nao atras do cartao todo. Isso e um anel desenhado num `::before` com
   mascara: o degrade e pintado e depois recortado pelo proprio miolo, de modo
   que sobra exatamente a moldura.

   A tecnica das quatro camadas continua valendo no acabamento normal, que e o
   padrao e nao precisa de mascara nenhuma -- trocar os dois por um so faria
   toda folha opaca depender de um recurso que ela nao usa. */
[data-card="frosted"] .pf-card,
[data-card="frosted"] .pc-card,
[data-card="clear"] .pf-card,
[data-card="clear"] .pc-card,
.pf-page[data-card="frosted"] .pf-card,
.pf-page[data-card="clear"] .pf-card {
  /* A camada de baixo sai: ela era o bloqueio. */
  --folha-fio: none;
  position: relative;
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  [data-card="frosted"] .pf-card::before,
  [data-card="frosted"] .pc-card::before,
  [data-card="clear"] .pf-card::before,
  [data-card="clear"] .pc-card::before,
  .pf-page[data-card="frosted"] .pf-card::before,
  .pf-page[data-card="clear"] .pf-card::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 40%, var(--line)),
      var(--line) 55%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
}
/* Sem mascara nao ha anel, e um cartao translucido sem moldura some no fundo.
   Ai a borda volta a ser uma borda de verdade -- sem degrade, mas existindo. */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  [data-card="frosted"] .pf-card,
  [data-card="frosted"] .pc-card,
  [data-card="clear"] .pf-card,
  [data-card="clear"] .pc-card,
  .pf-page[data-card="frosted"] .pf-card,
  .pf-page[data-card="clear"] .pf-card {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  }
}

[data-card="frosted"] .pf-card,
[data-card="frosted"] .pc-card,
.pf-page[data-card="frosted"] .pf-card {
  --folha-cor: color-mix(in srgb, var(--card) 46%, transparent);
  /* `saturate` devolve a cor que o desfoque leva embora -- sem ele o vidro
     fica cinza em vez de fosco. */
  backdrop-filter: blur(22px) saturate(150%);
}
/* O que transforma "cartao translucido" em **vidro**: um fio de luz na beirada
   de cima e uma sombra na de baixo, como uma chapa de vidro pega a luz do
   ambiente na quina. Sem isto o fosco e so um retangulo desbotado. */
[data-card="frosted"] .pf-card,
.pf-page[data-card="frosted"] .pf-card {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 16px 40px rgba(0, 0, 0, 0.34);
}
[data-card="clear"] .pf-card,
[data-card="clear"] .pc-card,
.pf-page[data-card="clear"] .pf-card {
  --folha-cor: color-mix(in srgb, var(--card) 62%, transparent);
}
/* **A legibilidade nao vem da folha: vem de baixo do texto.**

   Com a folha deixando passar de verdade, o contraste nao pode mais depender
   dela. As caixas de escrever e os blocos de leitura ganham um fundo proprio
   um pouco mais solido -- e ali que o olho pousa, e e ali que o fundo nao pode
   atravessar. O resto do cartao continua vidro. */
[data-card="frosted"] .pf-field input,
[data-card="frosted"] .pf-field textarea,
[data-card="frosted"] .pf-field select,
[data-card="frosted"] .pc-compose textarea,
[data-card="clear"] .pf-field input,
[data-card="clear"] .pf-field textarea,
[data-card="clear"] .pf-field select,
[data-card="clear"] .pc-compose textarea {
  background-color: color-mix(in srgb, var(--field) 88%, transparent);
  backdrop-filter: blur(8px);
}
/* Sem fundo atrás não há o que atravessar, e a folha translúcida vira só uma
   folha mais clara (ou mais escura) do que devia. Com `none`, as duas voltam
   a ser a folha de sempre. */
[data-background="none"][data-card="frosted"] .pf-card,
[data-background="none"][data-card="clear"] .pf-card,
.pf-page[data-background="none"][data-card="frosted"] .pf-card,
.pf-page[data-background="none"][data-card="clear"] .pf-card {
  --folha-cor: var(--card);
  backdrop-filter: none;
}

/* O canvas das estrelas fica atrás de tudo e não recebe clique. */
.nk-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pf, .pc { position: relative; z-index: 1; }

/* -- a fonte, hospedada aqui -------------------------------------------- */
/* VT323, licença SIL Open Font 1.1. Servida pelo próprio site de propósito:
   a página proíbe recurso de terceiros para o navegador de quem denuncia não
   contatar mais ninguém. */
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/dashboard/static/forms/fonts/vt323-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/dashboard/static/forms/fonts/vt323-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* O verde do Matrix e claro demais para texto branco em cima: medido, o
   contraste era 1,37 (ilegivel). Preto sobre o verde da 15,3 e combina com o
   terminal. Achado em 2026-09-24, ao acrescentar os temas novos. */
[data-theme="matrix"] .pf-submit,
[data-theme="matrix"] .pc-compose button {
  color: #000000;
}

/* -- Slate Dark --------------------------------------------------------- */
/* Enviado pelo dono em 2026-09-24. Escuro dos dois lados: a variante clara do
   original deixaria o carmesim sobre branco, que não é o que o nome promete. */
[data-theme="slate-dark"] {
  --bg: #121212;
  --card: #1c1c1c;
  --field: #232323;
  --line: #332626;
  --text: #f5f5f5;
  --muted: #b0b0b0;
  --error: #e5484d;
  --ok: #d4af35;
  --mine: #2a1414;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
  letter-spacing: 0.015em;
}
[data-theme="slate-dark"] .pf-card,
[data-theme="slate-dark"] .pc-card {
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* O carmesim é escuro: o texto do botão fica branco, e não na cor do tema. */
[data-theme="slate-dark"] .pf-submit,
[data-theme="slate-dark"] .pc-compose button {
  color: #ffffff;
}

/* -- Cocoa Amber -------------------------------------------------------- */
/* Enviado pelo dono em 2026-09-24. Tem clara e escura; a página segue a
   preferência do navegador de quem abre. */
[data-theme="cocoa-amber"] {
  --bg: #f9f9f9;
  --card: #fcfcfc;
  --field: #ffffff;
  --line: #d8d8d8;
  --text: #202020;
  --muted: #646464;
  --error: #e54d2e;
  --ok: #644a40;
  --mine: #ffdfb5;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
  letter-spacing: 0.02em;
}
[data-theme="cocoa-amber"] .pf-card,
[data-theme="cocoa-amber"] .pc-card {
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
[data-theme="cocoa-amber"] .pf-submit,
[data-theme="cocoa-amber"] .pc-compose button {
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-theme="cocoa-amber"] {
    --bg: #111111;
    --card: #191919;
    --field: #222222;
    --line: #2a2a2a;
    --text: #eeeeee;
    --muted: #b4b4b4;
    --error: #e54d2e;
    --ok: #ffe0c2;
    --mine: #393028;
    color-scheme: dark;
  }
}
/* Escolhido "escuro" no botao da pagina: vale mesmo com o sistema no claro. */
:where(:root[data-mode="dark"]) [data-theme="cocoa-amber"] {
  --bg: #111111;
  --card: #191919;
  --field: #222222;
  --line: #2a2a2a;
  --text: #eeeeee;
  --muted: #b4b4b4;
  --error: #e54d2e;
  --ok: #ffe0c2;
  --mine: #393028;
  color-scheme: dark;
}

/* -- Caderno ------------------------------------------------------------ */
/* Pedido do dono em 2026-10-07. O desenho vem de modelos do Uiverse.io
   (autor mamyapro123, licença MIT), reescritos para as classes desta página:
   papel pontilhado, folha com fita adesiva e borda de caneta, opções como
   notas coladas e caixas de marcar que acendem como lâmpadas.

   Claro e noturno, como os outros temas de duas versões: segue o navegador
   de quem abre. O noturno é a versão "ácida" dos modelos -- papel preto,
   tinta clara, verde-limão e rosa.

   **As animações seguem a chave "Animar a página" do formulário**, como em
   todo o resto da página: ligada, as notas balançam, a fita treme e a
   lâmpada pisca; desligada, `form.css` já para tudo. */
[data-theme="caderno"] {
  --bg: #fdfbf7;
  --card: #fffdf6;
  --field: #ffffff;
  --line: #1e1e24;
  --text: #1e1e24;
  --muted: #5d5a52;
  --error: #d7263d;
  --ok: #1d8a5a;
  --mine: #fff3b0;
  --mono: "Patrick Hand", "Comic Sans MS", cursive;
  --cz-ink: #1e1e24;
  --cz-paper: #fffdf6;
  --cz-dot: #d3cbb9;
  --cz-shadow: #1e1e24;
  --cz-dash: rgba(30, 30, 36, 0.28);
  --cz-tape: rgba(24, 183, 255, 0.55);
  --cz-under: #18b7ff;
  --cz-glow: #ff7e82;
  --cz-focus: #8ef0ce;
  --cz-n1: #ffde59;
  --cz-n2: #8ef0ce;
  --cz-n3: #dcd0ff;
  --cz-n4: #fec195;
  --cz-on: #ffde59;
  --cz-socket: #dcd0ff;
  --cz-socket-on: #8ef0ce;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-mode="light"])) [data-theme="caderno"] {
    --bg: #0b0b0b;
    --card: #141414;
    --field: #1b1b1b;
    --line: #f8ffe8;
    --text: #f8ffe8;
    --muted: #b9b9a8;
    --error: #ff6b7a;
    --ok: #ccff00;
    --mine: #26331a;
    --cz-ink: #f8ffe8;
    --cz-paper: #141414;
    --cz-dot: #2e2e2e;
    --cz-shadow: #ff4f9a;
    --cz-dash: rgba(248, 255, 232, 0.25);
    --cz-tape: rgba(204, 255, 0, 0.55);
    --cz-under: #ccff00;
    --cz-glow: #18b7ff;
    --cz-focus: #ccff00;
    --cz-n1: #ccff00;
    --cz-n2: #ff8fc0;
    --cz-n3: #6fd6ff;
    --cz-n4: #b49cff;
    --cz-on: #ccff00;
    --cz-socket: #3a3450;
    --cz-socket-on: #ff4f9a;
    color-scheme: dark;
  }
}
/* Escolhido "escuro" no botao da pagina: vale mesmo com o sistema no claro. */
:where(:root[data-mode="dark"]) [data-theme="caderno"] {
  --bg: #0b0b0b;
  --card: #141414;
  --field: #1b1b1b;
  --line: #f8ffe8;
  --text: #f8ffe8;
  --muted: #b9b9a8;
  --error: #ff6b7a;
  --ok: #ccff00;
  --mine: #26331a;
  --cz-ink: #f8ffe8;
  --cz-paper: #141414;
  --cz-dot: #2e2e2e;
  --cz-shadow: #ff4f9a;
  --cz-dash: rgba(248, 255, 232, 0.25);
  --cz-tape: rgba(204, 255, 0, 0.55);
  --cz-under: #ccff00;
  --cz-glow: #18b7ff;
  --cz-focus: #ccff00;
  --cz-n1: #ccff00;
  --cz-n2: #ff8fc0;
  --cz-n3: #6fd6ff;
  --cz-n4: #b49cff;
  --cz-on: #ccff00;
  --cz-socket: #3a3450;
  --cz-socket-on: #ff4f9a;
  color-scheme: dark;
}

/* A letra manuscrita no tema todo, como a VT323 no Matrix. */
[data-theme="caderno"] body,
body[data-theme="caderno"],
.pf-page[data-theme="caderno"] {
  font-family: "Patrick Hand", "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 18px;
}
/* O papel pontilhado. Só quando nenhum fundo foi escolhido: estrelas, grade e
   os animados continuam valendo por cima do tema. */
[data-theme="caderno"][data-background="none"] body,
body[data-theme="caderno"][data-background="none"],
.pf-page[data-theme="caderno"][data-background="none"] {
  background-color: var(--bg);
  background-image: radial-gradient(var(--cz-dot) 1.3px, transparent 1.4px);
  background-size: 22px 22px;
}

/* A folha: borda de caneta com canto irregular, sombra sólida deslocada, uma
   linha tracejada por dentro (o contorno, que acompanha o canto) e a fita no
   alto. `overflow` visível para a fita poder sair da folha. */
[data-theme="caderno"] .pf-card,
[data-theme="caderno"] .pc-card {
  position: relative;
  overflow: visible;
  margin-top: 1rem;
  background: var(--cz-paper);
  border: 3px solid var(--cz-ink);
  border-radius: 14px 22px 12px 20px / 20px 12px 22px 14px;
  box-shadow: 8px 9px 0 var(--cz-shadow);
  outline: 2px dashed var(--cz-dash);
  outline-offset: -10px;
}
[data-theme="caderno"] .pf-card::after,
[data-theme="caderno"] .pc-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -0.85rem;
  left: 50%;
  width: 5.5rem;
  height: 1.45rem;
  transform: translateX(-50%) rotate(-3deg);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 5px, transparent 5px 10px),
    var(--cz-tape);
  border: 2px solid var(--cz-ink);
  pointer-events: none;
}
[data-animations="on"][data-theme="caderno"] .pf-card::after,
[data-animations="on"][data-theme="caderno"] .pc-card::after {
  animation: cz-fita 4s ease-in-out infinite alternate;
}
[data-theme="caderno"] .pf-banner {
  border-radius: 11px 19px 0 0;
  border-bottom: 3px solid var(--cz-ink);
}
[data-theme="caderno"] .pf-stamp,
[data-theme="caderno"] .pc-stamp,
[data-theme="caderno"] .mp-stamp,
[data-theme="caderno"] .form-preview__stamp {
  padding: 0.1rem 0.7rem;
  font: 400 0.85rem/1.5 "Patrick Hand", cursive;
  letter-spacing: 0.12em;
  color: var(--cz-paper);
  background: var(--cz-ink);
  border: 2px solid var(--cz-ink);
  border-radius: 999px 999px 999px 6px;
  box-shadow: 3px 3px 0 var(--cz-shadow);
}
[data-theme="caderno"] .pf-head h1 {
  position: relative;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.05;
  padding-bottom: 0.5rem;
}
/* O sublinhado rabiscado sob o título. */
[data-theme="caderno"] .pf-head h1::after {
  content: "";
  position: absolute;
  left: 0.1rem;
  bottom: 0;
  width: min(9rem, 60%);
  height: 0.6rem;
  border-bottom: 4px solid var(--cz-under);
  border-radius: 50%;
  transform: rotate(-2deg);
}
[data-theme="caderno"] .pf-label { font-weight: 400; font-size: 1.1em; }

/* Os campos: borda de caneta e sombra pequena; o foco é um contorno
   tracejado, que continua aparecendo no modo de alto contraste. */
[data-theme="caderno"] .pf-field input[type="text"],
[data-theme="caderno"] .pf-field input[type="number"],
[data-theme="caderno"] .pf-field input[type="date"],
[data-theme="caderno"] .pf-field textarea,
[data-theme="caderno"] .pf-field select,
[data-theme="caderno"] .pf-row input,
[data-theme="caderno"] .pc-compose textarea {
  color: var(--text);
  background: var(--field);
  border: 2.5px solid var(--cz-ink);
  border-radius: 14px 22px 12px 20px / 20px 12px 22px 14px;
  box-shadow: 3px 3px 0 var(--cz-shadow);
}
[data-theme="caderno"] .pf-field input:focus,
[data-theme="caderno"] .pf-field textarea:focus,
[data-theme="caderno"] .pf-field select:focus,
[data-theme="caderno"] .pc-compose textarea:focus {
  outline: 3px dashed var(--cz-focus);
  outline-offset: 4px;
  border-color: var(--cz-ink);
  box-shadow: 4px 4px 0 var(--cz-shadow);
}

/* As caixas de marcar e de escolha viram **lâmpadas**: o soquete listrado à
   esquerda e o bulbo à direita. Continuam sendo o `input` nativo -- teclado,
   leitor de tela e o "obrigatório" seguem iguais --, só sem a aparência do
   sistema. Marcada, acende: bulbo amarelo, soquete menta e o halo tracejado
   (o contorno, que não precisa de pseudo-elemento no `input`). */
[data-theme="caderno"] .pf-choice input[type="checkbox"],
[data-theme="caderno"] .pf-choice input[type="radio"],
[data-theme="caderno"] .fp-choice input[type="checkbox"],
[data-theme="caderno"] .fp-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  font-size: inherit;
  width: 2.8em;
  height: 1.45em;
  margin: 0 0.35rem 0 0;
  cursor: pointer;
  border: 2.5px solid var(--cz-ink);
  border-radius: 40% 999px 999px 40% / 50% 999px 999px 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(30, 30, 36, 0.18) 4px 6px) 0 0 / 34% 100% no-repeat,
    linear-gradient(90deg, var(--cz-socket) 0 34%, var(--cz-paper) 34%);
  box-shadow: 2px 2px 0 var(--cz-shadow);
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="caderno"] .pf-choice input[type="radio"],
[data-theme="caderno"] .fp-choice input[type="radio"] {
  border-radius: 999px;
}
[data-theme="caderno"] .pf-choice input:checked,
[data-theme="caderno"] .fp-choice input:checked {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(30, 30, 36, 0.18) 4px 6px) 0 0 / 34% 100% no-repeat,
    linear-gradient(90deg, var(--cz-socket-on) 0 34%, var(--cz-on) 34%);
  outline: 2px dashed var(--cz-glow);
  outline-offset: 3px;
  transform: translateX(2px) translateY(-1px);
}
[data-animations="on"][data-theme="caderno"] .pf-choice input:checked,
[data-animations="on"][data-theme="caderno"] .fp-choice input:checked {
  animation: cz-acende 0.45s ease-out;
}
[data-theme="caderno"] .pf-choice input:focus-visible {
  box-shadow: 2px 2px 0 var(--cz-shadow), 0 0 0 4px var(--cz-focus);
}

/* As opções do menu viram notas coladas: uma cor pastel por posição, borda de
   caneta irregular, sombra sólida e a fita no canto. O texto é sempre escuro,
   porque a nota é clara nos dois temas. */
[data-theme="caderno"] .pf-option,
[data-theme="caderno"] .mp-option {
  position: relative;
  --cz-nota: var(--cz-n1);
  color: #1e1e24;
  background: var(--cz-nota);
  border: 3px solid var(--cz-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 5px 6px 0 var(--cz-shadow);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
[data-theme="caderno"] .pf-option:nth-child(4n+2),
[data-theme="caderno"] .mp-option:nth-child(4n+2) { --cz-nota: var(--cz-n2); transform: rotate(0.8deg); }
[data-theme="caderno"] .pf-option:nth-child(4n+3),
[data-theme="caderno"] .mp-option:nth-child(4n+3) { --cz-nota: var(--cz-n3); transform: rotate(-0.6deg); }
[data-theme="caderno"] .pf-option:nth-child(4n+4),
[data-theme="caderno"] .mp-option:nth-child(4n+4) { --cz-nota: var(--cz-n4); transform: rotate(0.5deg); }
[data-theme="caderno"] .pf-option-description,
[data-theme="caderno"] .mp-option-description { color: rgba(30, 30, 36, 0.78); }
[data-theme="caderno"] .pf-option-label,
[data-theme="caderno"] .mp-option-label { font-weight: 400; font-size: 1.15em; }
[data-theme="caderno"] .pf-option:hover,
[data-theme="caderno"] .pf-option:focus-visible,
[data-theme="caderno"] .mp-option:hover {
  border-color: var(--cz-ink);
  transform: translateY(-6px) rotate(-1.5deg);
  box-shadow: 8px 11px 0 var(--cz-shadow);
  outline: none;
}
[data-animations="on"][data-theme="caderno"] .pf-option:hover,
[data-animations="on"][data-theme="caderno"] .pf-option:focus-visible,
[data-animations="on"][data-theme="caderno"] .mp-option:hover {
  animation: cz-balanca 0.35s ease-in-out infinite alternate;
}
/* A moldura da imagem vira um círculo desenhado à mão, que respira. */
[data-theme="caderno"] .pf-option-art,
[data-theme="caderno"] .mp-option-art {
  border: 3px solid #1e1e24 !important;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50% !important;
  background: #ffffff !important;
  box-shadow: 3px 3px 0 #ff4f9a;
}
[data-animations="on"][data-theme="caderno"] .pf-option-art,
[data-animations="on"][data-theme="caderno"] .mp-option-art {
  animation: cz-bolha 4s ease-in-out infinite;
}
[data-theme="caderno"] .pf-option-initial,
[data-theme="caderno"] .mp-option-initial { color: #1e1e24; background: transparent; }
[data-theme="caderno"] .pf-option-go,
[data-theme="caderno"] .mp-option-go { color: #1e1e24 !important; }

/* O botão de enviar do tema é o rabisco amarelo -- quando o formulário
   deixou o modelo padrão. Um modelo escolhido no painel continua mandando. */
[data-theme="caderno"][data-buttons="solid"] .pf-submit,
[data-theme="caderno"] .pc-compose button,
[data-theme="caderno"] .pf-chat-open {
  color: #1e1e24;
  background: var(--cz-on);
  border: 3px solid var(--cz-ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 5px 0 var(--cz-shadow);
  font-family: "Patrick Hand", cursive;
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
[data-theme="caderno"][data-buttons="solid"] .pf-submit:hover:not(:disabled),
[data-theme="caderno"] .pc-compose button:hover:not([disabled]),
[data-theme="caderno"] .pf-chat-open:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 6px 8px 0 var(--cz-shadow);
  filter: none;
}
[data-theme="caderno"][data-buttons="solid"] .pf-submit:active:not(:disabled),
[data-theme="caderno"] .pc-compose button:active:not([disabled]) {
  transform: translate(3px, 4px);
  box-shadow: 1px 1px 0 var(--cz-shadow);
}
[data-theme="caderno"] .pc-msg {
  border: 2px solid var(--cz-ink);
  border-radius: 14px 22px 12px 20px / 20px 12px 22px 14px;
  box-shadow: 3px 3px 0 var(--cz-shadow);
}

@keyframes cz-fita {
  from { transform: translateX(-50%) rotate(-4deg) scale(1); }
  to { transform: translateX(-50%) rotate(-1.5deg) scale(1.03); }
}
@keyframes cz-balanca {
  from { transform: translateY(-6px) rotate(-2.5deg); }
  to { transform: translateY(-6px) rotate(2.5deg); }
}
@keyframes cz-bolha {
  0%, 100% { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; transform: translateY(0); }
  50% { border-radius: 52% 48% 45% 55% / 45% 55% 48% 52%; transform: translateY(-3px); }
}
@keyframes cz-acende {
  0% { transform: scale(0.85); filter: brightness(1.4); }
  60% { transform: scale(1.12) translateX(2px); }
  100% { transform: translateX(2px) translateY(-1px); }
}

/* Patrick Hand, licença SIL Open Font 1.1 (`fonts/LICENSE-PatrickHand.txt`).
   Servida pelo próprio site, como a VT323. */
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/dashboard/static/forms/fonts/patrick-hand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/dashboard/static/forms/fonts/patrick-hand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* == Claro ou escuro, escolhido por quem preenche (Fase 5b) ===============
   O `modo.js` poe `data-mode="light|dark"` no <html> quando a pessoa usa o
   botao do canto. Sem escolha, nada aqui vale e cada tema faz o de sempre.

   Os temas com as duas versoes ja respondem acima: o bloco escuro deles vale
   com o sistema no escuro **e sem** "claro" escolhido, ou com "escuro"
   escolhido. Os prefixos estao em `:where()` para nao mudar a forca de regra
   nenhuma -- a ordem do arquivo continua decidindo, como antes.

   O Padrao e o Slate Dark nasceram so escuros: aqui eles ganham a versao
   clara, com a mesma cor de destaque. O Matrix nao tem versao clara (o
   terminal verde e o tema), e nele o botao some. */
:where(:root[data-mode="light"]) [data-theme="default"] {
  --bg: #f4f2f7;
  --card: #ffffff;
  --field: #f7f6fa;
  --line: #dcd7e4;
  --text: #1e1b25;
  --muted: #645d70;
  --error: #c62f3a;
  --ok: #1d8a57;
  --mine: #f1ecf7;
  color-scheme: light;
}
:where(:root[data-mode="light"]) [data-theme="slate-dark"] {
  --bg: #eef0f3;
  --card: #ffffff;
  --field: #f5f6f8;
  --line: #d8d2d2;
  --text: #17181b;
  --muted: #5f636b;
  --error: #c8323a;
  --ok: #9a7a12;
  --mine: #f7eded;
  color-scheme: light;
}

.pf-modo {
  position: fixed; top: 0.85rem; right: 0.85rem; z-index: 60;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
  border-radius: 999px; cursor: pointer;
  color: var(--accent, var(--text)); background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease, color 0.15s ease;
}
.pf-modo:hover {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 18px rgba(0, 0, 0, 0.22);
}
.pf-modo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-modo svg {
  width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pf-modo__lua { fill: currentColor; stroke: none; }
/* Mostra para onde vai: no escuro, o sol (clicar clareia); no claro, a lua. */
.pf-modo[data-atual="dark"] .pf-modo__lua,
.pf-modo:not([data-atual="dark"]) .pf-modo__sol { display: none; }

/* -- o botao com a cara de cada tema ---------------------------------------
   O mesmo desenho do resto do tema: a curva dos cantos, a sombra e a cor da
   folha dele. Matrix nao tem versao clara, e nele o botao some. */
[data-theme="matrix"] .pf-modo { display: none; }
/* Lavender Glass: vidro lilas, sombra baixa e roxa. */
[data-theme="lavender-glass"] .pf-modo {
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 4px 10px rgba(52, 52, 75, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
/* Zen Linen: um quadrado de linho, com a borda de tinta fina. */
[data-theme="zen-linen"] .pf-modo {
  border-radius: 6px; background: var(--card);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Violet: folha branca de cantos largos; o roxo enche no hover. */
[data-theme="violet"] .pf-modo {
  border-radius: 12px; background: var(--card); border-color: var(--line);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
[data-theme="violet"] .pf-modo:hover { background: var(--accent); color: #ffffff; }
/* Rose: a pilula rosada do tema, sem borda. */
[data-theme="rose"] .pf-modo {
  background: var(--mine); border-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* Slate Dark: canto quase reto, filete carmesim e o desenho em dourado. */
[data-theme="slate-dark"] .pf-modo {
  border-radius: 4px; color: var(--ok); background: var(--card);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* Cocoa Amber: o ambar do tema por baixo do desenho em cacau. No escuro o
   cacau sumiria no fundo; `--ok` e o par certo nas duas versoes. */
[data-theme="cocoa-amber"] .pf-modo {
  border-radius: 0.5rem; color: var(--ok); background: var(--mine); border-color: var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Caderno: uma nota colada, torta, com o traco de caneta e a sombra dura. A
   nota e clara nas duas versoes (amarela; limao no noturno), e o desenho fica
   na tinta escura. */
[data-theme="caderno"] .pf-modo {
  border-radius: 10px; color: #1e1e24;
  border: 2px solid var(--cz-ink, currentColor); box-shadow: 3px 3px 0 var(--cz-shadow, currentColor);
  background: var(--cz-n1, var(--card)); transform: rotate(-3deg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-theme="caderno"] .pf-modo:hover {
  transform: rotate(-3deg) translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--cz-shadow, currentColor);
}