/* ========================================================================
   PHANTOM UNIT — CANONICAL DESIGN SYSTEM (Acid Green & Lemon Milk)
   Canonical tokens & shared components.
   All pages import this file. Page-specific overrides go inline.
   ======================================================================== */

/* ┌────────────────────────────────────────────────────────────────────────┐
   │  REGIÃO GERADA — a fonte é design-system/fonts/fonts.css.               │
   │  Está embutida aqui (e não num @import) porque 11 das 12 telas carregam │
   │  só este arquivo. Uma requisição, uma fonte de verdade.                 │
   └────────────────────────────────────────────────────────────────────────┘ */
/* @fontes:inicio */
/* ==========================================================================
   PHANTOM UNIT — TIPOGRAFIA
   Lemon Milk é a única família da marca. Decisão do Nathan, 19/08/2026.

   ELA TEM TRÊS PESOS DE VERDADE, e só esses três existem no sistema:

     300  light    texto corrido, célula de tabela, legenda
     400  normal   campo, botão secundário, valor de linha
     700  bold     título, rótulo, KPI, botão principal

   Pedir 500, 600, 800 ou 900 não cria peso novo. Ou o navegador engorda a
   letra sozinho (o "negrito falso", que borra a Lemon Milk porque ela já é
   larga), ou cai num arquivo que já existe e a tela fica com dois pesos
   diferentes com o mesmo nome. Os aliases lá embaixo existem só como rede:
   se algum HTML gerado por fora pedir 800, ele recebe o Bold de verdade em
   vez de um borrão. No código da casa, use os três.

   Os TAMANHOS não moram aqui — moram em phantom-system.css, no :root,
   como --fs-*. Um lugar só.

   Formato: woff2 primeiro (484 KB → 157 KB no total), otf como reserva
   pra navegador velho.
   ========================================================================== */

/* ── 700 · BOLD ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'LemonMilk';
  src: url('/fonts/LemonMilkbold.woff2') format('woff2'),
       url('/fonts/LemonMilkbold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LemonMilk';
  src: url('/fonts/LemonMilkbolditalic.woff2') format('woff2'),
       url('/fonts/LemonMilkbolditalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ── 400 · NORMAL ───────────────────────────────────────────────────────── */
@font-face {
  font-family: 'LemonMilk';
  src: url('/fonts/LemonMilk.woff2') format('woff2'),
       url('/fonts/LemonMilk.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LemonMilk';
  src: url('/fonts/LemonMilkitalic.woff2') format('woff2'),
       url('/fonts/LemonMilkitalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ── 300 · LIGHT ────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'LemonMilk';
  src: url('/fonts/LemonMilklight.woff2') format('woff2'),
       url('/fonts/LemonMilklight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LemonMilk';
  src: url('/fonts/LemonMilklightitalic.woff2') format('woff2'),
       url('/fonts/LemonMilklightitalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* ── REDE DE SEGURANÇA ──────────────────────────────────────────────────────
   Peso que o sistema não usa, apontado pro arquivo mais próximo. Serve pra
   HTML de e-mail, texto colado e conteúdo gerado por fora não virarem borrão.
   Não escreva estes pesos em código novo — o portão reprova.
   ───────────────────────────────────────────────────────────────────────── */
@font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkbold.woff2') format('woff2');  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkbold.woff2') format('woff2');  font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilk.woff2') format('woff2');      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilk.woff2') format('woff2');      font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilklight.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilklight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
/* @fontes:fim */

/* ── Tokens Canônicos ─────────────────────────────────────────────────── */
/* ┌────────────────────────────────────────────────────────────────────────┐
   │  REGIÃO GERADA — não edite daqui até o marcador de fim.                 │
   │  A fonte é design-system/tokens/tokens.json.                            │
   │  Mudou um token? Edita lá e roda:  node design-system/build.mjs         │
   └────────────────────────────────────────────────────────────────────────┘ */
/* @tokens:inicio */
:root {

  /* ── COR ─────────────────────────────────────────────────────────────── */
  --bg:              #000000;  /* fundo absoluto de tela, post e vídeo */
  --card:            #121212;  /* superfície de cartão, modal, painel */
  --card-alto:       #181818;  /* cartão sobre cartão, linha zebrada */
  --border:          #222222;  /* divisória padrão */
  --border-bright:   #2C2C2C;  /* divisória em destaque, contorno de campo em foco */
  --green:           #B3FF00;  /* ACENTO UNICO da marca. Medido do ACID GREEN.png em 20/08/2026 — rgb(179,255,0) */
  --green-rgb:       179, 255, 0;  /* os canais do verde, pra rgba() com alpha proprio: rgba(var(--green-rgb), .35) */
  --green-hover:     #A1E500;  /* o verde pressionado */
  --green-dim:       rgba(179, 255, 0, 0.15);  /* fundo de selo e faixa em verde translúcido */
  --text:            #ffffff;  /* texto de leitura */
  --muted:           #888888;  /* metadado, legenda, placeholder */
  --muted-dim:       #52525b;  /* ⚠️ resíduo da paleta zinc antiga — candidato a morrer, conferir os usos antes */
  --danger:          #ef4444;  /* ação destrutiva. NÃO é o vermelho do semáforo */
  --danger-dim:      #7f1d1d;  /* fundo de aviso destrutivo — vermelho sem lavagem transparente */
  --danger-hover:    #241618;  /* fundo do botao de perigo no hover */
  --yellow-dim:      #854d0e;  /* fundo de aviso em atencao — par do --yellow do semaforo */
  --desativado:      #17171b;  /* fundo de controle desativado — nao flutua, nao clica */
  --desativado-txt:  #55555f;  /* texto de controle desativado */

  /* ── SEMAFORO ────────────────────────────────────────────────────────── */
  /* Três cores, um significado só em todo o app: vermelho = falta fazer, */
  /* amarelo = em andamento, verde = concluído. Vermelho é trabalho, nunca */
  /* julgamento. */
  --red-sem:         #ff5f56;  /* 🔴 falta fazer */
  --red-sem-line:    #e0443e;  /* a borda do vermelho */
  --yellow:          #ffbd2e;  /* 🟡 em andamento / esperando */
  --yellow-line:     #dea123;  /* a borda do amarelo */
  --green-sem:       #27c93f;  /* 🟢 concluído */
  --green-sem-line:  #1aab29;  /* a borda do verde */

  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────── */
  /* Lemon Milk tem TRÊS pesos de verdade. Pedir 500, 600, 800 ou 900 não cria */
  /* peso novo — o navegador engorda a letra sozinho e borra a face, que já é */
  /* larga. Os tamanhos saíram dos 374 usos reais do app, não de uma régua */
  /* teórica. */
  --font-brand:  'LemonMilk', sans-serif;  /* título, marca, botão */
  --font-sans:   'LemonMilk', sans-serif;  /* leitura, campo */
  --font-mono:   'LemonMilk', sans-serif;  /* rótulo, número, código */
  --fw-light:    300;  /* texto corrido, célula de tabela, legenda */
  --fw-normal:   400;  /* campo, botão secundário, valor de linha */
  --fw-bold:     700;  /* título, rótulo, KPI, botão principal */
  --fs-micro:    10px;  /* chip, rótulo de eixo, carimbo */
  --fs-mini:     11px;  /* metadado, legenda, célula densa — o degrau mais usado do app */
  --fs-peq:      12px;  /* corpo de UI: botão, campo, tabela */
  --fs-base:     13px;  /* leitura corrida */
  --fs-h4:       16px;  /* título de cartão */
  --fs-h3:       21px;  /* título de cartão grande */
  --fs-h2:       26px;  /* título de bloco */
  --fs-h1:       38px;  /* título de tela */
  --fs-display:  clamp(44px, 7vw, 76px);  /* capa, landing, número gigante — só peça de marketing */
  --lh-titulo:   1.06;  /* título: quase colado */
  --lh-densa:    1.35;  /* tabela, lista densa */
  --lh-base:     1.55;  /* leitura corrida */
  --ls-titulo:   -0.02em;  /* título aperta: a Lemon Milk já é larga */
  --ls-base:     0;  /* leitura */
  --ls-rotulo:   0.12em;  /* rótulo em caixa alta abre */

  /* ── FORMA ───────────────────────────────────────────────────────────── */
  /* A altura de controle é 38px porque o Nathan pediu em 09/08: 'a altura dos */
  /* botões, das linhas, lá é tudo muito fino, muito horizontal, otimizando o */
  /* espaço'. É decisão de ferramenta. Peça de marketing usa --h-cta, que é */
  /* outra régua. */
  --r:                8px;  /* canto padrão de tudo */
  --h-controle:       38px;  /* botão, campo, seletor — a linha de base do app */
  --h-controle-sm:    30px;  /* controle de ferramenta: barra, canto de cartão */
  --h-cta:            48px;  /* botão de peça de marketing, landing e post — NÃO usar no app */
  --pad-controle:     18px;  /* respiro horizontal do botão */
  --pad-controle-sm:  12px;  /* respiro do controle pequeno */
  --pad-linha:        9px 14px;  /* célula de tabela */
  --pad-cartao:       18px;  /* respiro interno do cartão */
  --r-selo:           4px;  /* raio do selo e da etiqueta pequena — menor que o --r do cartao */
  --h-passo:          32px;  /* altura do passo numerado (checkout, esteira) */

  /* ── SOMBRA ──────────────────────────────────────────────────────────── */
  /* A sombra é a assinatura da Phantom: no escuro, é ela que separa o cartão */
  /* do fundo, não a borda. */
  --flutua:       0 1px 2px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.85);  /* cartão, botão em repouso */
  --flutua-alta:  0 3px 6px rgba(0,0,0,.6), 0 20px 34px -12px rgba(0,0,0,.95);  /* modal, menu aberto, botão em hover */
  --afundado:     inset 0 2px 5px rgba(0,0,0,.7);  /* campo e area rebaixada — o oposto do --flutua, que promete clique */
}

/* ── hierarquia de título ──────────────────────────────────────────────── */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: var(--ls-titulo); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; }
h5 { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
h6 { font-size: var(--fs-mini); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-rotulo); text-transform: uppercase; }
/* @tokens:fim */

/* ── Reset e Aplicação Global de LemonMilk ────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

/* CAMPOS DE TEXTO E ELEMENTOS EDITÁVEIS REABILITAM CURSOR E SELEÇÃO */
input, textarea, [contenteditable="true"], .selectable, pre, code {
  user-select: text !important;
  -webkit-user-select: text !important;
  caret-color: auto !important;
  cursor: text !important;
}

/* ── TÍTULOS: A HIERARQUIA ──────────────────────────────────────────────────
 *
 * Antes daqui, h1 a h6 tinham família e peso mas NENHUM tamanho: cada um
 * herdava o padrão do navegador. Duas telas com o mesmo h2 saíam diferentes.
 * Agora cada nível tem tamanho, entrelinha e espacejamento próprios.
 *
 *   h1  38px  título de tela            h4  16px  título de cartão
 *   h2  26px  título de bloco           h5  13px  rótulo de seção (caixa alta)
 *   h3  21px  título de cartão grande   h6  11px  rótulo miúdo (caixa alta)
 */
h1 { font-size: var(--fs-h1); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); }
h2 { font-size: var(--fs-h2); line-height: 1.1;  letter-spacing: var(--ls-titulo); }
h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); line-height: 1.2;  letter-spacing: -0.01em; }
h5 { font-size: var(--fs-base); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
h6 { font-size: var(--fs-mini); line-height: 1.3; letter-spacing: var(--ls-rotulo); text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }

/* ⚠️ O QUARTO VERDE, CACADO EM 20/08/2026.
 *
 * 29 lugares desta folha e do app.html usavam `rgba(163,230,53,…)` — que e
 * o lime-400 do Tailwind, NAO o verde da Phantom (`#B3FF00` =
 * `rgb(var(--green-rgb))`). Lado a lado sao dois verdes diferentes na mesma tela.
 *
 * E tem ironia: o comentario do app.html registra a cacada a um "terceiro
 * verde" (#6fd400) — e o conserto daquela vez trocou por este aqui, que era
 * o quarto. O bug foi renomeado, nao resolvido.
 *
 * Onde a opacidade era 0.15, virou `var(--green-dim)`, que e o token de
 * fundo de selo. Nas outras o alfa foi PRESERVADO e so o matiz corrigido:
 * cada uma foi escolhida pra um brilho especifico, e uniformizar tudo em um
 * token mudaria o desenho em vez de consertar a cor.
 */

/* TÍTULOS E HEADLINES — LEMON MILK BOLD (Nathan, 19/08/2026)
 *
 * ⚠️ O `!important` DO PESO SAIU EM 20/08/2026 — ele estava mudando pixel
 * na tela, no lugar errado.
 *
 * O rotulo pequeno em caixa alta de cima do KPI (`.tc-kpi b`) pede peso
 * 300 la embaixo, na linha 876. So que `b` esta nesta lista com
 * `font-weight: 700 !important`, e `!important` ganha de qualquer
 * especificidade: o rotulo nunca ficou fino um dia sequer, e a hierarquia
 * "rotulo magro, numero gordo" que o design pede nao existia na pratica.
 *
 * O `!important` aqui nao defendia de ninguem — nao ha terceiro
 * sobrescrevendo esta folha. Sem ele, a cascata normal resolve: quem quer
 * peso diferente declara depois e com mais especificidade, que e como CSS
 * deveria funcionar.
 *
 * A FAMILIA continua com `!important` de proposito: e a marca, e uma tela
 * que perde a Lemon Milk esta errada de um jeito que ninguem quer negociar
 * caso a caso.
 */
h1, h2, h3, h4, h5, h6,
.page-title,
.tc-titulo h2,
.tc-kpi b,
th,
strong,
b,
.btn-green,
.nav-item-btn.active,
.sidebar-brand-text {
  font-family: var(--font-sans) !important;
  font-weight: 700;
  user-select: none !important;
  -webkit-user-select: none !important;
  caret-color: transparent !important;
}

/* TEXTOS CORRIDOS, TABELAS E CAMPOS — LEMON MILK LIGHT (AFINA PRO RESTO) */
p, span, td, .phantom-table td, label, .phantom-label, .text-muted, .text-xs, .text-sm {
  font-family: var(--font-sans);
  font-weight: 300;
  user-select: none;
  -webkit-user-select: none;
  caret-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️ MAS <span> DENTRO DE CONTROLE É RÓTULO, NÃO TEXTO CORRIDO (20/08/2026)

   A regra acima é certa: texto longo afina, senão a Lemon Milk vira um bloco
   sólido. Só que o seletor `span` é largo demais e pega também o rótulo que
   mora dentro de um botão — e aí o mesmo menu fica com pesos diferentes
   dependendo de um detalhe de markup que ninguém vê:

     <button class="nav-item-btn">PAINEL</button>              -> 400
     <button class="nav-item-btn"><span>PROJETOS</span></button> -> 300

   Foi assim que a barra do app ficou com PAINEL e FINANCEIRO num peso e
   PROJETOS e LANÇAMENTOS noutro. Os dois <span> existem por um motivo real
   (o texto troca por perfil: ARTISTAS vira PROJETOS), então o markup está
   certo — quem estava errado era a regra.

   E o efeito pior não é a diferença: é que o item ATIVO perdia o negrito.
   `.nav-item-btn.active` pede 700, o <span> filho voltava pra 300, e o
   estado ativo ficava mais leve que os inativos — o contrário do que o
   destaque deveria dizer.

   `inherit` resolve na raiz: o rótulo passa a pesar o que o controle dele
   pesa, hoje e em qualquer botão que nasça depois.
   ═══════════════════════════════════════════════════════════════════════ */
button span,
.btn span,
.nav-item-btn span,
.phantom-btn span {
  font-weight: inherit;
}

/* BOTÕES E ELEMENTOS CLICÁVEIS — POINTER E ZERO CURSOR DE TEXTO */
button, .btn-primary, .btn-outline, .btn-ghost, .btn-green, .btn-secondary,
.nav-item-btn, a, .chip, .tc-kpi, .phantom-seg button, .btn-sm {
  font-family: var(--font-sans);
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  caret-color: transparent !important;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── Scrollbar (Webkit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.phantom-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 5vw;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.phantom-brand {
  font-family: var(--font-mono);
  font-size: var(--fs-peq);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  width: 184px;
  flex-shrink: 0;
}
.phantom-brand b,
.phantom-brand strong { color: var(--green); }

.phantom-brand-logo {
  max-width: 100%;
  height: auto;
  max-height: 38px;
  object-fit: contain;
  display: block;
}

/* Header with spaced items (brand left, actions right) */
.phantom-header--spaced {
  justify-content: space-between;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.phantom-card {
  background: var(--card);
  border: 1px solid var(--border);
  /* Mesma linguagem do botao: canto 8 e sombra de DUAS camadas. Card
     chapado ao lado de botao com profundidade parecia recorte de papel
     colado na tela (Nathan, 09/08). Ver skill `identidade-phantom`. */
  border-radius: var(--r);
  box-shadow: var(--flutua);
  padding: var(--pad-cartao);
}

/* Card with floating label */
.phantom-card--labeled {
  position: relative;
  margin-top: 0;
}
.tela-corpo {
  padding-top: 0;
}
/* ⚠️ A ETIQUETA FLUTUANTE SAIU EM 18/08 — e o atributo ficou (20/08/2026).
   O commit e55db69 ("remove subtitulos verdes de todos os cards") desligou o
   `::before` que desenhava o rótulo verde. O `content` foi junto, entao isto
   aqui esconde um pseudo-elemento que nao pinta nada — mas fica, porque
   `data-label` continua em 19 cartoes como SEMANTICA (o nome do quadro), e
   sem esta linha uma folha futura poderia ressuscitar a etiqueta sem querer.
   Quem for religar: o `content: attr(data-label)` e o caminho, e a decisao e
   do Nathan — foi ele quem mandou tirar. */
.phantom-card--labeled::before {
  display: none !important;
}

/* ── BOTÕES ─────────────────────────────────────────────────────────────
 *
 * UMA RÉGUA SÓ NO APP INTEIRO (Nathan, 09/08/2026)
 *
 *   "esse estilo de botão transparente com bordinha é muito cara de IA.
 *    Vamos mudar pro mesmo padrão dos botões pretos e lindos do Octoplus,
 *    aquele botão com sombra 3D, clean, lindo."
 *
 * O que veio do sistema do OctopusAI (a ESTRUTURA viaja entre os produtos
 * da casa; a COR não):
 *
 *   · superfície SÓLIDA, nunca `transparent` — transparência some no tema
 *     escuro e borra a hierarquia. É a marca registrada do template de IA.
 *   · canto de 8px. Nada de pílula (`99px`), nada de 12 ou 16 "pra
 *     destacar": destaque vem da COR e da LARGURA, nunca do tamanho.
 *   · SOMBRA DE DUAS CAMADAS — contato curto + queda larga. Uma sombra só
 *     vira mancha cinza; degrau sólido (`0 3px 0`) é vocabulário
 *     brutalista, de outro sistema.
 *   · no hover sobe 3px e a queda cresce; no active volta ao chão. O
 *     botão tem peso, e o peso é o que faz ele parecer clicável sem
 *     precisar de contorno gritando.
 *
 * O QUE MUDA ENTRE AS VARIANTES É A COR. NUNCA A MEDIDA. Antes havia
 * cinco alturas circulando (34, 36, 38, 40, 44) e botão de tamanho
 * próprio em cada peça é o que faz a tela parecer montada por gente
 * diferente.
 *
 *   altura padrão   --h-controle      ação de tela, CTA, fecho de bloco
 *   .btn-sm         --h-controle-sm   controle de ferramenta
 *
 * ⚠️ No escuro a sombra preta sobre var(--bg) sumiria. O que separa o botão
 *    do fundo é a queda ficar mais OPACA, não mais larga — por isso os
 *    valores altos de alpha aqui embaixo.
 * ───────────────────────────────────────────────────────────────────── */

/* ⚠️ UM :root FOI APAGADO DAQUI EM 20/08/2026, E O MOTIVO IMPORTA.
 *
 * Ele redefinia A MAO nove tokens que a regiao gerada la em cima (a partir
 * de design-system/tokens/tokens.json) ja define: --flutua, --flutua-alta,
 * --r, --h-controle, --h-controle-sm, --pad-controle, --pad-controle-sm,
 * --pad-linha e --pad-cartao.
 *
 * Os valores coincidiam — e era exatamente isso que tornava perigoso:
 * mudar a altura do controle no tokens.json, rodar o build e NAO VER NADA
 * MUDAR na tela, sem erro nenhum. Este bloco vinha depois na cascata e
 * devolvia o valor velho em silencio.
 *
 * Conferido com valor plantado: pus --h-controle em 99px no tokens.json,
 * rodei o build, e a tela continuou 38px por causa daqui.
 *
 * A regra da casa segue valendo e agora funciona de verdade: SO o
 * tokens.json se escreve a mao. E a razao dela, nas palavras do Nathan em
 * 09/08/2026 — "vai aprendendo ja a deixar tudo pronto pra voce regular
 * mais facil, nao precisar fazer 1 por 1" — mora la, junto dos valores.
 */

/* A régua. Toda variante herda daqui e só troca cor. */
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-green,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h-controle);
  padding: 0 var(--pad-controle);
  border-radius: var(--r);
  border: 1px solid var(--border-bright);
  font-family: var(--font-brand);
  font-size: var(--fs-peq);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--flutua);
  transition: transform .18s, box-shadow .18s, background .12s, color .12s;
}

.btn-primary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-green:hover,
.btn-danger:hover {
  transform: translateY(-3px);
  box-shadow: var(--flutua-alta);
}

.btn-primary:active,
.btn-outline:active,
.btn-ghost:active,
.btn-green:active,
.btn-danger:active {
  transform: translateY(0);
  box-shadow: var(--flutua);
}

/* Controle de ferramenta — barra, cabeçalho, canto de card.
   Menor, mas o MESMO botão: mesma sombra, mesmo canto, mesma língua. */
/* ⚠️ ERA `10.5px`, E O PROPRIO SISTEMA JA DISCORDAVA DISSO.
   A media query de toque, la embaixo, subia o `.btn-sm` pra 11px — ou
   seja: no celular ele ja era 11, e so no desktop era 10,5. Meio pixel
   nao e refinamento, e arredondamento do navegador: o mesmo rotulo saia
   com uma largura no botao pequeno e outra no seletor segmentado
   (`.phantom-seg button`, que sempre foi 11px) — e os dois vivem lado a
   lado na mesma barra. Um numero so, nas duas telas. */
.btn-sm {
  height: var(--h-controle-sm);
  padding: 0 var(--pad-controle-sm);
  font-size: var(--fs-mini);
  gap: 6px;
}

/* Fecho de bloco e CTA atravessam a coluna inteira. A largura é que
   marca a importância — não a altura. */
.btn-bloco { width: 100%; }

/* ── CHIP DE FILTRO (`.chip`) ────────────────────────────────────────
 *
 * Ele NAO e o seletor segmentado. `.phantom-seg` e escolha exclusiva
 * (RECEITA *ou* PLAYS); o chip liga e desliga sozinho, e varios podem
 * estar ligados ao mesmo tempo (as fatias do fechamento, os filtros do
 * quadro de tarefas). Metaforas diferentes, componentes diferentes.
 *
 * ⚠️ POR QUE ELE EXISTE: estava montado com string de estilo em DOIS
 * lugares (`pill` do financeiro e `pilula` das tarefas), com
 * `class="btn-sm"` SOZINHO — e `.btn-sm` sem variante nao tem superficie,
 * nem canto, nem sombra, nem hover: so altura e tipo. O resultado era o
 * botao cru do navegador com a altura certa, e cada copia com um
 * `padding` proprio (`4px 10px`) que anulava o token do sistema.
 *
 * O ligado usa `--green-dim` (fundo apagado) e nao o verde chapado: o
 * verde chapado e do `.btn-green`, "a acao da tela", e um filtro ligado
 * nao e acao — e estado.
 * ─────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-controle-sm);
  padding: 0 var(--pad-controle-sm);
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 400;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--flutua);
  transition: transform .18s, box-shadow .18s, background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--card-alto); color: var(--text);
              transform: translateY(-3px); box-shadow: var(--flutua-alta); }
.chip:active { transform: translateY(0); box-shadow: var(--flutua); }
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.chip[aria-pressed="true"] {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--text);
}
/* Variante de alerta: o filtro "ATRASADAS" acende em vermelho de ESTADO,
   nao em `--danger` (que e a cor de apagar). */
.chip--alerta[aria-pressed="true"] {
  background: rgba(255,95,86,.18);
  border-color: var(--red-sem);
  color: var(--text);
}

/* BRANCO SÓLIDO — Botão branco padrão da Phantom (antigos outline/ghost/secondary) */
/* BRANCO SÓLIDO — Botão branco padrão da Phantom (não muda de cor no hover, só sobe) */
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-secondary,
.btn-white {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 400;
}
.btn-primary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-secondary:hover,
.btn-white:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* VERDE ÁCIDO — Botão verde padrão da Phantom (não muda de cor no hover, só sobe) */
.btn-green {
  background: var(--green);
  color: var(--bg);
  border-color: var(--green);
  font-weight: 700;
}
.btn-green:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
}

/* PERIGO — recusar, apagar, cancelar. Superfície sólida também: o
   vermelho vive na borda e no texto, não numa lavagem transparente. */
.btn-danger {
  background: var(--card);
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-hover); }

/* Desativado não flutua: sombra promete clique. */
.btn-primary:disabled, .btn-primary.disabled,
.btn-outline:disabled, .btn-outline.disabled,
.btn-ghost:disabled,   .btn-ghost.disabled,
.btn-green:disabled,   .btn-green.disabled,
.btn-danger:disabled,  .btn-danger.disabled {
  background: var(--desativado);
  color: var(--desativado-txt);
  border-color: var(--border);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ⚠️ HAVIA UM SEGUNDO `.btn-sm` AQUI, e ele VENCIA o de cima (mesma
   especificidade, veio depois): `padding:5px 10px` anulando
   `--pad-controle-sm`. Mexer no token nao mudava nada na tela e nada dava
   erro — o pior tipo de bug de CSS. Regra duplicada em folha de estilo e
   sempre isso: a que perde vira mentira documentada. */

/* ── Forms ──────────────────────────────────────────────────────────────── */
.phantom-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.phantom-label .required { color: var(--green); }

.phantom-input,
.phantom-select,
.phantom-textarea {
  width: 100%;
  /* A MESMA REGUA DO BOTAO: `--h-controle` e canto de 8. Campo mais baixo
     que o botao na mesma linha le como desalinho, nao como hierarquia.
     Textarea escapa da altura (cresce), nao do resto. */
  min-height: var(--h-controle);
  padding: 9px 13px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  /* A sombra aqui é INVERTIDA de proposito: o campo AFUNDA, o botao sobe.
     E o que diz "escreva aqui" contra "clique aqui" sem uma palavra. */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.phantom-textarea { min-height: 110px; }
.phantom-input:focus,
.phantom-select:focus,
.phantom-textarea:focus {
  border-color: var(--green);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 3px var(--green-dim);
}
/* ⚠️ PLACEHOLDER NÃO É BORDA.
   Estava em `--border-bright` (var(--border-bright)), que é a cor de BORDA do sistema:
   1,91:1 contra o fundo — abaixo até do mínimo de elemento decorativo. No
   formulário do perfil e no de submissão, o exemplo dentro do campo
   ("ex: Florianópolis", "@seuprojeto") simplesmente não se lia, e é ele
   que ensina o formato esperado.
   var(--muted) é o degrau seguinte da MESMA rampa de cinza que o app já usa
   (09090b · 141417 · 27272a · 3f3f46 · 52525b · 71717a · a1a1aa · f4f4f5)
   — não é cor nova. Dá 4,12:1, e continua claramente mais apagado que o
   valor digitado (var(--text), 16,7:1), que é o ponto: dica não pode parecer
   conteúdo. */
.phantom-input::placeholder,
.phantom-textarea::placeholder {
  color: var(--muted);
}
.phantom-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.phantom-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Radio cards */
.phantom-radio-card {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-selo);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-mono);
  font-size: var(--fs-peq);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.phantom-radio-card:hover {
  border-color: var(--border-bright);
}
.phantom-radio-card.selected {
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.05);
  color: var(--green);
}

/* Field hint */
.phantom-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  color: var(--muted);
  margin-top: 4px;
}
.phantom-hint.invalid { color: var(--danger); }
.phantom-hint.valid { color: var(--green); }

/* ── Status Dots (Macbook LED) ──────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.status-dot--pending {
  background: var(--red-sem);
  border: 1px solid var(--red-sem-line);
  box-shadow: 0 0 5px rgba(255,95,86,0.45);
}
.status-dot--waiting {
  background: var(--yellow);
  border: 1px solid var(--yellow-line);
  box-shadow: 0 0 5px rgba(255,189,46,0.45);
}
.status-dot--approved {
  background: var(--green-sem);
  border: 1px solid var(--green-sem-line);
  box-shadow: 0 0 5px rgba(39,201,63,0.45);
}

/* ══════════════════════════════════════════════════════════════════════
   SEMÁFORO — a gramática do painel de trabalho
   ══════════════════════════════════════════════════════════════════════
   O app não mostra o que a label TEM, mostra o que a equipe PRECISA FAZER.
   Uma cor tem UM significado só, no app inteiro:

     ⚪ bloqueado  não é a vez de ninguém (depende de outra etapa)
     🔴 pendente   falta fazer  → é a vez do responsável daquela função
     🟡 andamento  entregue, aguardando aprovação
     🟢 concluido  aprovado, pode esquecer

   Regras que impedem isso virar enfeite:
   1. Vermelho é TRABALHO, nunca julgamento.
   2. Toda bolinha tem dono (a função) e próxima ação óbvia.
   3. Toda bolinha é filtro — clicar mostra só aquele estado.
   4. Cinza existe pra não sermos obrigados a mentir uma cor.

   O dono NÃO aparece escrito: a COLUNA orienta por função, e cada um
   sabe a sua (capa=arte, wav=master, mkt, distro).
   ══════════════════════════════════════════════════════════════════════ */
.sem {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  transition: transform .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
.sem--bloqueado {
  background: var(--border-bright);
  border: 1px solid var(--muted-dim);
  box-shadow: none;
}
.sem--pendente {
  background: var(--red-sem);
  border: 1px solid var(--red-sem-line);
  box-shadow: 0 0 5px rgba(255,95,86,.45);
}
.sem--andamento {
  background: var(--yellow);
  border: 1px solid var(--yellow-line);
  box-shadow: 0 0 5px rgba(255,189,46,.45);
}
.sem--concluido {
  background: var(--green-sem);
  border: 1px solid var(--green-sem-line);
  box-shadow: 0 0 5px rgba(39,201,63,.45);
}

/* Bolinha clicável = filtro. O cursor e o realce dizem que dá pra clicar. */
button.sem, .sem--filtro { cursor: pointer; padding: 0; }
button.sem:hover, .sem--filtro:hover { transform: scale(1.35); }
button.sem:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Filtro ligado: anel em volta da bolinha escolhida. */
.sem--ativo { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }

/* "É a SUA vez" — anel claro em volta da bolinha que espera por quem está
   olhando. A COR não muda: o time conversa entre si, e se o Bagre diz
   "tá amarelo" a Amanda precisa ver amarelo também. O que é pessoal é o
   destaque, não o significado. */
.sem--meu {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text), 0 0 9px rgba(255, 255, 255,.5);
}

/* ── "Onde está parado" — resumo por função no topo do pipeline ────────── */
.parado { margin-bottom: 14px; }
.parado-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.parado-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; text-align: left;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.parado-card:hover { border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.parado-card--meu { border-color: rgba(255, 255, 255,.42); }

/* Sinal de atenção ao lado de uma bolinha — usado no membro do casting
   que está há mais de um ano sem lançar. Ele É membro (verde), mas a
   situação precisa de cobrança. O alerta não muda a cor: acrescenta. */
.sem-alerta {
  display: inline-block;
  margin-left: 5px;
  color: var(--red-sem);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 400;
  line-height: 1;
  cursor: help;
}

/* Legenda do semáforo, no rodapé das tabelas. */
/* ═══════════════════════════════════════════════════════════════════════
   O PADRÃO DE TELA (Nathan, 14/08/2026)

   Toda aba tem DUAS partes, e só duas:

     ┌────────────────────────────────────────────┐
     │  TÍTULO            [KPIs dentro do card]   │  .tela-cabeca
     └────────────────────────────────────────────┘
     ┌────────────────────────────────────────────┐
     │  tabela · lista · informação               │  .tela-quadro
     └────────────────────────────────────────────┘
       [ chat fixo no rodapé, abaixo do card ]

   "topo card horizontal longo · corpo, card grande ocupando o resto da tela"

   A forma vem do painel de gerenciar lançamento (fundo de card, borda,
   respiro) e os KPIs vêm do dashboard — a junção dos dois, que foi o pedido.

   📌 Por que o título entra DENTRO do card: solto, ele era só texto no
   vazio e o olho não sabia onde a tela começava. Dentro, o card do topo
   vira a identidade da aba — o mesmo papel que o cabeçalho do lançamento
   já fazia, e que o Nathan reconheceu como certo.

   ⚠️ O chat abre ocupando A ÁREA DO CORPO, não a tela inteira: título e
   KPIs continuam expostos enquanto a pessoa conversa. Quem está falando com
   a IA sobre um número precisa continuar vendo o número.
   ═══════════════════════════════════════════════════════════════════════ */
.tela-cabeca {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* O título anterior foi removido das telas para economizar espaço e limpar o topo */
.tela-cabeca > .tc-titulo { flex: 0 0 auto; min-width: 0; display: none; }
.tela-cabeca .page-title { margin: 0; }

/* Os KPIs no início do cabeçalho com números grandes e destacados */
.tela-cabeca > .tc-kpis {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 8px; flex-wrap: nowrap;
  justify-content: flex-start; align-items: center;
  overflow-x: auto;
}
.tc-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 12px;
  min-width: 80px;
  flex: 0 0 auto;
  transition: border-color 0.15s ease;
}
.tc-kpi:hover {
  border-color: rgba(255,255,255,0.18);
}
.tc-kpi b {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--fs-micro); font-weight: 300; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 2px;
}
.tc-kpi span {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.15;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-titulo);
}
/* Ações e filtros do cabeçalho (data TRI/ANO, métricas, botões) colados à direita */
.tela-cabeca > .tc-acoes {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-left: auto;
}

/* Bloco do Filtro de Data Vertical Fixo (TRI em cima, ANO embaixo) */
.tc-escopo {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

.tc-escopo select {
  height: 20px;
  min-width: 78px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .04em;
  border-radius: var(--r-selo);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tc-escopo select:hover {
  border-color: rgba(255,255,255,0.3);
}

.tc-escopo select:focus,
.tc-escopo select:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.tc-escopo select.ativo {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text);
}

@media (max-width: 768px) {
  .tela-cabeca { padding: 10px 12px; gap: 10px; }
  .tela-cabeca > .tc-kpis { justify-content: flex-start; gap: 8px; }
  .tc-kpi { min-width: 78px; padding: 6px 10px; }
  .tc-kpi span { font-size: var(--fs-h3); }
  .tela-cabeca > .tc-acoes { margin-left: 0; width: 100%; justify-content: flex-start; }
}

.sem-legenda {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border);
}
.sem-legenda span { display: flex; align-items: center; gap: 6px; }

/**
 * A LEGENDA GRUDA NO RODAPÉ DO CARD (Nathan, 14/08/2026).
 *
 * "a legenda das bolinha tá lá no topo, tem q ficar fixo no rodapé do card"
 *
 * O card da tabela é uma caixa de altura fixa (`.tela-quadro` estica até o
 * fim da tela). Quando a lista tem poucas linhas, a tabela ocupa pouco e a
 * legenda ficava logo abaixo dela — no MEIO do card, com um vazio enorme
 * embaixo. Parecia texto solto no nada.
 *
 * `margin-top:auto` num container flex empurra o elemento pro fim do espaço
 * livre: com lista curta ela desce até o rodapé, com lista longa ela fica
 * logo depois da tabela. Um comportamento só, sem media query e sem medir
 * altura no JavaScript.
 */
.tela-quadro > .sem-legenda,
.tela-quadro > .legenda-tabela { margin-top: auto; }
.tela-quadro > .legenda-tabela > .sem-legenda { margin-top: 0; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.phantom-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-selo);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.phantom-badge--green {
  background: rgba(var(--green-rgb), 0.12);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.2);
}
.phantom-badge--yellow {
  background: rgba(255,189,46,0.12);
  color: var(--yellow);
  border: 1px solid rgba(255,189,46,0.2);
}
.phantom-badge--red {
  background: rgba(239,68,68,0.12);
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.2);
}
.phantom-badge--muted {
  background: rgba(136, 136, 136,0.1);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.phantom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.phantom-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--pad-linha);
  border-bottom: 1px solid var(--border);
}
.phantom-table td {
  padding: var(--pad-linha);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.phantom-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* ── Typography Utilities ───────────────────────────────────────────────── */
.text-mono {
  font-family: var(--font-mono);
}
.text-muted {
  color: var(--muted);
}
.text-green {
  color: var(--green);
}
.text-danger {
  color: var(--danger);
}
.text-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.text-xs {
  font-size: var(--fs-mini);
}
.text-sm {
  font-size: var(--fs-base);
}

/* ── Layout Utilities ───────────────────────────────────────────────────── */
.phantom-container {
  max-width: 1140px;
  margin: 32px auto 60px;
  padding: 0 20px;
}
.phantom-container--narrow {
  max-width: 860px;
}
.phantom-container--mid {
  max-width: 960px;
}

/* ── Meta Row ───────────────────────────────────────────────────────────── */
.phantom-meta {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  color: var(--muted);
  flex-wrap: wrap;
}
.phantom-meta b,
.phantom-meta strong {
  color: var(--text);
  font-weight: 400;
}

/* ── Dropzone ───────────────────────────────────────────────────────────── */
.phantom-dropzone {
  border: 1px dashed var(--border-bright);
  border-radius: var(--r-selo);
  padding: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.phantom-dropzone:hover {
  border-color: var(--green);
  color: var(--text);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.phantom-footer {
  text-align: center;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeIn 0.3s ease forwards;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .phantom-container { padding: 0 14px; margin: 20px auto 40px; }
  .phantom-card { padding: 18px; }
}
@media (max-width: 640px) {
  .phantom-header { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOQUE — o app e usado por artista no celular
   ═══════════════════════════════════════════════════════════════════
   A bolinha do semaforo tem 11px e e a interacao PRINCIPAL do produto
   ("toda bolinha e filtro"). O .btn-sm fica em ~22px de altura e e toda
   acao de linha e toda seta de paginacao. Os dois estao muito abaixo dos
   44px que o dedo alcanca com confianca.

   A correcao NAO aumenta a bolinha: aumentar mudaria o desenho da grade
   inteira, que foi calibrado no desktop. Cresce a AREA CLICAVEL com
   padding transparente — `background-clip:content-box` mantem a cor so
   nos 11px do meio, e o dedo ganha 44. Visualmente nada muda.

   `pointer:coarse` = dedo. Mouse continua com o layout compacto. */
@media (pointer: coarse) {
  /* ⚠️ ISTO ERA `padding:16px; margin:-16px; background-clip:content-box`, e
     APAGAVA A BOLINHA NO CELULAR (corrigido em 16/08/2026).

     O reset do arquivo e `box-sizing:border-box`. Com ele, `width:11px` conta
     borda e padding POR DENTRO: 32px de padding num box de 11px espremem o
     content-box pra 0x0. E `background-clip:content-box` pinta o fundo SO no
     content-box — ou seja, em lugar nenhum.

     O que aparecia no lugar da bolinha: um anel vazado de ~34px na cor da
     BORDA, e o `margin:-16px` fazia as vizinhas se sobreporem. Numa linha de
     etapas elas empilhavam. A interacao principal do produto ("toda bolinha e
     filtro"), quebrada no dispositivo que a propria media query diz ser o
     principal.

     E `border-clip` NAO EXISTE em CSS nenhum — foi inventada. O comentario
     prometia um comportamento que a linha nao entregava.

     A correcao certa nao mexe na caixa: um pseudo-elemento invisivel estende
     a AREA DE TOQUE pra 43px. Area de pseudo-elemento e alcancada pelo toque
     e conta como clique no elemento pai. O desenho fica exatamente como foi
     calibrado no desktop — 11px, com borda e tudo —, e some o `margin`
     negativo, que era so pra compensar o padding que agora nao existe. */
  .sem { position: relative; }
  .sem::after {
    content: "";
    position: absolute;
    inset: -16px;          /* 11 + 32 = 43px de alvo, o piso e 44 */
  }
  button.sem, .sem[role="button"] { cursor: pointer; }

  /* No toque, o piso e 44px — dedo nao acerta 30. Sobe pelos TOKENS, nao
     por regra em cima do componente: assim o app inteiro (botao, campo,
     seletor) engorda junto, e afinar de novo continua sendo um numero. */
  :root {
    --h-controle: 46px;
    --h-controle-sm: 44px;
    --pad-controle-sm: 14px;
  }
  /* O `.btn-sm` ja e 11px no desktop desde 14/08 — o override que existia
     aqui era a unica prova de que 10.5px estava errado la em cima. */

  /* Rotulo de 8.5-9.5px e ilegivel no celular. Piso de 11px. */
  .text-xs { font-size: var(--fs-mini); }
}


/* ── Seletor segmentado (RECEITA · PLAYS · VENDAS) ──────────────────────
 *
 * Era montado com estilo inline em cada tela: fundo `transparent` no
 * segmento apagado, altura 30px, canto 6. Nathan, 09/08: "pode ser no
 * verdão mesmo chapado quando clicado... esses campos todos aí têm que
 * pegar a referência do botão também, 3D cor etc".
 *
 * Entao ele E um botao: a mesma regua, a mesma sombra, o mesmo canto. O
 * ligado e VERDE CHAPADO — aqui o verde nao e enfeite, e o estado.
 * ───────────────────────────────────────────────────────────────────── */
.phantom-seg {
  display: inline-flex;
  height: var(--h-controle);
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--flutua);
  flex-shrink: 0;
}
.phantom-seg button {
  border: none;
  border-left: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  padding: 0 var(--pad-controle);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.phantom-seg button:first-child { border-left: none; }
.phantom-seg button:hover { background: var(--card-alto); color: var(--text); }
.phantom-seg button[aria-pressed="true"] {
  background: var(--green);
  color: var(--bg);
  /* afunda: o ligado esta PRESSIONADO, e o resto do painel flutua */
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT INTERNO — PAINEL DE CANAIS, GRUPOS E CONVERSAS (18/08/2026)
   ═══════════════════════════════════════════════════════════════════════ */
.chat-layout-wrapper {
  display: flex;
  height: 100%;
  min-height: 0;
  background: var(--bg);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--flutua);
}

/* Submenu de Canais (Lado Esquerdo) */
.chat-canais-sidebar {
  width: 320px;
  min-width: 280px;
  max-width: 360px;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chat-canais-topo {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--card-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.chat-canais-titulo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.chat-canais-titulo {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--ls-rotulo);
  color: var(--green);
  text-transform: uppercase;
}

.chat-canais-busca-wrap {
  position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.chat-canais-busca-wrap input {
  width: 100%;
  height: var(--h-controle-sm);
  font-size: var(--fs-peq);
  padding: 0 10px;
}

.chat-canais-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-canal-secao-titulo {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 10px 14px 4px 14px;
  opacity: .7;
}

.chat-canal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: var(--text);
  transition: background .12s ease;
  position: relative;
}

.chat-canal-item:hover {
  background: var(--card-alto);
}

.chat-canal-item.ativo {
  background: var(--card-alto);
  border-left: 3px solid var(--green);
}

.chat-canal-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h4);
  flex-shrink: 0;
  overflow: hidden;
}

.chat-canal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-canal-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.chat-canal-nome-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.chat-canal-nome {
  font-size: var(--fs-base);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-canal-hora {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  flex-shrink: 0;
}

.chat-canal-previa-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.chat-canal-previa {
  font-size: var(--fs-mini);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-canal-badge-nao-lidas {
  background: var(--green);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Área Principal da Conversa */
.chat-conversa-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

.chat-conversa-cabecalho {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.chat-cabecalho-icone {
  width: 36px;
  height: 36px;
  border-radius: var(--r);
  background: var(--card-alto);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h4);
  flex-shrink: 0;
}

.chat-cabecalho-info {
  flex: 1;
  min-width: 0;
}

.chat-cabecalho-nome-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-cabecalho-nome {
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-tipo-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-selo);
  background: var(--card-alto);
  color: var(--green);
  border: 1px solid var(--green-dim);
}

.chat-cabecalho-sub {
  font-size: var(--fs-mini);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-btn-voltar-mobile {
  display: none;
}

.chat-mensagens-stream {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-sans);
}

.chat-formulario-envio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.chat-btn-atalho-ia {
  background: var(--card-alto);
  color: var(--green);
  border: 1px solid var(--green-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 400;
  padding: 0 10px;
  height: var(--h-controle-sm);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}

.chat-btn-atalho-ia:hover {
  background: var(--green);
  color: var(--bg);
}

.mencao-ia-tag {
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 700;
  background: rgba(var(--green-rgb), 0.12);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Modal Contatos */
.chat-contato-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s ease;
  user-select: none;
}

.chat-contato-item:hover {
  background: var(--card-alto);
}

.chat-contato-item.selecionado {
  background: rgba(var(--green-rgb), 0.1);
  border: 1px solid var(--green-dim);
}

.chat-layout-wrapper.chat-drag-ativo,
#view-chat.chat-drag-ativo,
.chat-conversa-principal.chat-drag-ativo {
  outline: 2px dashed var(--green);
  outline-offset: -4px;
}

.chat-video-wrap,
.chat-audio-wrap,
.chat-img-wrap {
  margin-top: 8px;
  border-radius: var(--r);
  overflow: hidden;
}

/* Separador de dia — a regua do rotulo da casa: micro, caixa alta,
   espacejado. Nao e balao: e divisoria, entao nao tem sombra. */
.chat-dia{
  align-self:center; margin:10px 0 2px;
  padding:3px 12px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:var(--fs-micro);
  font-weight:400; letter-spacing:var(--ls-rotulo);
  text-transform:uppercase; color:var(--muted);
}

.chat-digitando-card {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--flutua);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-peq);
}

.chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chat-typing-dots span {
  display: inline-block;
  animation: chatDotPulse 1.4s infinite ease-in-out both;
}

.chat-typing-dots .dot-1 { animation-delay: 0s; }
.chat-typing-dots .dot-2 { animation-delay: 0.2s; }
.chat-typing-dots .dot-3 { animation-delay: 0.4s; }

@keyframes chatDotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.75); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 768px) {
  .chat-canais-sidebar {
    width: 100%;
    max-width: 100%;
    border-right: none;
  }
  .chat-layout-wrapper.conversando .chat-canais-sidebar {
    display: none;
  }
  .chat-layout-wrapper:not(.conversando) .chat-conversa-principal {
    display: none;
  }
  .chat-btn-voltar-mobile {
    display: inline-flex;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PHANTOM CREATIVE STUDIO — WORKSPACE & CINEMA CREATOR BAR
   ═══════════════════════════════════════════════════════════════════ */
.studio-stage-single-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  position: relative;
}

.studio-single-stage-frame {
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16/9;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7), 0 0 24px rgba(var(--green-rgb), 0.06);
  transition: all 0.25s ease;
}

.studio-single-stage-frame:hover {
  border-color: rgba(var(--green-rgb), 0.35);
  box-shadow: 0 16px 48px rgba(0,0,0,0.85), 0 0 32px rgba(var(--green-rgb), 0.12);
}

.studio-single-stage-frame img,
.studio-single-stage-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Área de Conteúdo Dinâmico (Carrossel ou Expansão) */
.studio-dynamic-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── UNIFIED CINEMA CREATOR BAR ─────────────────────────────────── */
.studio-cinema-creator-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  position: relative;
  z-index: 40;
  flex-shrink: 0;
}

/* ── STUDIO CREATIVE WORKSPACE (Canonical Phantom Design System) ── */
.studio-dock-vertical-attached {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px;
  gap: 4px;
  box-shadow: var(--flutua);
  flex-shrink: 0;
}

.studio-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 48px;
  border-radius: var(--r);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.04em;
  gap: 2px;
  user-select: none;
}

.studio-dock-btn:hover {
  color: var(--text);
  transform: translateY(-2px);
}

.studio-dock-btn.active {
  background: var(--green) !important;
  color: var(--bg) !important;
  border: 1px solid var(--green) !important;
  font-weight: 400 !important;
  box-shadow: none;
}

.studio-dock-btn.active .studio-dock-btn-icon {
  color: var(--bg) !important;
}

.studio-dock-btn-icon {
  font-size: var(--fs-h4);
  line-height: 1;
}

/* Caixa integrada de comando */
.studio-cinema-box {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--flutua);
  position: relative;
}

.studio-higgsfield-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--fs-peq);
  font-weight: 300;
  color: var(--text);
  resize: none;
  line-height: 1.5;
}

.studio-higgsfield-textarea::placeholder {
  color: var(--muted);
  font-weight: 300;
}

.studio-cinema-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.studio-cinema-pills-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Tool Group [+ | @] */
.studio-tool-group {
  display: inline-flex;
  align-items: center;
  background: var(--card-alto);
  border: 1px solid var(--border);
  border-radius: var(--r);
  height: 30px;
  overflow: hidden;
}

.studio-tool-group-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-peq);
  font-weight: 400;
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  transition: transform .18s, color .12s;
}

.studio-tool-group-btn:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.studio-tool-group-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
}

/* Model & Template Pills */
.studio-model-pill {
  background: var(--card-alto);
  border: 1px solid var(--border);
  border-radius: var(--r);
  height: 30px;
  padding: 0 12px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .18s, border-color .12s;
  box-shadow: var(--flutua);
}

.studio-model-pill:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
}

.studio-model-pill-icon {
  font-size: var(--fs-mini);
  color: var(--green);
}

/* Param Pills */
.studio-param-pill {
  background: var(--card-alto);
  border: 1px solid var(--border);
  border-radius: var(--r);
  height: 30px;
  padding: 0 10px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform .18s, color .12s;
  box-shadow: var(--flutua);
}

.studio-param-pill:hover {
  color: var(--text);
  transform: translateY(-2px);
}

.studio-param-pill.active {
  color: var(--green);
  border-color: var(--green);
}

/* Generate Button — Canonical Phantom Master Button */
.studio-btn-generate-cinema {
  background: var(--green) !important;
  color: var(--bg) !important;
  border: 1px solid var(--green) !important;
  border-radius: var(--r);
  height: 34px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-peq) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--flutua);
  transition: transform .18s, box-shadow .18s;
  flex-shrink: 0;
}

.studio-btn-generate-cinema:hover {
  transform: translateY(-3px);
  box-shadow: var(--flutua-alta);
  background: var(--green) !important;
  color: var(--bg) !important;
}

.studio-btn-generate-cinema:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.studio-btn-generate-sparkle {
  font-size: var(--fs-mini);
}

/* Popovers Floating */
.studio-kling-popover {
  position: absolute;
  bottom: 84px;
  left: 12px;
  width: 320px;
  max-height: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--flutua-alta);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalEntra 0.15s ease-out;
}

.studio-kling-popover-search {
  padding: 8px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.studio-kling-popover-search input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  color: var(--text);
}

.studio-kling-popover-list {
  padding: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 300px;
}

.studio-kling-group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 4px 8px 2px;
  letter-spacing: 0.08em;
}

.studio-kling-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.studio-kling-item:hover {
  background: rgba(255,255,255,0.06);
}

.studio-kling-item.selected {
  background: rgba(var(--green-rgb), 0.08);
  border-left: 2px solid var(--green);
}

.studio-kling-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--r-selo);
  background: var(--card-alto);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: var(--green);
  flex-shrink: 0;
}

.studio-kling-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.studio-kling-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.studio-kling-item-name {
  font-family: var(--font-sans);
  font-size: var(--fs-mini);
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
}

.studio-kling-item-desc {
  font-size: var(--fs-micro);
  color: var(--muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.studio-kling-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  background: var(--green-dim);
  color: var(--green);
  padding: 1px 4px;
  border-radius: 3px;
}

.studio-kling-item-check {
  font-size: var(--fs-mini);
  color: var(--green);
  font-weight: 400;
  margin-left: 4px;
}

/* Menu Dropdown de Proporção (Aspect Ratio) */
.studio-kling-ratio-menu {
  position: absolute;
  bottom: 84px;
  left: 120px;
  width: 170px;
  background: var(--card);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.85);
  z-index: 100;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.studio-kling-ratio-item {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: 400;
  color: var(--text);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.studio-kling-ratio-item.selected {
  color: var(--green);
  background: rgba(var(--green-rgb), 0.1);
}

/* ── CARROSSEL MULTI-SLIDE PREVIEW ──────────────────────────────── */
.studio-carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 10px 4px 16px;
  scroll-snap-type: x mandatory;
  width: 100%;
}

.studio-slide-card {
  flex: 0 0 280px;
  height: 350px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  scroll-snap-align: start;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: all 0.2s ease;
}

.studio-slide-card:hover {
  border-color: rgba(var(--green-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--green-rgb), 0.1);
}

.studio-slide-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--green);
  text-transform: uppercase;
  background: rgba(var(--green-rgb), 0.12);
  padding: 2px 7px;
  border-radius: var(--r-selo);
  align-self: flex-start;
}

.studio-slide-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  color: rgba(255,255,255,0.4);
}

.studio-slide-body {
  margin: auto 0;
}

.studio-slide-titulo {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.studio-slide-subtitulo {
  font-size: var(--fs-peq);
  color: var(--muted);
  line-height: 1.4;
}

.studio-slide-citacao {
  font-style: italic;
  font-size: var(--fs-peq);
  line-height: 1.5;
  color: var(--text);
  border-left: 2px solid var(--green);
  padding-left: 10px;
  margin: 8px 0;
}

.studio-slide-grid-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  background: rgba(0,0,0,0.4);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}

.studio-slide-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
}

/* ── VAULT // ACERVO CRIATIVO INTEGRADO (BOTTOM STRIP) ──────────── */
.studio-integrated-vault {
  width: 100%;
}

.studio-vault-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  padding: 1px 6px;
  border-radius: var(--r-selo);
  background: var(--green-dim);
  color: var(--green);
}

.studio-vault-horizontal-strip {
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARIMBO DE DESENVOLVIMENTO  ·  #aviso-dev
   ══════════════════════════════════════════════════════════════════════════
   Componente, e nao trecho de uma tela: ele e OBRIGATORIO em toda tela que
   mostra dinheiro da label, e o portao (guardas.mjs) descobre essas telas
   sozinho. Enquanto o CSS morava dentro do app.html, "por o carimbo na tela
   nova" significava copiar 30 linhas de estilo — e por isso a release-page,
   que mostra £ pra quem tem permissao, ficou sem ele.

   Aparece quando o <body> tem a classe `na-grana`. Cada tela decide quando
   por a classe; o texto e o mesmo em todas, de proposito.
   Nathan, 14/08/2026: o texto explica a CAUSA, nao so avisa.
   ═══════════════════════════════════════════════════════════════════════ */
#aviso-dev{ display:none; }
body.na-grana #aviso-dev{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:9998; display:flex; align-items:center; gap:16px;
  padding:18px 22px; border-radius:12px;
  background:rgba(18, 18, 18,.97); backdrop-filter:blur(12px);
  border:2px solid var(--yellow-line); box-shadow:0 18px 50px -16px rgba(255,189,46,.6);
  max-width:min(560px, calc(100% - 32px));
  animation:pux-entra .34s cubic-bezier(.2,.8,.2,1);
  }
@keyframes pux-entra{ from{opacity:0; transform:translate(-50%,14px)} }
#aviso-dev .pux-bol{ width:12px; height:12px; border-radius:50%; background:var(--yellow); flex:none;
                  box-shadow:0 0 14px rgba(255,189,46,.8); animation:pux-p 2.4s ease-in-out infinite; }
@keyframes pux-p{ 0%,100%{opacity:1} 50%{opacity:.35} }
#aviso-dev .pux-txt{ font-family: var(--font-mono); line-height: var(--lh-base); min-width:0; }
#aviso-dev .pux-txt b{ display:block; font-size: var(--fs-h4); font-weight: 700; letter-spacing:.1em;
                    color:var(--yellow); text-transform:uppercase; }
#aviso-dev .pux-txt span{ display:block; margin-top:4px; font-size: var(--fs-base); letter-spacing:.05em;
                       color:var(--muted); text-transform:none; }
#aviso-dev .pux-fec{ background:none; border:0; color:var(--muted); cursor:pointer;
                  font-size: var(--fs-h3); line-height:1; padding:4px 2px 4px 8px; flex:none; }
#aviso-dev .pux-fec:hover{ color:var(--yellow); }
#aviso-dev .pux-fec:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; border-radius:3px; }
@media (max-width:560px){
  body.na-grana #aviso-dev{ left:12px; right:12px; transform:none; bottom:12px; padding:15px 16px; }
  @keyframes pux-entra{ from{opacity:0; transform:translateY(14px)} }
  #aviso-dev .pux-txt b{ font-size: var(--fs-base) } #aviso-dev .pux-txt span{ font-size: var(--fs-peq) }
  }
@media (prefers-reduced-motion:reduce){
  #aviso-dev .pux-bol{ animation:none }
  body.na-grana #aviso-dev{ animation:none }
  }