/* Base visual do produto: superfícies neutras, cor fotográfica, sem sombra.
   (Em 17/09/2026 esta linha deixou de nomear a plataforma que serviu de
   referência visual em 2025. Não é reescrita de história — a referência
   continua registrada no documento interno de tokens, que não é servido.
   O nome saiu daqui porque essa plataforma é também um FORNECEDOR do Hub, e
   esta pasta é servida ao navegador: lida no devtools, "design system
   de X" no topo da folha se lê como "o Hub usa X", que é exatamente o que a
   regra de provider invisível não quer dizer.) */
/* v1.9 fatia 5 (design tokens) — ver o documento interno de tokens.
   @import precisa ser a 1ª regra real do arquivo (só comentários podem
   vir antes); tokens.css declara a paleta nova, o :root abaixo remapeia
   as variáveis antigas para ela. */
@import "./tokens.css";
/* UX5: existing Hub tokens; one row of inputs and one project estimate. */
.simple-simulator { max-width:1120px; }
.simple-simulator-entry { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(110px,1fr)) auto; gap:16px; align-items:end; padding:24px; background:var(--surface-1); border:1px solid var(--border-soft); border-radius:var(--radius-lg); }
.simple-simulator-entry label { display:grid; gap:8px; min-width:0; font-size:var(--text-label-size); color:var(--text-secondary); }
.simple-simulator-entry :is(input,select) { width:100%; min-width:0; min-height:44px; }
.simple-simulator :is(button,select) { min-height:44px; }
.simple-simulator #simulationFormError:empty { display:none; }
.simple-simulator #simulationFormError { color:var(--text-primary); padding:12px 0; }
.simple-simulation-lines { margin-top:24px; }
.simple-simulation-line { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:24px; padding:20px 0; border-bottom:1px solid var(--border-soft); }
.simple-simulation-line > div { display:grid; gap:6px; min-width:0; overflow-wrap:anywhere; }
.simple-simulation-line small,.simple-simulator-note,.simple-simulation-total small { color:var(--text-muted); font-size:var(--text-body-sm-size); }
.simple-simulation-price { text-align:right; font-variant-numeric:tabular-nums; }
.simple-simulation-total { display:grid; gap:8px; padding:24px; margin:24px 0; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--surface-1); }
.simple-simulation-total > strong { font-size:var(--text-h1-size); font-weight:var(--text-h1-weight); font-variant-numeric:tabular-nums; }
.simple-simulator .project-actions { flex-wrap:wrap; align-items:center; }
@media(max-width:1100px) { .simple-simulator-entry { grid-template-columns:repeat(2,minmax(0,1fr)); } .simple-simulator-entry > button { grid-column:1/-1; } }
@media(max-width:520px) { .simple-simulator-entry { padding:16px; gap:16px; } .simple-simulator-entry > label:first-child { grid-column:1/-1; } .simple-simulation-line { grid-template-columns:minmax(0,1fr) auto; gap:12px; } .simple-simulation-line > button { justify-self:start; } .simple-simulation-total { padding:16px; } }
.argos-controls { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px; }
.argos-controls label { min-width:0;font-size:var(--text-label-size); }
.argos-controls select { width:100%;min-width:0;min-height:var(--control-height-md); }
:root {
  color-scheme: dark;
  /* Compat: mantém os nomes antigos que bench.css, spaces.css, projects.css,
     product.css e admin.css (fora do escopo desta fatia) já consomem, agora
     apontando para os tokens novos definidos em tokens.css. */
  --bg: var(--bg-base);
  --surface: var(--surface-2);
  --panel: var(--surface-1);
  --black: #000;
  --fg: var(--text-primary);
  --body: var(--text-secondary);
  --muted: var(--text-muted);
  --subtle: var(--text-muted);
  --border: var(--border-soft);
  --line: var(--border-strong);
  --brand: var(--accent-ai);
  --accent: var(--accent-primary);
  --font: var(--font-family-ui);
  --radius: var(--radius-lg);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* O <body> é a raiz da escala: o degrau `body` do sistema, não um 14px
     solto que por coincidência bate com o token (auditoria UX §1.1). */
  font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font);
  letter-spacing: -0.16px;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button {
  background: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: var(--control-height-md);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
}
button:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--line);
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}
input,
textarea,
select {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: var(--control-height-md);
  padding: 10px 12px;
}
textarea {
  resize: vertical;
  line-height: 1.5;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}
select option {
  background: var(--surface);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: var(--text-h1-size);
  font-weight: 400;
  letter-spacing: -0.9px;
  line-height: 1.1;
}
h2 {
  font-size: var(--text-h2-size);
  line-height: 1.3;
  font-weight: 400;
}
h3 {
  font-size: var(--text-h3-size);
  font-weight: 500;
}
small {
  font-size: var(--text-label-size);
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: var(--text-label-size);
  font-weight: 450;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
/* v2.0: o CTA de ação é lima sólido com texto escuro — é o botão
   "Analisar conteúdo" / "Gerar storyboard" / "Renderizar · R$ 2,90" dos 10
   mockups. Era branco no v1.9; ver o cabeçalho de tokens.css. */
.btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-ink);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
}
/* Botão de contorno lima — o "Conversar com Argos" do topo. */
.btn-accent-outline {
  background: var(--accent-outline-bg);
  border-color: var(--accent-primary);
  color: var(--accent-primary-text);
  font-weight: 600;
}
.btn-accent-outline:hover:not(:disabled) {
  background: var(--accent-outline-bg-hover);
  border-color: var(--accent-primary);
}
.btn-quiet {
  border-color: transparent;
}
.btn-icon {
  width: 40px;
  padding: 8px;
  flex: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-label-size);
  padding: 4px 8px;
  white-space: nowrap;
  color: var(--body);
  font-weight: 400;
}
.badge .icon {
  width: 12px;
  height: 12px;
}
.full {
  width: 100%;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.between {
  justify-content: space-between;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skip-link {
  position: fixed;
  left: 220px;
  top: -60px;
  z-index: 100;
  background: var(--fg);
  color: var(--black);
  padding: 12px;
}
.skip-link:focus {
  top: 12px;
}
.studio-shell {
  display: grid;
  /* v1.9 §7.1 pedia 224-240px. O mockup v2.0 mede 210px (a régua divisória
     cai exatamente em x=210 em `01_long_to_short.png`) e "Configurações"
     continua cabendo porque o marcador é um ponto de 5px, não um ícone de
     18px. v2.0 manda no visual: 210px. */
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 100dvh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 12px 16px;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  z-index: 20;
}
/* v2.0: a marca ocupa a faixa do topo (64px), alinhada com a barra superior —
   no mockup a régua horizontal do topo e a vertical da sidebar se encontram
   exatamente no canto do bloco da marca. */
.wordmark {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 64px;
  flex: none;
  margin: 0 8px 20px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
/* A MARCA é o emblema "EA" da Erisen (hexágono cromado), não a letra "E" em
   caixa que ficou aqui desde 09/09. Decisão do dono em 15/09/2026, com o
   arquivo de origem no acervo da marca (fora deste repositório).
   O par emblema + "ERISEN STUDIO" é deliberado: a MARCA é Erisen, o PRODUTO é
   o Studio. Usar a logo "ERISEN AI" inteira trocaria o nome do produto.

   ┌─ 15/09/2026, noite: HUB × STUDIO, o conflito resolvido ────────────────┐
   │ O `ERISEN_UI_UX_Master_v1.0` escreve "ERISEN HUB" na sidebar e no hero │
   │ (image1). A tela implantada escreve "ERISEN STUDIO". Perguntado se     │
   │ eram o mesmo produto, o dono respondeu: "sim sao o mesmo produto,      │
   │ seguir pro Azul, pois é um produto da Erisen".                         │
   │                                                                        │
   │ Ele decidiu a COR e a identidade de produto, não o nome. Unificado em  │
   │ STUDIO, por três razões verificáveis e nenhuma de gosto:               │
   │  1. "Hub" já é o nome da PLATAFORMA neste repositório, e em código, não│
   │     em marketing: o repositório é `hub-erisen`, o Worker é `hub-api`, o│
   │     documento de arquitetura é "ERISEN HUB Master Produto/Routing/     │
   │     Segurança v2.2". Chamar a tela de HUB apagaria a distinção que já  │
   │     existe entre a plataforma e o produto que ela serve.               │
   │  2. O nome STUDIO está na logo aplicada HOJE (media/brand/             │
   │     emblema-erisen.png + este wordmark), no <title>, na tela de        │
   │     cadastro e na assinatura da citação da Home. Renomear é mexer em   │
   │     tudo isso por um título de documento.                              │
   │  3. O próprio Master §1 chama o produto de "Creative OS" — uma bancada │
   │     onde se trabalha. "Studio" diz isso; "Hub" diz ponto de passagem.  │
   │                                                                        │
   │ O EMBLEMA não muda (instrução explícita). Se o dono quiser HUB, é      │
   │ trocar o <small> do wordmark em studio.js, o <title> e a assinatura da │
   │ citação — três pontos, todos marcados com este mesmo comentário.       │
   └────────────────────────────────────────────────────────────────────────┘
   O emblema serve-se de `media/brand/emblema-erisen.png` — 128x131, 10 KB,
   derivado do original de 87 KB (a logo completa tem 2 MB e não serve para
   cabeçalho). O `border` saiu junto com a letra: caixa quadrada em volta de um
   emblema hexagonal desenha duas molduras concorrentes. */
.brand-mark {
  width: 34px;
  height: auto;
  flex: none;
  object-fit: contain;
}
.wordmark small {
  display: block;
  letter-spacing: 2px;
  font-size: 9px;
  line-height: 1.1;
  margin-top: 2px;
}
.nav-label {
  padding: 0 12px;
  margin-bottom: 12px;
}
.nav-button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  min-height: 40px;
  color: var(--text-secondary);
  padding: 10px 12px;
  gap: 12px;
  position: relative;
  font-weight: 400;
}
/* ┌─ 15/09/2026 (tarde): o marcador volta a ser ÍCONE, em toda régua ───────┐
   │ A regra anterior aqui dizia: "marcador é um ponto, não um ícone         │
   │ (mockup)". Era verdade para o mockup mestre, que desenha pontinhos.     │
   │ Não é verdade para a identidade do produto: as três referências de      │
   │ 13/09 (as telas de identidade visual) desenham ÍCONE em todos           │
   │ os dez destinos, e o dono reclamou nominalmente dos ícones.             │
   │ O ponto sai da tela em todas as larguras e o ícone entra — que é o que  │
   │ a régua estreita já fazia, agora sem a troca por breakpoint.            │
   │ O <span class="nav-dot"> continua no DOM (e continua com a cor do       │
   │ accent quando ativo) para não reescrever a montagem do menu numa fatia  │
   │ de aparência; só não é mais pintado. Se ninguém o reivindicar, a        │
   │ próxima fatia pode removê-lo da marcação.                               │
   └─────────────────────────────────────────────────────────────────────────┘ */
.nav-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-secondary);
  flex: none;
  margin-left: 13px;
  display: none;
}
.nav-button .icon {
  display: block;
  flex: none;
}
.nav-button:hover:not([aria-current="page"]) {
  background: var(--surface-1);
  color: var(--text-primary);
}
.nav-button[aria-current="page"] {
  background: var(--accent-primary-soft);
  color: var(--text-primary);
  font-weight: 500;
}
.nav-button[aria-current="page"] .nav-dot {
  background: var(--accent-primary);
}
/* 15/09/2026, noite — o ícone do item ativo deixou de ser colorido.
   HISTÓRICO: na referência de Início (13/09) o ícone do item ativo era AMARELO
   — o pixel mais claro dentro do glifo dava #ffff66 e a saturação média da
   caixa 0,666, contra 0,038-0,084 (branco) nos outros nove itens.
   NO MASTER v1.0 (que agora vale para o produto inteiro) é o contrário, e
   medido do mesmo jeito: no item ativo da image1 (y119-153) e da image6
   (y114-150) a tinta do ícone tem moda #e4eafd e saturação média 0,26 — e
   esses 0,26 são o ANTIALIASING do traço fino sobre o navy, não cor de traço:
   o pixel cheio é #f7fbff/#ffffff. O rótulo dá 0,097, branco puro. O item
   INATIVO é cinza (#717790).
   Ou seja: no Master o ativo se distingue pelo FUNDO (--accent-primary-soft) e
   pelo brilho da tinta, nunca por tinta colorida. Isso também resolve o §19
   ("estados ativos não podem depender apenas de cor"): continuam existindo a
   barra de 4px e o ponto, que são forma, não só matiz. */
.nav-button[aria-current="page"] .icon {
  color: var(--text-primary);
}
/* A barra lima de 4px na borda esquerda do item ativo (medida em x=12..15). */
.nav-button[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-primary);
}
.nav-button .icon {
  width: 18px;
  height: 18px;
}
.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* v2.0: o rodapé da sidebar identifica a PESSOA e o plano ("<primeiro nome> / Conta Pro"),
   não o ambiente ("Workspace Erisen / Ambiente local"). Quem usa o Studio não
   precisa saber onde ele está hospedado. */
.workspace-id {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: 10px 12px;
  font-size: var(--text-body-sm-size);
}
.workspace-id .row {
  gap: 10px;
}
.workspace-id .avatar {
  height: 30px;
  width: 30px;
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--surface-3);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  flex: none;
}
.workspace-id p {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.workspace-id small {
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.local-note {
  font-size: var(--text-label-size);
  color: var(--muted);
  padding: 0 12px;
  line-height: 1.5;
}
.local-note .icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
}
.studio-body {
  min-width: 0;
}
.topbar {
  height: 64px;
  padding: 0 24px 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-shell);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar > .row:first-child {
  flex: 1;
  min-width: 0;
}
.topbar > .row:last-child {
  flex: none;
}
/*
 * v2.0: a migalha sai do desenho. Nos 10 mockups o topo tem busca + saldo +
 * jobs + CTA do Argos, e quem diz "onde estou" é o H1 da própria tela
 * ("Long-to-Short", "Biblioteca", "Ganhos"), que toda tela já tem.
 * O elemento CONTINUA no DOM, e continua sendo atualizado, por dois motivos
 * concretos: leitor de tela ganha o rótulo da rota sem depender do H1, e a
 * suíte de rotas antigas mede `#viewCrumb` em 19 endereços. Some da vista,
 * não do produto.
 */
.breadcrumb {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.connection-label {
  font-size: var(--text-label-size);
  color: var(--muted);
}
.mobile-menu {
  display: none;
}
.content {
  max-width: 1600px;
  padding: 32px;
  margin: auto;
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.page-heading .eyebrow {
  margin-bottom: 8px;
}
.page-heading p.muted {
  margin-top: 12px;
  font-size: var(--text-body-size);
}
.save-status {
  font-size: var(--text-label-size);
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.save-status .icon {
  width: 14px;
  height: 14px;
}
.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.mode-tab {
  min-width: 110px;
  border-color: transparent;
  gap: 8px;
  color: var(--muted);
  padding: 10px 16px;
  min-height: var(--control-height-md);
}
.mode-tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--line);
  color: var(--fg);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.section-heading p {
  font-size: var(--text-body-sm-size);
  color: var(--muted);
}
.section-heading button {
  font-size: var(--text-label-size);
  min-height: 32px;
  padding: 4px 0;
}
/* "Ver todos" no celular: 32px é menor que o dedo. 44px no elemento. */
@media (max-width: 760px) {
  .section-heading button {
    min-height: 44px;
    padding: 4px 8px;
  }
}
.preset-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.preset-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  min-width: 0;
  position: relative;
}
.preset-card[aria-pressed="true"] {
  outline: 1px solid var(--fg);
  border-color: var(--fg);
}
.preset-art {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--surface);
}
.preset-art-placeholder {
  height: 100px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--muted);
}
.preset-art-placeholder .icon {
  width: 36px;
  height: 36px;
}
.preset-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}
.preset-info b {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
}
.preset-info small {
  font-size: var(--text-label-size);
}
.preset-check {
  position: absolute;
  right: 8px;
  top: 8px;
  background: var(--fg);
  color: var(--black);
  height: 22px;
  width: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
}
.preset-check .icon {
  width: 14px;
  height: 14px;
}
.bench-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.composer {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  background: var(--bg);
}
.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer-head h2 {
  font-size: var(--text-h3-size);
  font-weight: 500;
}
.field-label {
  font-size: var(--text-label-size);
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.field-note {
  font-size: var(--text-body-sm-size);
  color: var(--muted);
  line-height: 1.5;
  margin-top: 8px;
}
.field-note button {
  font-size: var(--text-label-size);
  padding: 0;
  min-height: 24px;
  border: 0;
  text-decoration: underline;
}
.prompt-input {
  min-height: 160px;
  font-size: var(--text-body-size);
  padding: 12px;
}
.prompt-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--text-label-size);
  color: var(--muted);
}
.prompt-controls button {
  min-height: 28px;
  padding: 4px 0;
  font-size: var(--text-label-size);
  border: 0;
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.settings-grid label {
  font-size: var(--text-label-size);
  color: var(--muted);
}
.style-applied {
  border-left: 2px solid var(--muted);
  padding-left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: var(--text-label-size);
}
.style-applied b {
  font-weight: 500;
}
.style-applied p {
  color: var(--muted);
  font-size: var(--text-label-size);
  margin-top: 3px;
}
.style-applied button {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 4px;
}
.reference-button {
  width: 100%;
  border-style: dashed;
  min-height: 48px;
  color: var(--muted);
  font-size: var(--text-label-size);
}
.generate-area {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.generate-button {
  width: 100%;
  min-height: var(--control-height-md);
  justify-content: space-between;
}
.generate-note {
  font-size: var(--text-body-sm-size);
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.preview-column {
  min-width: 0;
}
.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.preview-toolbar p {
  font-size: var(--text-label-size);
  color: var(--muted);
}
.stage {
  aspect-ratio: 4/3;
  min-height: 300px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.stage > img,
.stage > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
}
.stage.inspiration > img {
  object-fit: cover;
  opacity: 0.65;
}
.stage .stage-label {
  position: absolute;
  left: 16px;
  top: 16px;
  background: var(--black);
  padding: 6px 10px;
  font-size: var(--text-label-size);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--body);
}
.stage-caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  background: rgba(0, 0, 0, 0.8);
  padding: 16px;
  border-radius: var(--radius-md);
  max-width: 400px;
}
.stage-caption h2 {
  font-size: var(--text-h2-size);
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.stage-caption p {
  color: var(--body);
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
}
.stage-caption button {
  margin-top: 16px;
  font-size: var(--text-label-size);
  min-height: 36px;
  background: var(--fg);
  color: var(--black);
}
.stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 350px;
  padding: 28px;
}
.stage-empty > .icon {
  width: 40px;
  height: 40px;
  color: var(--muted);
}
.stage-empty p {
  font-size: var(--text-body-sm-size);
  color: var(--muted);
}
.stage-text {
  padding: 24px;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 480px;
  width: 100%;
  align-self: stretch;
  font-size: var(--text-body-lg-size);
}
.stage-audio {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}
.stage-audio > .icon {
  height: 64px;
  width: 64px;
  color: var(--muted);
}
audio {
  width: 100%;
}
.stage-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  min-height: 40px;
}
.stage-footer small {
  font-size: var(--text-label-size);
  max-width: 55%;
}
.stage-footer button {
  font-size: var(--text-label-size);
}
.registration-view { max-width:520px;margin:8vh auto;padding:32px;display:grid;gap:20px; }
.registration-view h1 { font-size:var(--text-h1-size);line-height:1.1;letter-spacing:-.9px;margin:0; }
.registration-view p { color:var(--body);margin:0; }
.registration-view form { display:grid;gap:16px; }
.registration-view input:not([type="checkbox"]) { width:100%;min-height:var(--control-height-md); }
.registration-view input[readonly] { color:var(--muted); }
.registration-view button { min-height:var(--control-height-md); }
.registration-view a { color:var(--muted); }
@media(max-width:600px){.registration-view{margin:3vh auto;padding:24px;}.registration-view h1{font-size:var(--text-h1-size);}}
.post-toolbar {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: 8px;
  min-width: 0;
}
.post-toolbar button {
  max-width: 100%;
  white-space: normal;
}
.recent-section {
  margin-top: 24px;
}
.recent-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
}
.recent-item {
  width: 72px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  flex: none;
  background: var(--surface);
}
.recent-item img,
.recent-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recent-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--muted);
  font-size: var(--text-label-size);
  width: 100%;
}
.local-banner {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-label-size);
}
.local-banner > .icon {
  width: 16px;
  height: 16px;
}
.local-banner button {
  margin-left: auto;
  border: 0;
  font-size: var(--text-label-size);
  white-space: nowrap;
  min-height: 28px;
  padding: 0;
}
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.search-field {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.search-field .icon {
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--muted);
}
.search-field input {
  padding-left: 40px;
}
.filter-button {
  font-size: var(--text-body-sm-size);
  min-height: var(--control-height-md);
}
.filter-button[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--muted);
}
.library-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.library-tabs button {
  min-height: var(--control-height-md);
  border-color: transparent;
  color: var(--muted);
}
.library-tabs button[aria-selected="true"] {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line);
}
.activity-heading, .activity-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.activity-heading p { margin-top: 8px; }
.activity-banner {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.activity-banner > div { display: flex; align-items: center; gap: 12px; }
.activity-banner button, .activity-heading button { flex: none; }
.activity-note { margin: 12px 0; font-size: var(--text-body-sm-size); }
#operationNotice { color: var(--muted); margin-bottom: 20px; font-size: var(--text-body-sm-size); }
.operation-list { display: flex; flex-direction: column; gap: 12px; }
.operation-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 180px;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.operation-symbol {
  background: var(--surface);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
}
.operation-info h3 { overflow-wrap: anywhere; margin-bottom: 4px; }
.operation-info > p { color: var(--muted); font-size: var(--text-body-sm-size); }
.operation-info .badge { margin-top: 12px; font-size: var(--text-label-size); }
.operation-detail { margin-top: 8px; max-width: 600px; }
.operation-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: right; }
.operation-actions > div { margin-bottom: 4px; }
.operation-actions button { font-size: var(--text-body-sm-size); min-height: var(--control-height-md); }
.operation-id { overflow-wrap: anywhere; }
.load-operations { margin: 24px auto 0; display: flex; }
@media (max-width: 760px) {
  .activity-heading, .activity-banner { align-items: flex-start; flex-wrap: wrap; }
  .activity-banner button { width: 100%; }
  .operation-card { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .operation-symbol { width: 32px; height: 32px; }
  .operation-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; text-align: left; align-items: center; }
  .operation-actions > div { grid-column: 1 / -1; }
  .operation-actions > .btn-quiet { text-align: left; }
}
.styles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/*
 * BIBLIOTECA DENSA — 23/09/2026. `.library-grid` saiu do grupo com `.styles-grid`
 * (Direção continua com os 3 cartões grandes de sempre, intocada) para virar um
 * mosaico pequeno e denso, capa em primeiro lugar: `auto-fill`/`minmax(120px,1fr)`
 * cabe MUITOS mais itens que os 3 fixos de antes (o pedido do dono — "só 6 itens
 * cabiam num 1440") sem precisar contar coluna a coluna.
 */
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  /* Sem isto, o Grid ESTICA todo item da linha até a altura do maior vizinho
     (o comportamento padrão é `align-items:stretch`) — e um cartão de áudio ao
     lado de um de imagem virava tão alto quanto ele, por fora, mesmo com o
     conteúdo interno pequeno. Medido com o debug direto no navegador. */
  align-items: start;
}
.library-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: visible; /* o menu de "mais ações" precisa poder sair da borda do cartão */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.asset-open {
  width: 100%;
  display: flex;
  height: 120px;
  position: relative;
  background: var(--surface);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  flex: none;
}
.asset-open img,
.asset-open video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asset-open > .icon {
  width: 28px;
  height: 28px;
}
.asset-text-excerpt {
  font-size: var(--text-label-size);
  white-space: pre-wrap;
  text-align: left;
  max-height: 100%;
  padding: 10px;
  color: var(--muted);
  overflow: hidden;
  width: 100%;
}
.library-meta {
  padding: 8px 10px 0;
}
.library-meta h3 {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 2px;
}
/*
 * 23/09/2026 — ESTA LINHA VOLTOU PARA A ESCALA, e o motivo está medido, não estimado.
 * Nasceu 11px na fatia da Biblioteca densa desta madrugada, e 11px é o degrau que a escala
 * ELIMINOU em 16/09 (`--text-caption-*`, ver tokens.css): o piso da auditoria §1.1 é 12px.
 * A função deste texto é METADATA do cartão (tipo e data do arquivo) — o token da função é
 * `label`. E a densidade que o dono aprovou ontem NÃO muda com isso — medido, com 4 imagens e
 * 1 áudio na Biblioteca a 1440px, antes e depois da troca: cartão de imagem 216px → 216px,
 * linha de áudio 66px → 66px, 5 colunas → 5 colunas, zero estouro lateral. O motivo é
 * mecânico: a entrelinha vem do `<body>` (`--text-body-line`, 21px) e não do `font-size` desta
 * regra, então a caixa do texto já tinha 21px de altura com 11px de letra e continua com 21px
 * com 12px. O que subir 1px mudou foi o único lugar onde precisava mudar: a letra.
 */
.library-meta small {
  display: block;
  font-size: var(--text-label-size);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
 * Ações do cartão: "Reutilizar" é a ação PRIMÁRIA e continua um botão de verdade,
 * sempre visível. Baixar/Excluir viram um menu (`<details>`) — nativo, então
 * focável e ativável por teclado (Enter/Espaço no `<summary>`) sem JS de toggle, e
 * aberto por TOQUE tão bem quanto por clique, que é o caminho de quem não tem hover.
 */
.library-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px 8px;
}
/*
 * 23/09/2026 — mesma volta à escala, mesmo motivo. "Reutilizar" é RÓTULO de botão, e rótulo é
 * exatamente a função de `--text-label-size`. Aqui a subida não mexe em altura nenhuma: o botão
 * tem `min-height: 28px` e o texto de 12px (linha ~14px) continua folgado dentro dela — medido,
 * 28px antes e 28px depois, no cartão de imagem e na linha de áudio (onde o rótulo nem aparece,
 * `.library-card.is-audio .library-reuse span { display: none }`).
 */
.library-reuse {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  gap: 6px;
  font-size: var(--text-label-size);
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--text-secondary);
}
.library-reuse:hover,
.library-reuse:focus-visible {
  color: var(--text-primary);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.library-reuse .icon {
  width: 14px;
  height: 14px;
  flex: none;
}
.library-reuse span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-menu {
  position: relative;
  flex: none;
}
.asset-menu summary {
  list-style: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.asset-menu summary::-webkit-details-marker {
  display: none;
}
.asset-menu summary:hover,
.asset-menu summary:focus-visible,
.asset-menu[open] summary {
  background: var(--surface-2);
  color: var(--text-primary);
  outline: 2px solid transparent;
}
.asset-menu summary:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
.asset-menu summary .icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.asset-menu-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: var(--shadow-md);
}
.asset-menu-list button {
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  background: none;
  font-size: var(--text-body-sm-size);
  min-height: 36px;
  width: 100%;
}
.asset-menu-list button:hover,
.asset-menu-list button:focus-visible {
  background: var(--surface-2);
}
.asset-menu-list .icon {
  width: 16px;
  height: 16px;
}
/*
 * ÁUDIO: sem a mesma altura de imagem/vídeo — vira uma linha compacta com um glifo
 * pequeno no lugar de capa (nenhum front decodifica o áudio inteiro para desenhar
 * onda de verdade; um glifo fixo não finge medição nenhuma).
 */
.library-card.is-audio {
  flex-direction: row;
  align-items: center;
}
.library-card.is-audio .asset-open {
  width: 48px;
  height: 48px;
  margin: 8px 0 8px 8px;
  border-radius: var(--radius-sm);
  flex: none;
}
.library-card.is-audio .asset-open > .icon {
  width: 20px;
  height: 20px;
}
.library-card.is-audio .library-meta {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}
.library-card.is-audio .library-actions {
  flex: none;
  width: auto;
  padding: 0 8px 0 0;
}
.library-card.is-audio .library-reuse span {
  display: none;
}
.library-card.is-audio .library-reuse {
  flex: none;
  width: 28px;
  justify-content: center;
  padding: 0;
}
.empty-page {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 32px;
  gap: 16px;
}
.empty-page > .icon {
  width: 40px;
  height: 40px;
  color: var(--muted);
}
.empty-page p {
  color: var(--muted);
  max-width: 390px;
}
.styles-grid .preset-art,
.styles-grid .preset-art-placeholder {
  height: 180px;
}
.styles-grid .preset-info {
  padding: 16px;
  gap: 8px;
}
.styles-grid .preset-info b {
  font-size: var(--text-body-lg-size);
}
.styles-grid .preset-info small {
  line-height: 1.5;
  font-size: var(--text-body-sm-size);
}
.connector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.connector {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connector-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.provider-symbol {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 20px;
  flex: none;
}
.connector p {
  font-size: var(--text-body-sm-size);
  color: var(--muted);
}
.connector-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  font-size: var(--text-label-size);
}
.connector-footer button {
  font-size: var(--text-label-size);
}
.connection-state {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.connection-state b {
  display: block;
  font-weight: 500;
  font-size: var(--text-label-size);
  margin-bottom: 4px;
}
.connection-state code {
  font-size: var(--text-label-size);
  color: var(--muted);
  word-break: break-all;
}
.chat-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  z-index: 35;
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.chat-shade {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 30;
}
.chat-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
/* ┌─ NO ESTREITO O CABEÇALHO DEIXA DE FIXAR — medido em 16/09/2026 ───────────┐
   │ Achado ao restaurar o portão de `test:ui`, não a olho. Em 390x844 este    │
   │ bloco mede 272px de altura — 32% da tela — porque não é só o título: ele  │
   │ carrega as abas de provedor e os três cartões de modo. Fixo, ele ESCONDE  │
   │ o que rola por baixo.                                                     │
   │                                                                           │
   │ A consequência medida, com "Ajustes desta conversa" aberto: o campo de    │
   │ escrita e o botão de enviar ficam 750px acima do fim do conteúdo, então   │
   │ em QUALQUER posição de rolagem em que eles entram na tela caem no         │
   │ intervalo 0-272 — atrás do cabeçalho. Não é "difícil de alcançar": é      │
   │ inalcançável. o teste de tela da conversa cobra exatamente isso ("mantém  │
   │ mensagem, envio e fechamento acessíveis") e é o teste que denunciou.      │
   │                                                                           │
   │ Por que STATIC e não um `scroll-margin-top`: recuo de rolagem só desloca  │
   │ o alvo quando ainda há conteúdo abaixo para rolar; no fim da lista o       │
   │ navegador não rola mais e o botão volta para trás do cabeçalho. E a       │
   │ auditoria §1.4 pede o contrário de fixar bloco secundário no celular      │
   │ ("esconder informações secundárias", "não replicar desktop em coluna       │
   │ infinita") — abas de provedor e cartões de modo são escolha de uma vez,   │
   │ não moldura permanente. O ✕ continua alcançável: é a primeira coisa do    │
   │ painel, a uma rolagem de distância, e `#closeChat` segue no fluxo.        │
   │ No desktop nada muda — lá o cabeçalho ocupa 14% da altura e fixar ajuda.  │
   └───────────────────────────────────────────────────────────────────────────┘ */
@media (max-width: 760px) {
  .chat-header {
    position: static;
  }
}
.chat-header h2 {
  font-size: var(--text-h3-size);
}
.chat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}
.chat-tab {
  font-size: var(--text-body-sm-size);
}
.chat-tab[aria-selected="true"] {
  border-color: var(--muted);
  background: var(--surface);
}
.chat-status {
  font-size: var(--text-label-size);
  color: var(--muted);
  margin-top: 12px;
}
.chat-messages {
  flex: 1 0 120px;
  overflow: auto;
  min-height: 120px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-welcome {
  padding: 16px 0;
}
.chat-welcome > .icon {
  width: 32px;
  height: 32px;
  margin-bottom: 20px;
}
.chat-welcome h3 {
  font-size: var(--text-h3-size);
  font-weight: 400;
  margin-bottom: 12px;
}
.chat-welcome p {
  font-size: var(--text-body-sm-size);
  color: var(--muted);
}
.chat-starters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.chat-starters button {
  font-size: var(--text-label-size);
  text-align: left;
  justify-content: space-between;
}
.chat-message {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--text-body-sm-size);
  max-width: 100%;
  flex: none;
}
.chat-message.user {
  background: var(--surface);
  align-self: flex-end;
  width: 90%;
}
.chat-message > small {
  display: block;
  font-size: var(--text-label-size);
  margin-bottom: 8px;
}
.chat-message button {
  font-size: var(--text-label-size);
  min-height: 32px;
  margin: 12px 8px 0 0;
}
.chat-composer {
  flex-shrink: 0;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}
.chat-context {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-label-size);
  color: var(--muted);
  margin-bottom: 12px;
}
.chat-context .icon {
  height: 14px;
  width: 14px;
}
.chat-composer textarea {
  min-height: 96px;
  max-height: 180px;
  font-size: var(--text-body-sm-size);
}
.chat-send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.chat-send-row small {
  font-size: var(--text-label-size);
  max-width: 250px;
}
.chat-error {
  font-size: var(--text-label-size);
  margin-top: 8px;
  color: var(--danger);
}
dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 20px;
}
.dialog-header h2 {
  font-size: var(--text-h2-size);
  line-height: 1.2;
  margin-top: 4px;
}
.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dialog-content p {
  font-size: var(--text-body-size);
  color: var(--body);
}
.dialog-content pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: var(--text-body-sm-size)/var(--text-body-sm-line) var(--font);
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-md);
  max-height: 280px;
  overflow: auto;
  margin: 0;
}
.dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 24px;
}
.dialog-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: var(--text-body-sm-size);
}
.dialog-summary div {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.dialog-summary small {
  display: block;
  margin-bottom: 4px;
}
.dialog-alert {
  border-left: 2px solid var(--muted);
  padding: 8px 12px;
  font-size: var(--text-body-sm-size);
  color: var(--body);
}
.consent {
  display: flex;
  gap: 12px;
  align-items: start;
  font-size: var(--text-body-sm-size);
  font-weight: 400;
}
.consent input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--black);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  z-index: 100;
  font-size: var(--text-body-sm-size);
  max-width: calc(100% - 32px);
  text-align: center;
}
.screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-drop {
  outline: 2px dashed var(--fg);
  outline-offset: -8px;
}
.error-inline {
  border-left: 2px solid var(--danger);
  padding: 8px 12px;
  font-size: var(--text-label-size);
  background: var(--surface);
  color: var(--danger);
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--muted);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1700px) {
  .bench-grid {
    grid-template-columns: 360px minmax(0, 1fr);
  }
  .preset-art {
    height: 140px;
  }
  .stage {
    aspect-ratio: 16/10;
  }
  .content {
    padding: 40px;
  }
}
@media (max-width: 1200px) {
  .studio-shell {
    grid-template-columns: 196px minmax(0, 1fr);
  }
  .content {
    padding: 24px;
  }
  .topbar {
    padding: 0 24px;
  }
  .wordmark {
    font-size: 16px;
    margin-bottom: 32px;
  }
  .bench-grid {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 16px;
  }
  .composer {
    padding: 16px;
  }
  .stage {
    aspect-ratio: auto;
    height: 440px;
  }
  .stage-caption {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px;
  }
  .stage-caption h2 {
    font-size: var(--text-h3-size);
  }
  .preset-art {
    height: 88px;
  }
  .preset-info {
    padding: 8px;
  }
  .preset-info small {
    font-size: var(--text-label-size);
  }
  .page-heading h1 {
    font-size: var(--text-h1-size);
  }
}
@media (max-width: 950px) {
  .studio-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .wordmark {
    margin: 0 auto 32px;
  }
  .wordmark > span:last-child,
  .sidebar .nav-text,
  .nav-label,
  .workspace-id,
  .local-note {
    display: none;
  }
  .nav-button {
    justify-content: center;
    padding: 12px;
  }
  .sidebar {
    padding: 24px 8px 16px;
  }
  .bench-grid {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .stage {
    height: 460px;
  }
  .preset-strip {
    gap: 8px;
  }
  .styles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .save-status {
    display: none;
  }
  .connection-label {
    display: none;
  }
  .connector {
    padding: 20px;
  }
  .connector-top {
    align-items: start;
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  .studio-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
    position: fixed;
    left: 0;
    width: 210px;
    top: 64px;
    height: calc(100dvh - 64px);
    border-right: 1px solid var(--line);
  }
  .sidebar.mobile-open {
    display: flex;
  }
  .sidebar .nav-text,
  .sidebar .nav-label,
  .sidebar .workspace-id,
  .sidebar .local-note {
    display: block;
  }
  .sidebar .wordmark {
    display: none;
  }
  .sidebar .nav-button {
    justify-content: flex-start;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .topbar {
    padding: 0 16px;
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 20;
  }
  .breadcrumb {
    font-size: var(--text-label-size);
    gap: 8px;
  }
  .topbar .chat-toggle {
    font-size: var(--text-label-size);
    padding: 8px;
  }
  .topbar .chat-toggle .icon {
    width: 16px;
    height: 16px;
  }
  .content {
    padding: 24px 16px;
  }
  /* Medido em 390 (20/09): "Biblioteca" virava uma coluna de 90px com o
     subtítulo em 5 linhas, e "Levar para Upscale" ocupava 3 linhas ao lado;
     "Voltar para Biblioteca" (Upscale) quebrava em 4. No celular a AÇÃO desce
     para baixo do título — o título é o dado, a ação é o atalho. */
  .page-heading {
    align-items: start;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .page-heading > div:first-child {
    flex: 1 1 100%;
  }
  .page-heading > .row {
    flex: 0 0 auto;
    flex-wrap: wrap;
    max-width: 100%;
  }
  .page-heading h1 {
    font-size: var(--text-h1-size);
  }
  .page-heading p.muted {
    font-size: var(--text-body-sm-size);
    margin-top: 8px;
  }
  .page-heading > button {
    flex: 0 0 auto;
    font-size: var(--text-label-size);
    padding: 8px 12px;
    min-height: 44px; /* alvo de toque: 44px no elemento, não no pseudo */
    white-space: nowrap;
  }
  .page-heading > button .icon {
    width: 16px;
  }
  .mode-tabs {
    gap: 4px;
    width: 100%;
  }
  .mode-tab {
    min-width: 0;
    flex: 1;
    padding: 10px 8px;
    font-size: var(--text-body-sm-size);
    gap: 6px;
  }
  .mode-tab .icon {
    height: 16px;
    width: 16px;
  }
  .preset-strip {
    grid-template-columns: repeat(4, 140px);
    overflow: auto;
    padding: 2px 2px 8px;
    margin-bottom: 20px;
  }
  .preset-art {
    height: 80px;
  }
  .bench-grid {
    grid-template-columns: 1fr;
  }
  .composer {
    padding: 20px;
  }
  .prompt-input {
    min-height: 130px;
  }
  .stage {
    height: auto;
    aspect-ratio: 4/3;
    min-height: 300px;
  }
  .preview-column {
    margin-top: 8px;
  }
  .stage-caption {
    max-width: 400px;
  }
  .local-banner {
    align-items: start;
    flex-wrap: wrap;
  }
  .local-banner button {
    margin-left: 28px;
  }
  .connector-grid {
    grid-template-columns: 1fr;
  }
  .chat-panel {
    width: min(100%, 400px);
  }
  .stage-footer {
    align-items: start;
  }
  .stage-footer small {
    max-width: 45%;
  }
  /* Biblioteca: exatamente 2 colunas no celular, nunca 1 — cartão já é pequeno. */
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .asset-open {
    height: 96px;
  }
  .library-card.is-audio .asset-open {
    width: 40px;
    height: 40px;
  }
  .styles-grid {
    gap: 12px;
  }
  .styles-grid .preset-art,
  .styles-grid .preset-art-placeholder {
    height: 130px;
  }
  .styles-grid .preset-info {
    padding: 12px;
  }
  .styles-grid .preset-info b {
    font-size: var(--text-body-size);
  }
  .styles-grid .preset-info small {
    font-size: var(--text-label-size);
  }
  .connector-footer {
    flex-wrap: wrap;
  }
  dialog {
    padding: 20px;
  }
  .dialog-actions button {
    flex: 1;
  }
  .dialog-summary {
    gap: 8px;
  }
  .filter-button {
    padding: 8px;
    font-size: var(--text-label-size);
  }
  .search-field {
    min-width: 100%;
    order: -1;
  }
  .btn-icon {
    min-height: var(--control-height-md);
    width: 44px;
  }
}
/* Keep the action and canvas within a working desktop viewport. */
.preset-strip .preset-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 72px;
}
.preset-strip .preset-art,
.preset-strip .preset-art-placeholder {
  height: 72px;
}
.preset-strip .preset-info {
  padding: 12px;
  gap: 4px;
}
.preset-strip .preset-info small {
  font-size: var(--text-label-size);
}
.preset-strip .preset-check {
  top: 4px;
  left: 4px;
  right: auto;
}
.page-heading {
  margin-bottom: 20px;
}
.page-heading h1 {
  font-size: var(--text-h1-size);
  letter-spacing: -0.7px;
}
.page-heading p.muted {
  margin-top: 8px;
}
.mode-tabs {
  margin-bottom: 16px;
}
.preset-strip {
  margin-bottom: 20px;
}
.composer {
  gap: 12px;
  padding: 16px;
}
.prompt-input {
  min-height: 120px;
}
.composer-head .btn-icon {
  min-height: 32px;
  height: 32px;
}
.stage {
  aspect-ratio: 16/10;
  max-height: 560px;
}
@media (min-width: 1280px) {
  .studio-shell.chat-open {
    margin-right: 380px;
  }
  .studio-shell.chat-open .preset-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-shell.chat-open .bench-grid {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .studio-shell.chat-open .connection-label {
    display: none;
  }
  .studio-shell.chat-open .stage-caption h2 {
    font-size: var(--text-h3-size);
  }
  .studio-shell.chat-open .stage-caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px;
  }
  .studio-shell.chat-open .stage-caption p {
    font-size: var(--text-label-size);
  }
  .studio-shell.chat-open .composer {
    max-height: none;
    overflow: visible;
  }
  .studio-shell.chat-open .generate-area {
    position: static;
  }
}
@media (min-width: 1100px) {
  .composer {
    max-height: calc(100dvh - 380px);
    min-height: 440px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) var(--bg);
  }
  .generate-area {
    position: sticky;
    bottom: -16px;
    margin: 0 -16px -16px;
    padding: 12px 16px;
    background: var(--bg);
    z-index: 2;
  }
  .generate-note {
    margin-top: 6px;
  }
  .generate-area #saveToLibrary {
    min-height: 32px;
    margin-top: 4px !important;
  }
  .stage {
    height: clamp(300px, calc(100dvh - 570px), 560px);
    aspect-ratio: auto;
  }
  .local-banner {
    margin-top: 16px;
  }
  .recent-section {
    margin-top: 16px;
  }
}
@media (max-width: 760px) {
  .preset-strip {
    grid-template-columns: repeat(4, 220px);
  }
  .preset-strip .preset-card {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 64px;
  }
  .preset-strip .preset-art,
  .preset-strip .preset-art-placeholder {
    height: 64px;
  }
  .preset-strip .preset-info {
    padding: 8px;
  }
  .page-heading h1 {
    font-size: var(--text-h1-size);
  }
  .composer {
    padding: 16px;
    gap: 16px;
  }
  .stage {
    height: 300px;
    min-height: 0;
    aspect-ratio: auto;
    width: 100%;
  }
  .stage-caption h2 {
    font-size: var(--text-h3-size);
  }
  .stage-caption {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
  .stage-caption p {
    font-size: var(--text-label-size);
  }
  .stage-caption button {
    margin-top: 12px;
  }
  .preview-column {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.recent-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.recent-filter input { width:auto; max-width:100%; color-scheme:dark; }
.recent-section .section-heading { flex-wrap:wrap; }
.preset-strip .preset-card { min-height:72px; }
/* Receitas sem miniatura (as fotos de inspiração saíram da bancada): o texto ocupa o card inteiro. */
.preset-strip .preset-card { grid-template-columns:minmax(0, 1fr); }
.voice-options { display:grid; gap:16px; margin-bottom:20px; }
.voice-options label { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
.voice-options audio { grid-column:1 / -1; width:100%; }

/* ============================================================
   App Shell v1.9 (fatias 1 e 2) — navegação consolidada, Início,
   Configurações e Criar Assistido/Avançado.
   Todo valor abaixo vem de tokens.css (fatia 5). Nada de cor, raio ou
   espaçamento novo foi inventado aqui.
   Fontes: v1.9 §7 (App Shell), §13 (Início), §14-16 (Criar), §57 (Settings),
   §11 (botões), §68 (empty states), §71 (mobile).
   ============================================================ */

/* --- Sidebar em grupos (§5/§7.1) --- */
/* Medido em 1440x900: com gap de 24px e botão de 44px os cinco grupos passavam
   de 900px e o item "Operação" era cortado pelo rodapé da sidebar. Densidade
   de navegação foi para 40px (o §11 fala de botões de AÇÃO, não de item de
   menu) e o container ganhou min-height:0 para rolar de verdade em vez de
   esconder o último item. */
.nav-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 0 0 auto;
}
/* Quem rola é a sidebar inteira, não a lista de grupos: com a rolagem na lista,
   em 900px (desktop) e 780px (gaveta do celular) o último item — "Operação" —
   ficava cortado com o rótulo ADMIN visível e nada embaixo. Medido nas duas
   capturas de 15/09 antes de corrigir. */
.sidebar {
  overflow-y: auto;
}
.sidebar-bottom {
  flex: 0 0 auto;
  /* Em 900px de altura o último item do menu encostava no cartão do workspace. */
  padding-top: var(--space-3);
}
.nav-button {
  min-height: 40px;
}
.nav-group[hidden] {
  display: none;
}
.nav-group .nav-label {
  margin-bottom: var(--space-2);
}
.nav-group nav {
  display: flex;
  flex-direction: column;
}
/* O grupo Admin é visualmente separado da área do cliente (§61). */
.nav-group[data-nav-admin] {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

/* --- Top bar: jobs ativos e Argos (§7.2/§12/§18.1) --- */
.top-jobs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-height-sm);
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-label-size);
}
.top-jobs .icon {
  width: 14px;
  height: 14px;
}
.chat-skills {
  min-height: var(--control-height-sm);
  padding: 0 10px;
  font-size: var(--text-label-size);
}

/* --- Criar: Assistido | Avançado (§14) --- */
.create-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
}
.create-modes button {
  min-height: var(--control-height-sm);
  min-width: 116px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
}
/* ModeToggle (§23), segmento ativo — 15/09/2026, noite.
   Era `--surface-3` (pílula cinza). No `ERISEN_UI_UX_Master_v1.0` o segmento
   ativo do Guiado|Avançado é o ACCENT SÓLIDO com tinta branca: medido na
   image3 (Mockup Studio), a moda dentro do "Guiado" ativo é #313cfd — uma das
   seis amostras que formam o próprio --accent-primary. É o mesmo tratamento do
   CTA, e é o que o §3.3 quer dizer com "posição e aparência padronizadas":
   sem isso, o modo em que a pessoa está é o elemento mais apagado do topo.
   Tinta = --accent-primary-ink (branca): 6,24:1. */
.create-modes button[aria-selected="true"] {
  background: var(--accent-primary);
  color: var(--accent-primary-ink);
  font-weight: 500;
}

/* --- Criar · Assistido (§15) --- */
.assisted-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-5);
  align-items: start;
}
.assisted-composer {
  gap: var(--space-4);
}
.assisted-prompt {
  min-height: 180px;
}
.assisted-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.assisted-model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.assisted-model b {
  display: block;
  font-weight: 500;
}
.assisted-model small {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.assisted-skills .preset-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}
.assisted-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.assisted-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.assisted-card p {
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  margin: 0;
}
.assisted-card button {
  align-self: flex-start;
}

/* --- Início (§13) --- */
.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.home-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  color: var(--text-primary);
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.home-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.home-card h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
}
.home-card p {
  margin: 0;
  font-size: var(--text-body-sm-size);
}
.home-card button {
  align-self: flex-start;
  margin-top: auto;
}
.home-continue {
  grid-column: span 2;
}
.home-recent .recent-row {
  gap: var(--space-2);
}
.recent-card {
  width: 132px;
  min-height: 108px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}
.recent-card img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.recent-card small {
  color: var(--text-secondary);
  font-size: var(--text-label-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-empty {
  padding: var(--space-6);
}

/* --- Configurações (§57/§58/§59/§60) --- */
.settings-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}
.settings-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.settings-card h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
}
.settings-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.settings-card > a,
.settings-card > button {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
/* Medido em 1440 (20/09): o cartão Perfil, o mais alto da grade, esticava os
   três vizinhos a 440px com duas linhas de texto dentro, e o campo do nome
   ficava com 162px — cortava o placeholder em "Como você quer ser cl". Com
   duas colunas para o Perfil, o campo respira e a fileira encolhe. */
@media (min-width: 700px) {
  .settings-card.profile-card {
    grid-column: span 2;
  }
}

/* --- Responsivo (§71): nada pode estourar a largura no celular. --- */
@media (max-width: 1100px) {
  .assisted-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-continue {
    grid-column: auto;
  }
}
@media (max-width: 760px) {
  .home-actions .home-action {
    flex: 1 1 calc(50% - var(--space-2));
    justify-content: center;
  }
  .create-modes {
    width: 100%;
  }
  .create-modes button {
    flex: 1;
    min-width: 0;
  }
  .assisted-model {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Correções aplicadas depois de OLHAR as capturas de 15/09 01h:
   - as abas de modalidade (5 no Assistido) espremiam no celular;
   - "Skills sugeridas" colava no cartão de modelo;
   - o card "Continuar" ocupando 2 colunas deixava o Argos sozinho na linha;
   - o empty state da Biblioteca esticava a tela Início inteira. */
@media (max-width: 760px) {
  .mode-tabs {
    flex-wrap: wrap;
  }
  .mode-tab {
    /* `flex:0 0 auto` é o que resolve: com shrink ligado e min-width:0 as abas
       encolhiam abaixo do próprio texto e a palavra saía do botão. Agora elas
       quebram linha em vez de espremer. */
    min-width: 0;
    flex: 0 0 auto;
    padding: 10px 12px;
  }
}
.assisted-skills {
  margin-top: var(--space-4);
}
.home-continue {
  grid-column: auto;
}
.home-recent .empty-page {
  min-height: 0;
  padding: var(--space-6) var(--space-4);
}

/* FERRAMENTAS (Master v2.3, 24/09/2026) — a grade da página que reuniu Upscale, Simulador,
   Mockup e Character. Reaproveita `.product-card` (product.css, carregado pelo index.html) e só
   acrescenta o ícone e o alinhamento; não redefine borda, raio nem espaçamento, para o cartão não
   divergir do resto do produto no primeiro ajuste de tema. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.tool-card {
  text-align: left;
  gap: var(--space-2);
  cursor: pointer;
}
.tool-card strong { font-weight: 500; }
.tool-card small { color: var(--muted); line-height: 1.6; }
.tool-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
@media (max-width: 700px) { .tools-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * V2.0 — Barra do topo e navegação (fatia A2, 15/09/2026)
 * Referência: os 10 PNGs do mockup mestre. Cores medidas, ver tokens.css.
 * ============================================================ */

/* --- Busca do topo: "Buscar no acervo e nos Apps…" --- */
.top-search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 440px;
}
.top-search .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.top-search input {
  min-height: 38px;
  padding: 0 12px 0 34px;
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm-size);
}
.top-search input::placeholder {
  color: var(--text-muted);
}
.top-search input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  background: var(--surface-3);
}

/* --- Saldo: "Saldo R$ 84,90" (regra inegociável do v1.9: sempre em R$) --- */
.top-balance {
  min-height: var(--control-height-sm);
  padding: 0 14px;
  gap: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: var(--text-label-size);
  font-weight: 400;
}
.top-balance span {
  color: var(--text-primary);
  font-size: var(--text-body-sm-size);
  font-weight: 600;
}

/* --- Chip de operações em andamento: "2 operações em andamento" (o id `topJobs` continua,
       é chave de código; a PALAVRA na tela virou a do produto em 20/09/2026) --- */
.top-jobs {
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: 0 14px;
  font-size: var(--text-label-size);
}
.top-jobs[data-active="1"] {
  color: var(--text-primary);
}
.top-jobs[data-active="1"] .icon {
  color: var(--accent-primary-text);
}

/* --- CTA "Conversar com Argos": contorno lima, não preenchido --- */
.topbar .chat-toggle {
  min-height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: var(--accent-outline-bg);
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary-text);
  font-weight: 600;
  font-size: var(--text-body-sm-size);
}
.topbar .chat-toggle:hover:not(:disabled) {
  background: var(--accent-outline-bg-hover);
  border-color: var(--accent-primary);
}
.topbar .chat-toggle .icon {
  display: none;
}

/* --- Grupos da navegação ---
 * No mockup não existem os cabeçalhos PRODUÇÃO / DESCOBRIR / CONTA: os grupos
 * são separados por espaço em branco. O rótulo continua no DOM como
 * `aria-label` do <nav> (a semântica de grupo não se perde), só some da vista.
 */
.sidebar .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav-group + .nav-group {
  margin-top: 22px;
}
.nav-group[data-nav-admin] {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
/*
 * Fora do desenho, dentro do produto.
 * O aviso de rascunho local e o rótulo de conexões não existem em nenhum dos 10
 * mockups — o topo do v2.0 tem busca, saldo, jobs e o CTA do Argos, e mais nada.
 * Os dois continuam no DOM e continuam sendo atualizados: são informação de
 * estado real (onde seus arquivos moram, quantos modelos respondem) e quem usa
 * leitor de tela continua ouvindo. Saem da vista, não do produto — a mesma
 * decisão tomada para a migalha, e pelo mesmo motivo.
 */
.sidebar .local-note,
.topbar .connection-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Réguas estreitas ---
 * Abaixo de 950px a sidebar colapsa em 76px e o rótulo some; fica só o ícone,
 * que é o mesmo ícone do desktop desde 15/09 (ver a nota em .nav-dot). Antes
 * desta data este bloco TROCAVA ponto por ícone; hoje não precisa trocar nada,
 * só acertar a posição da barra do item ativo na régua estreita.
 */
@media (max-width: 950px) {
  .nav-button[aria-current="page"]::before {
    left: -8px;
  }
  .top-search {
    display: none;
  }
  .wordmark {
    justify-content: center;
    margin: 0 0 20px;
  }
}
@media (max-width: 760px) {
  /* A gaveta do celular volta a mostrar rótulo (é larga), então o ícone dela é
     o mesmo do desktop. Antes daqui saía o ícone e voltava o ponto; deixou de
     fazer sentido quando o ponto saiu da tela em toda régua. */
  .topbar {
    background: var(--bg-shell);
    padding: 0 12px;
    gap: 8px;
  }
  .top-balance {
    padding: 0 10px;
  }
  .top-balance,
  .top-jobs {
    font-size: var(--text-label-size);
  }
  .topbar .chat-toggle {
    padding: 0 12px;
    font-size: var(--text-label-size);
  }
  .topbar .chat-toggle .icon {
    display: block;
    width: 16px;
    height: 16px;
  }
}
/* Num celular estreito o CTA do Argos fica só com o ícone e o chip de jobs sai:
   saldo é a informação que não pode sumir (o usuário paga por geração). */
@media (max-width: 480px) {
  .topbar .chat-toggle .chat-toggle-text {
    display: none;
  }
  .top-jobs {
    display: none;
  }
}

/* ============================================================================
 * Paradas de emergência — V2.1 §10 / o desenho do plano de controle de segurança §7.7
 * ----------------------------------------------------------------------------
 * Nenhuma cor nova: tudo sai de tokens.css (v2.0), cujos valores foram amostrados
 * dos mockups. O vermelho é `--danger`/`--danger-soft`, que já existiam; o accent
 * lima continua sendo o único accent do produto e NÃO é usado aqui — lima é o que
 * convida a agir, e nada nesta área convida.
 *
 * Duas decisões visuais que são de produto, não de gosto:
 *  · PARAR é o único botão vermelho cheio do Studio. Quem chega nesta tela em pânico
 *    precisa achar o freio sem ler; achar rápido é metade do desenho.
 *  · Religar é um botão comum, de contorno. Ele não deve saltar aos olhos: a fricção
 *    é intencional e continua no diálogo, que exige a chave digitada por extenso.
 * ========================================================================== */

/* -------------------------------------------------- faixa global (§7.7.2) */
.kill-banner {
  display: grid;
  gap: 1px;
  background: var(--danger-soft);
  border-bottom: 1px solid var(--danger);
}
.kill-banner[hidden] {
  display: none;
}
.kill-banner-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 32px;
}
.kill-banner-badge {
  flex: none;
  border: 1px solid var(--danger);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  color: var(--danger);
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.kill-banner-text {
  min-width: 0;
}
.kill-banner-msg {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
}
.kill-banner-since {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.kill-banner-keeps {
  margin-top: 6px;
  font-size: var(--text-body-sm-size);
}
.kill-banner-keeps summary {
  cursor: pointer;
  color: var(--text-secondary);
}
.kill-banner-keeps ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
}

/* --------------------------------- explicação ao lado do botão bloqueado (§7.7.3) */
.kill-note {
  margin: 8px 0 0;
  border-left: 2px solid var(--danger);
  padding-left: 10px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}

/* ------------------------------------------- painel de Operação (§7.7.1) */
.kill-plane {
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: 20px;
  margin: 0 0 24px;
}
.kill-plane-head h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  margin: 2px 0 0;
}
.kill-plane-lead {
  margin: 6px 0 0;
  color: var(--text-secondary);
  max-width: 70ch;
}
.kill-plane-empty {
  margin: 12px 0 0;
  color: var(--text-secondary);
}
/* A frase da polaridade vem da própria rota e fica em destaque de propósito: é a resposta
   à armadilha medida nesta casa — nos ajustes do admin o mesmo `0` BLOQUEIA numa família
   e DESLIGA o teto (libera gasto) em outra. Aqui não há número nenhum, e está escrito. */
.kill-polarity {
  margin: 14px 0 18px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  padding: 10px 12px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.kill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 12px;
}
.kill-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 16px;
  min-width: 0;
}
/* A PARADA GERAL é separada e maior: ela não é "mais uma das cinco". */
.kill-card-major {
  border-color: var(--danger);
  background: var(--surface-1);
  padding: 20px;
  margin: 0 0 12px;
}
.kill-card-major h3 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
}
.kill-card.is-engaged {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.kill-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.kill-card-head h3 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}
.kill-card-head code {
  color: var(--text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--text-label-size);
}
.kill-state {
  flex: none;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.kill-state.is-stopped {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.kill-state.is-live {
  background: var(--success-soft);
  border: 1px solid var(--success);
  color: var(--success);
}
.kill-summary {
  margin: 10px 0 0;
  color: var(--text-primary);
}
.kill-effect {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-weight: 500;
}
.kill-card.is-engaged .kill-effect {
  color: var(--danger);
}
/* As duas colunas são o contrato que o operador lê ANTES de puxar a chave. Elas não são
   detalhe opcional dentro de um <details>: escondê-las devolveria a alavanca sem etiqueta. */
.kill-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}
.kill-col {
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  padding: 10px 12px;
  min-width: 0;
}
.kill-col h4 {
  margin: 0 0 6px;
  font-size: var(--text-label-size);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.kill-col-stops h4 {
  color: var(--danger);
}
.kill-col-keeps h4 {
  color: var(--success);
}
.kill-col ul {
  margin: 0;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.kill-col li + li {
  margin-top: 4px;
}
.kill-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 0;
}
.kill-who {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-body-sm-size);
  min-width: 0;
  overflow-wrap: anywhere;
}
.kill-stop {
  background: var(--danger);
  border-color: var(--danger);
  color: #1a0708;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 8px 22px;
}
.kill-stop:hover:not(:disabled) {
  background: #ef7676;
  border-color: #ef7676;
  color: #1a0708;
}
.kill-card-major .kill-stop {
  min-height: var(--control-height-lg);
  padding: 8px 32px;
  font-size: var(--text-body-lg-size);
}
.kill-release {
  border-color: var(--border-strong);
}
.kill-history {
  margin: 18px 0 0;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.kill-history summary {
  cursor: pointer;
  color: var(--text-secondary);
}
.kill-history > p {
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.kill-history-table {
  min-width: 620px;
  margin-top: 10px;
}
.kill-plane-failed {
  border-color: var(--warning);
}

/* ----------------------------------------------- diálogos de parar / religar */
.kill-dialog {
  display: grid;
  gap: 12px;
}
.kill-dialog .kill-cols {
  margin: 0;
}
.kill-dialog-effect {
  margin: 0;
  color: var(--text-secondary);
}
.kill-confirm-key {
  font-family: var(--font-family-mono);
  color: var(--danger);
}

/* --------------------------- painel do Argos parado (§7.7.4) */
.kill-stopped-panel {
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  padding: 20px;
  max-width: 70ch;
}
.kill-stopped-panel p {
  margin: 10px 0 0;
  color: var(--text-primary);
}
.kill-stopped-note {
  color: var(--text-secondary) !important;
  font-size: var(--text-body-sm-size);
}

@media (max-width: 760px) {
  .kill-banner-item {
    padding: 10px 16px;
    flex-direction: column;
    gap: 6px;
  }
  .kill-plane {
    padding: 14px;
  }
  .kill-card,
  .kill-card-major {
    padding: 14px;
  }
  /* No celular o botão PARAR ocupa a linha inteira: é o alvo que a pessoa procura
     com o polegar, e errar o clique aqui custa tempo no pior momento possível. */
  .kill-card-foot .kill-stop,
  .kill-card-foot .kill-release {
    width: 100%;
  }
}

/* ============================================================================
 * App Security Profile — V2.1 §39/§43 / o desenho do plano de controle de segurança §8.12
 * ----------------------------------------------------------------------------
 * Vizinha das Paradas de emergência e reaproveita os mesmos blocos (`.kill-cols`,
 * `.kill-col`, `.kill-stop`, `.kill-history`): é a mesma linguagem de "o que pode
 * e o que não pode", e inventar um segundo vocabulário visual para a mesma ideia
 * só faria o operador aprender duas vezes.
 *
 * A diferença de TOM é deliberada. A borda desta seção NÃO é vermelha: hoje os 10
 * Apps estão com gasto bloqueado, e esse é o estado seguro de fábrica. Vermelho
 * aqui diria "quebrado" para o estado normal do produto — e quem vê vermelho no
 * normal para de ver vermelho no anormal. O vermelho fica só no BOTÃO que bloqueia
 * e no chip de recusa do portão.
 * ========================================================================== */

.appsec-plane {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: 20px;
  margin: 0 0 24px;
}
.appsec-head h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  margin: 2px 0 0;
}
.appsec-lead {
  margin: 6px 0 0;
  color: var(--text-secondary);
  max-width: 78ch;
}
.appsec-empty {
  margin: 12px 0 0;
  color: var(--text-secondary);
}
.appsec-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  gap: 12px;
}
.appsec-row {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 16px;
  min-width: 0;
}
.appsec-row.is-allowed {
  border-color: var(--success);
}
.appsec-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.appsec-row-head h3 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}
.appsec-row-head div {
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.appsec-row-head code {
  font-family: var(--font-family-mono);
}
/* O estado é um chip NEUTRO quando bloqueado: é o normal do produto hoje. */
.appsec-state {
  flex: none;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: var(--text-label-size);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.appsec-state.is-allowed {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.appsec-effect {
  margin: 10px 0 0;
  color: var(--text-primary);
  font-weight: 500;
}
.appsec-safe-note {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.appsec-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}
.appsec-facts div {
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  border: 1px solid var(--border-soft);
  padding: 8px 10px;
  min-width: 0;
}
.appsec-facts dt {
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.appsec-facts dd {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.appsec-facts dd small {
  display: block;
  color: var(--text-muted);
  font-weight: 400;
}
.appsec-detail {
  margin: 12px 0 0;
}
.appsec-detail summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.appsec-subhead {
  margin: 14px 0 6px;
  font-size: var(--text-label-size);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.appsec-reach {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.appsec-reach li + li {
  margin-top: 4px;
}
.appsec-reach small {
  color: var(--text-muted);
}
.appsec-row-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 0;
}
.appsec-allow {
  border-color: var(--border-strong);
}

/* ---------------------------------- recusas do portão: o sinal mais útil do piloto */
.appsec-denials {
  margin: 20px 0 0;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 16px;
}
.appsec-denials-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.appsec-denials-head h3 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}
.appsec-denials-count {
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 1px 10px;
  font-weight: 700;
  font-size: var(--text-body-sm-size);
}
.appsec-denials-lead,
.appsec-denials-empty {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  max-width: 80ch;
}
.appsec-table {
  min-width: 760px;
  margin-top: 10px;
}
.appsec-code {
  display: inline-block;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 1px 8px;
  font-family: var(--font-family-mono);
  font-size: var(--text-label-size);
}
.appsec-history {
  margin-top: 16px;
}

/* ------------------------------------------- cartão na tela do App e linha do teto */
.appsec-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: 20px;
  margin: 22px 0 0;
}
.appsec-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.appsec-card-head h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}
.appsec-card .kill-cols {
  margin-top: 12px;
}
.appsec-spend-line {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.appsec-spend-line.is-blocked {
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
}

@media (max-width: 760px) {
  .appsec-plane,
  .appsec-row,
  .appsec-card,
  .appsec-denials {
    padding: 14px;
  }
  .appsec-row-foot .kill-stop,
  .appsec-row-foot .appsec-allow {
    width: 100%;
  }
}

/* A recusa precisa LER como recusa. Sem isto, "Teto inválido…" aparece na mesma cor do texto de
   apoio e quem está com pressa acha que o formulário não respondeu — e clica de novo. */
.kill-dialog [role="alert"]:not(:empty) {
  margin: 0;
  border-left: 2px solid var(--danger);
  padding-left: 10px;
  color: var(--danger);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.appsec-summary {
  margin: 14px 0 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--success);
  padding: 10px 12px;
  color: var(--text-primary);
}

/* O anel de foco do campo tem `outline-offset: 3px` e subia por cima do rótulo logo acima.
   Nada quebrava, mas "Motivo (fica na auditoria…)" ficava cortado justamente no diálogo em que
   ler o rótulo é o que evita escrever a coisa errada num registro imutável. */
.kill-dialog label {
  display: block;
}
.kill-dialog label > input,
.kill-dialog label > textarea {
  margin-top: 6px;
}

/* ============================================================================
 * Retomada de rodada — o registro de Apps §14.5
 * ----------------------------------------------------------------------------
 * Tokens do v2.0, sem cor nova. Duas escolhas que são de produto:
 *  · a faixa "Continuar" usa o accent lima porque é um CONVITE a voltar ao trabalho —
 *    é a única coisa nesta tela que a pessoa está procurando quando reabre o Hub;
 *  · o aviso de permanência frágil (`persistence: "memoria"`) é âmbar, não vermelho:
 *    não é um defeito, é um ambiente sem banco — mas precisa ser lido antes de a
 *    pessoa confiar e fechar a aba.
 * ========================================================================== */

.runs-band {
  border: 1px solid var(--accent-primary-line);
  background: var(--accent-primary-soft);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 0 0 24px;
}
.runs-band-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.runs-band-head h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}
.runs-band-count {
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: var(--accent-primary-ink);
  padding: 1px 10px;
  font-weight: 700;
  font-size: var(--text-body-sm-size);
}
.runs-open {
  border: 1px solid var(--accent-primary-line);
  background: var(--accent-primary-soft);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin: 0 0 20px;
}
.runs-open h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
}
.runs-open-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: var(--text-body-sm-size);
}
/* A frase da permanência. Nunca escrita à mão na tela: vem de `persistenceNote`. */
.runs-persist {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.runs-persist.is-volatile {
  border-left: 2px solid var(--warning);
  padding-left: 10px;
  color: var(--warning);
}
.runs-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.runs-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-height: var(--control-height-md);
}
.runs-item:hover:not(:disabled) {
  border-color: var(--accent-primary-line);
  background: var(--surface-2);
}
.runs-item-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.runs-item-name strong {
  color: var(--text-primary);
}
.runs-item-name small {
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
/* O prazo fica sempre visível, não escondido num detalhe: saber ANTES é o ponto. */
.runs-item-expiry {
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 2px 10px;
  font-size: var(--text-label-size);
  white-space: nowrap;
}
.runs-item-expiry.is-soon {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
}

/* ------------------------------------------------ topo da rodada retomada */
.runs-resume {
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.runs-resume.is-soon {
  border-left-color: var(--warning);
}
.runs-resume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.runs-resume-why {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.runs-blocked {
  margin: 8px 0 0;
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.runs-leave {
  margin-top: 10px;
  min-height: var(--control-height-sm);
  padding: 4px 12px;
  font-size: var(--text-body-sm-size);
}
/* Erro de etapa. `is-retry` marca o caso em que a etapa NÃO gravou: a pessoa continua no ponto
   anterior e pode tentar de novo — o contrário de um stepper que andou sobre estado inexistente. */
.runs-notice {
  margin: 0 0 18px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
}
.runs-notice.is-retry {
  border-color: var(--warning);
  background: var(--warning-soft);
}

@media (max-width: 760px) {
  .runs-band,
  .runs-open,
  .runs-resume {
    padding: 14px;
  }
  .runs-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
.runs-notice:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* ============================================================
 * REVISÃO VISUAL — referências de 13/09/2026
 * ============================================================
 * Fonte: as referências visuais de identidade — três telas
 * 1672x941 (Início, Criar com assistência, Spaces) de 13/09, mais o
 * o relatório visual de UX (v1.9.1). São a identidade do PRODUTO;
 * o mockup mestre (10 telas de App) que guiou o dia inteiro é a linguagem dos
 * Apps, e onde os dois discordam manda a referência de 13/09 — foi ela que o
 * dono reclamou duas vezes de não reconhecer.
 *
 * Bloco no fim do arquivo de propósito: tudo aqui é ADITIVO ou sobrescreve por
 * ordem de cascata, sem apagar nenhuma regra anterior. Nenhuma cor nova é
 * declarada — tudo sai de tokens.css.
 * ============================================================ */

/* --- Rodapé da sidebar: a PESSOA, não o ambiente ---
 * A referência mostra foto + "<primeiro nome>" + "👑 Conta Pro" + seta. Era um <div>
 * morto com "Minha conta"; virou botão para Configurações, que é onde o perfil
 * e o plano se resolvem — e é o que a seta da referência promete. */
.workspace-id {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  min-height: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.workspace-id:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.workspace-id > .row {
  gap: 10px;
  min-width: 0;
}
.account-id {
  display: grid;
  min-width: 0;
}
.account-id > span {
  font-weight: 600;
  font-size: var(--text-body-sm-size);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-id .icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text-muted);
}
/* A coroa da referência. Emoji em ::before para não entrar na árvore de
   acessibilidade: "Conta Pro" ao lado já diz o que a coroa ilustra. */
#userRole.has-crown::before {
  content: "👑";
  font-size: var(--text-label-size);
  margin-right: 4px;
}

/* --- Avatar: iniciais OU foto ---
 * Um só desenho para os três lugares (rodapé, topo, formulário de perfil),
 * porque eles têm de concordar. `has-photo` troca fundo e borda por imagem. */
.avatar.has-photo {
  background: none;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar.avatar-top {
  height: 32px;
  width: 32px;
  border-radius: var(--radius-pill);
  font-size: var(--text-label-size);
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  border: 1px solid var(--border-soft);
  flex: none;
}
.avatar.avatar-top.has-photo {
  background: none;
}
.avatar.avatar-top.has-photo img {
  border-radius: var(--radius-pill);
}

/* --- Topo: atalho da busca, sino e conta ---
 * O relatório v1.9.1 fixa a ordem do topo, textualmente: "Busca · Saldo · Jobs
 * · Argos · Conta". Faltavam o atalho de teclado, o sino e a conta. */
.top-search {
  position: relative;
}
.top-search-key {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  /* A tecla ⌘K é TEXTO (a pessoa lê o atalho), não glifo: subiu de 10px
     para o piso de 12px da auditoria §1.1. A entrelinha 1 fica, porque é o
     que mantém a altura da capa da tecla. */
  font: var(--text-label-weight) var(--text-label-size)/1 var(--font-family-ui);
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 4px 6px;
  pointer-events: none;
}
.top-search input {
  padding-right: 48px;
}
.top-bell .icon {
  width: 18px;
  height: 18px;
}
.top-account {
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  flex: none;
}
.top-account:hover .avatar {
  border-color: var(--accent-primary-line);
}

/* --- Citação em itálico, canto superior direito ---
 * Nas três referências, sempre assinada. Fica DENTRO do cabeçalho da página,
 * alinhada à direita, e é a primeira coisa a sair no celular: é assinatura de
 * marca, não informação — ocupar dobra de 390px com ela seria trocar conteúdo
 * por enfeite. */
.page-quote {
  margin: 0;
  text-align: right;
  flex: none;
  max-width: 260px;
}
.page-quote blockquote {
  margin: 0;
  font-style: italic;
  font-size: var(--text-body-sm-size);
  line-height: 1.45;
  color: var(--text-secondary);
}
.page-quote figcaption {
  margin-top: 4px;
  font-size: var(--text-label-size);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .page-quote {
    display: none;
  }
}

/* --- Início: hero, "Comece agora", gerações e inspiração ---
 * Estrutura e ordem da referência de Início, seção por seção:
 *   saudação + citação · hero · Comece agora · Projetos recentes ·
 *   Gerações recentes | Inspiração para criar · Explore mais da Erisen
 * É a mesma ordem que o relatório v1.9.1 descreve em texto para a tela 01
 * ("APROVAR COMO BASE, ref. 9.0/10").
 */
.home-section {
  margin-top: var(--space-6);
  min-width: 0;
}
.home-section .section-heading p {
  font-size: var(--text-body-lg-size);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Hero. Na referência é uma faixa larga e baixa (banner de 1385x215, ou 6,4:1)
   — e o relatório v1.9.1 pede explicitamente "reduzir hero ~10-15%", então
   baixo é o alvo, não um acidente. */
.home-hero {
  position: relative;
  margin-top: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  min-height: 228px;
}
.home-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
/* O gradiente não é enfeite: é o que faz o texto ser legível sobre foto. Sem
   ele, "Da ideia à realidade" cai sobre a cidade iluminada da arte e o
   contraste desaba. Vai da esquerda (onde está o texto) para a direita (onde
   está o rosto, depois do espelho — ver o manifesto da arte). */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 8, 11, 0.96) 0%,
    rgba(6, 8, 11, 0.9) 34%,
    rgba(6, 8, 11, 0.45) 62%,
    rgba(6, 8, 11, 0.08) 100%
  );
}
.home-hero-copy {
  position: relative;
  z-index: 1;
  padding: 30px 36px;
  max-width: 560px;
  min-width: 0;
}
.home-hero-copy h2 {
  margin: 6px 0 8px;
  font-size: var(--text-h1-size);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.home-hero-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-body-size);
  line-height: 1.5;
  max-width: 420px;
}
.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.home-hero-draft {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: var(--text-label-size);
  color: var(--text-muted);
}
.home-hero-draft .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* "Comece agora" e "Explore mais da Erisen" usam o MESMO cartão: na referência
   são a mesma peça, com conteúdo diferente. */
.start-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.start-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px;
  min-height: 72px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.start-card:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.start-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.start-text b {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
}
.start-text small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  line-height: 1.35;
}
.start-card > .icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--text-muted);
}
.start-glyph {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: none;
}
.start-glyph .icon {
  width: 18px;
  height: 18px;
}
/* Cada quadrado com a cor da categoria medida na referência. O de "Criar" é o
   único PREENCHIDO — na referência o quadrado dele é amarelo sólido com glifo
   escuro, porque Criar é a ação, e ação é o accent. */
.start-card[data-cat="accent"] .start-glyph {
  background: var(--accent-primary);
  color: var(--accent-primary-ink);
}
.start-card[data-cat="accent"] {
  border-color: var(--accent-primary-line);
  background: var(--accent-primary-soft);
}
.start-card[data-cat="blue"] .start-glyph {
  background: var(--cat-blue-soft);
  color: var(--cat-blue);
}
.start-card[data-cat="purple"] .start-glyph {
  background: var(--cat-purple-soft);
  color: var(--cat-purple);
}
.start-card[data-cat="green"] .start-glyph {
  background: var(--cat-green-soft);
  color: var(--cat-green);
}

/* Gerações recentes | Inspiração para criar, lado a lado.
   Na referência a coluna da esquerda mede ~725px e a da direita ~660px num
   quadro de 1672 — praticamente meio a meio, e é essa a proporção abaixo. */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.gen-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gen-card {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  min-width: 0;
  min-height: 0;
}
.gen-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  position: relative;
}
.gen-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sem miniatura (vídeo, voz) fica o glifo centralizado — não uma caixa vazia,
   que é o que a tela fazia antes em tudo que não era imagem. */
.gen-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
}
.gen-glyph .icon {
  width: 22px;
  height: 22px;
}
.gen-card small {
  font-size: var(--text-label-size);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-card:hover .gen-thumb {
  border-color: var(--border-strong);
}

.inspire-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.inspire-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  min-width: 0;
  min-height: 0;
}
/* `height: auto` é obrigatório, não redundante: o <img> leva width/height no
   HTML (para o navegador reservar o espaço e não sacudir o layout ao carregar),
   e o atributo `height` vira altura de apresentação — 225px fixos. Sem este
   `auto`, o cartão saía com 308px de altura em vez de 98px, medido. */
.inspire-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.inspire-text {
  display: grid;
  gap: 3px;
  padding: 10px 12px 12px;
}
.inspire-text b {
  font-size: var(--text-label-size);
  font-weight: 600;
}
.inspire-text small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  line-height: 1.35;
}
.inspire-card:hover {
  border-color: var(--accent-primary-line);
}

/* Convite. Substitui a caixa tracejada de antes: mesma honestidade (não há
   dado, e a tela diz isso), mas com a forma de cartão do resto da página em
   vez de um retângulo pontilhado no meio do nada. */
.home-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.home-invite p {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.home-invite b {
  font-size: var(--text-body-size);
  font-weight: 600;
}
.home-invite small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 62ch;
}

@media (max-width: 1180px) {
  .start-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .home-hero {
    min-height: 0;
  }
  .home-hero-copy {
    padding: 22px 20px;
    max-width: none;
  }
  .home-hero-copy h2 {
    font-size: var(--text-h1-size);
  }
  /* No celular a arte deixa de ser faixa lateral e vira fundo vertical: um
     gradiente da esquerda não cobre 390px de largura, então ele gira para
     cima-baixo, senão o texto fica sobre a cidade. */
  .home-hero::after {
    background: linear-gradient(180deg, rgba(6, 8, 11, 0.82) 0%, rgba(6, 8, 11, 0.94) 52%, rgba(6, 8, 11, 0.98) 100%);
  }
  .home-hero-art {
    object-position: 72% 30%;
  }
  .start-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .gen-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inspire-col {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-hero-cta .btn-primary,
  .home-hero-cta .btn-quiet {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --- Criar: miniatura no chip de estilo ---
 * A referência desenha os estilos como chips COM imagem. `catalog.js` já tinha
 * o campo `image` em 8 dos 10 estilos e ninguém renderizava — as cinco fotos
 * de `media/*.jpg` estavam no repositório desde 09/09 sem aparecer em tela. */
.preset-card.has-thumb {
  display: grid;
  grid-template-rows: auto auto;
  padding: 0;
  overflow: hidden;
  text-align: left;
  align-items: stretch;
  position: relative;
}
.preset-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.preset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preset-card.has-thumb .preset-info {
  padding: 8px 10px 10px;
  display: grid;
  gap: 2px;
}
/* Direção (galeria): a sobra de altura do cartão vai para o TEXTO, não para a
   foto. Medido em 20/09: 210, 210, 220, 210, 210, 210 — o cartão com descrição
   de uma linha esticava a miniatura e desalinhava a fileira. */
.styles-grid .preset-card.has-thumb {
  grid-template-rows: auto minmax(0, 1fr);
}
.preset-card.has-thumb .preset-check {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}

/* Galeria completa: no celular a miniatura acompanha o resumo em uma linha ampla. */
@media (max-width: 760px) {
  .styles-grid { grid-template-columns: minmax(0, 1fr); }
  .styles-grid .preset-card.has-thumb {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .styles-grid .preset-thumb {
    aspect-ratio: auto;
    height: 100%;
    min-height: 108px;
  }
  .styles-grid .preset-info { padding: 12px; gap: 4px; }
  .styles-grid .preset-info small { font-size: var(--text-body-sm-size); }
  .page-heading > #stylesBack {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: var(--control-height-md);
  }
}

/* --- Configurações > Perfil --- */
.profile-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
}
.profile-preview .avatar {
  height: 56px;
  width: 56px;
  font-size: var(--text-body-lg-size);
  /* O diálogo "Meu perfil" (Comunidade) usa `.avatar` sem `.avatar-top`: sem
     estas linhas a inicial virava um "?" solto de 7px, sem círculo — medido em
     20/09. Mesmo desenho do topo e do rodapé, só maior. */
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-secondary);
  font-weight: 600;
  border: 1px solid var(--border-soft);
  flex: none;
}
.profile-fields {
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
/* H4 (t3560): selo "Criador Parceiro" no topo do perfil, ao lado da foto. Só existe no DOM quando a API manda. */
.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.profile-name-row h2 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.selo-criador-parceiro {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-primary-line);
  color: var(--text-primary);
  background: var(--surface-2);
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.profile-label {
  font-size: var(--text-label-size);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.profile-save-row small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Criar · Assistido: benefícios, resultado estimado e prévia ---
 * Ordem da coluna da direita na referência de Criar: três cartões de
 * benefício, "Prévia do resultado" com player, e a tira de gerações recentes.
 * Os três cartões de utilidade que já existiam (Avançado · Direção · Argos)
 * continuam, abaixo — a referência não os desenha, mas são as portas reais
 * para a Bancada e para a Direção, e tirá-los seria perder função por
 * aparência.
 */
.benefit-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.benefit-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 14px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.benefit-card b {
  font-size: var(--text-label-size);
  font-weight: 600;
}
.benefit-card small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  line-height: 1.4;
}
.benefit-card .start-glyph {
  width: 30px;
  height: 30px;
}
.benefit-card .start-glyph .icon {
  width: 16px;
  height: 16px;
}
.benefit-card[data-cat="accent"] .start-glyph {
  background: var(--accent-primary);
  color: var(--accent-primary-ink);
}
.benefit-card[data-cat="purple"] .start-glyph {
  background: var(--cat-purple-soft);
  color: var(--cat-purple);
}
.benefit-card[data-cat="green"] .start-glyph {
  background: var(--cat-green-soft);
  color: var(--cat-green);
}

/* "Resultado estimado" — formato · duração · resolução · custo, em quatro
   células com divisória, como na referência. */
.estimate-row {
  margin-top: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.estimate-row .eyebrow {
  margin: 0 0 10px;
}
.estimate-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.estimate-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  min-width: 0;
  border-left: 1px solid var(--border-soft);
}
.estimate-cell:first-child {
  padding-left: 0;
  border-left: 0;
}
.estimate-cell .icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--text-secondary);
}
.estimate-cell > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.estimate-cell small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.estimate-cell b {
  font-size: var(--text-label-size);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Custo COTADO fica no accent — é o mesmo destaque que a referência dá ao
   valor. Antes da cotação a célula diz "Consultado ao gerar" em texto normal:
   destacar uma frase não seria destacar um preço. */
.estimate-cell b.is-quoted {
  color: var(--accent-primary-text);
}
/* Custo ESTIMADO nunca usa a tinta do cotado. A diferença é de propósito e é
   dupla — rótulo diferente ("Custo estimado" x "Custo cotado") e tinta
   diferente (secundária x accent): quem bate o olho não pode confundir o piso
   do catálogo com o valor que vai ser debitado. */
.estimate-cell b.is-estimate {
  color: var(--text-secondary);
  font-weight: 500;
  /* "a partir de R$ 0,44" não cabe em uma linha na célula de 1/4 de largura, e
     `.estimate-cell b` corta com `nowrap` + `ellipsis`. Um preço cortado por
     reticências é pior do que um preço em duas linhas, então aqui ele quebra. */
  white-space: normal;
  line-height: 1.25;
}
/* A frase que separa estimativa de cobrança. `--text-muted` foi corrigido por
   contraste em 15/09 justamente para textos deste tamanho — não trocar. */
  /* FRASE, não rótulo: 12→-13px em 16/09/2026.
     A varredura por texto de LEITURA (bloco com mais de 40 caracteres) achou
     11 componentes abaixo dos 14px que a auditoria §1.1 pede para corpo, e
     estes são os que explicam DINHEIRO ou dizem o que fazer. Eles não são
     metadata — são sentenças, e estavam no degrau de rótulo.
     Por que 13 e não 14: em 14px ficariam do tamanho do corpo e do botão,
     brigando com a ação principal (§1.2, "textos explicativos concorrendo com
     CTA"). 13px tira do território de etiqueta sem empatar com o CTA — e com
     --text-muted em 4,82:1 no pior caso, um pixel a mais aqui é a diferença
     entre ler e adivinhar o aviso de custo. */
.estimate-foot {
  margin: 10px 0 0;
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .estimate-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
  .estimate-cell:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ┌─ A etiqueta de estimativa DENTRO do botão de gerar ────────────────────┐
   │ O dono pediu "o valor em reais nos botões de geração". O valor que o   │
   │ Hub pode mostrar ANTES de cotar é o piso do catálogo, e ele entra como │
   │ ETIQUETA — não como parte do rótulo. Por que a diferença é visual e    │
   │ não só textual: o valor COTADO é escrito no próprio rótulo do botão    │
   │ ("Confirmar e gerar · R$ 7,15"), em 14px e no peso do botão; a         │
   │ estimativa vive numa pílula translúcida, menor, com a palavra          │
   │ "Estimativa" impressa ao lado do número. Dois números no mesmo botão   │
   │ com a mesma roupa seriam a mesma promessa — e só um deles é promessa.  │
   │ No estreito a pílula desce para a própria linha em vez de comprimir o  │
   │ rótulo ou estourar a largura.                                          │
   └────────────────────────────────────────────────────────────────────────┘ */
.generate-button {
  flex-wrap: wrap;
  row-gap: 6px;
}
.generate-estimate {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  /* Duas declarações de propósito: a segunda vence onde `color-mix` existe e
     acompanha a TINTA do botão (o tema alternativo tem ink escuro sobre
     amarelo, onde branco translúcido sumiria); a primeira é a garantia. */
  background: rgba(255, 255, 255, 0.18);
  background: color-mix(in srgb, currentColor 16%, transparent);
  min-width: 0;
}
.generate-estimate small {
  /* `color: inherit` NÃO é redundante: o reset global tem `small { color:
     var(--muted) }`, e sem esta linha a palavra "ESTIMATIVA" saía cinza sobre o
     accent azul — reprovando contraste no lugar onde ela é a única coisa que
     impede a leitura "é isso que vou pagar". Achado olhando a captura, não o
     verde: o sweep de contraste roda com fixture sem preço, onde a etiqueta
     nem existe. */
  color: inherit;
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  /* Sem `opacity` de propósito: a tinta do botão é a única que passa em AA
     sobre o accent (ver o teste de contraste do accent), e rebaixá-la por estética
     repetiria o defeito que --text-muted já custou uma correção. A etiqueta se
     distingue por TAMANHO e caixa, não por apagamento. */
}
.generate-estimate b {
  font-size: var(--text-label-size);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 620px) {
  /* No estreito a pílula desce para a própria linha — e a SETA sobe para a
     primeira, junto do rótulo. Sem a reordenação a seta caía sozinha numa
     terceira linha, encostada à esquerda: um botão de três andares com uma
     flecha órfã no fim. */
  .generate-estimate {
    order: 2;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: center;
  }
  .generate-button > .icon {
    order: 1;
  }
}

/* Prévia do resultado: player do arquivo salvo, ou pôster enquanto está vazia. */
.preview-panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}
.preview-head {
  padding: 13px 14px 11px;
}
.preview-head .eyebrow {
  margin: 0 0 3px;
}
.preview-head small {
  display: block;
  font-size: var(--text-label-size);
  color: var(--text-muted);
  line-height: 1.4;
}
.preview-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-top: 1px solid var(--border-soft);
}
.preview-stage img,
.preview-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* O pôster do quadro vazio entra esmaecido de propósito: é ilustração do que
   VAI aparecer, não um resultado. Em opacidade cheia ele passaria por geração
   pronta — exatamente a mentira que esta fatia não pode contar. */
.preview-poster {
  opacity: 0.42;
  filter: saturate(0.85);
}
.preview-empty {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 10px 14px 12px;
  text-align: center;
  font-size: var(--text-label-size);
  color: var(--text-secondary);
  background: linear-gradient(180deg, rgba(6, 8, 11, 0) 0%, rgba(6, 8, 11, 0.82) 100%);
}
.preview-stage video[hidden] {
  display: none;
}
.preview-stage.is-result img,
.preview-stage.is-result video {
  object-fit: contain;
}
.preview-stage.is-result [hidden] {
  display: none;
}
.preview-stage .stage-audio {
  height: 100%;
  justify-content: center;
  padding: 16px;
  gap: 8px;
}
.preview-stage .stage-audio > .icon {
  width: 32px;
  height: 32px;
}
.preview-stage .stage-audio p,
.preview-head small {
  overflow-wrap: anywhere;
}
.preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}
.preview-panel .preview-error {
  margin: 0;
  padding: 0 14px 14px;
}

.assisted-recent .section-heading p {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.assisted-recent .gen-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .estimate-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }
  .estimate-cell:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 760px) {
  .benefit-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .assisted-recent .gen-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A coluna da direita de Criar era 300px fixos — largura de barra lateral de
   utilidades, que é o que ela era. A referência dá a ela quase metade da tela
   (à esquerda ~620px, à direita ~780px num quadro de 1672), porque ali moram a
   prévia e a tira de gerações, que precisam de área. Medido em 1440: com
   300px, "Com a IA Argos" quebrava em duas linhas e a prévia ficava com 168px
   de altura. A proporção abaixo é a da referência.

   A `@media (min-width: 1101px)` NÃO é decoração: este bloco está no FIM do
   arquivo e, sem ela, vencia por cascata a regra de colapso que já existia em
   `@media (max-width: 1100px)` — o resultado medido foi Criar em DUAS colunas
   num celular de 390px, com a coluna do prompt em 150px de largura. Regra nova
   depois de media query antiga precisa dizer em que régua vale. */
@media (min-width: 1101px) {
  .assisted-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }
}
/* Título da prévia. Não usa `.eyebrow` porque `.eyebrow` é CAIXA ALTA e a
   referência escreve "Prévia do resultado" como título normal. */
.preview-title {
  margin: 0 0 3px;
  font-size: var(--text-body-size);
  font-weight: 600;
  color: var(--text-primary);
}

/* Aviso de programa de afiliados EM PREPARAÇÃO. Fica no topo do painel e usa o
   tom de atenção, não o de erro: o programa funciona e registra — só não emite
   nem paga comissão nesta fase. Ver o cabeçalho de studio/affiliate.js. */
.affiliate-preparation {
  border-color: var(--warning);
  background: var(--warning-soft);
  margin-bottom: var(--space-4);
}
.affiliate-preparation h2 {
  color: var(--text-primary);
}
/* "Consultado ao gerar" não cabe em uma linha na célula de custo quando a
   coluna da esquerda estreitou (medido em 1440: ~105px úteis para ~120px de
   texto, e o valor saía com "..."). Preço cortado é o oposto do que esta
   linha existe para fazer, então o valor quebra em duas linhas em vez de
   truncar — o rótulo acima, que é curto, continua numa linha só. */
.estimate-cell b {
  white-space: normal;
  line-height: 1.25;
  text-overflow: clip;
}

/* Em telas estreitas as quatro células de "Resultado estimado" viram uma
   coluna. Medido em 390px com duas colunas: "Formato / Imagem" encostava na
   divisória de "Duração" e o valor do custo cobria o rótulo. Rótulo e valor de
   dinheiro colados é o tipo de aperto que faz alguém ler o número errado. */
@media (max-width: 560px) {
  .estimate-cells {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .estimate-cell {
    padding: 0;
    border-left: 0;
  }
}

/* Fileira de "Apps e ferramentas" da Home (UI/UX Master §10.1).
   Reaproveita `.start-card` inteiro — na image1 do Master o cartão de App é a
   MESMA peça do atalho, com conteúdo diferente, e foi isso que a fileira
   "Comece agora" já implementava. O que muda são duas coisas:
   · o tagline do catálogo é uma frase, não um rótulo de três palavras, então
     ele é limitado a 2 linhas para os dez cartões terminarem na mesma altura
     (sem o clamp, um tagline longo empurra a linha inteira e a grade
     desalinha);
   · `align-items: stretch` na grade, para que a linha de 2 e a linha de 4
     tenham cartões da mesma altura. */
.start-row-apps {
  align-items: stretch;
}
.start-row-apps .start-card {
  align-items: flex-start;
}
.start-row-apps .start-text small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.start-row-apps .start-card > .icon {
  margin-top: 3px;
}

/* ┌─ DIAGNÓSTICO DE ADMIN — 16/09/2026 ────────────────────────────────────────┐
   │ Ordem do dono: texto de admin não aparece na frase do cliente. A solução   │
   │ não é esconder o motivo do admin (isso é o defeito inverso, igualmente     │
   │ real), é MOVER e ROTULAR: a frase de cliente fica no lugar de sempre, e o  │
   │ diagnóstico entra aqui — fechado, discreto, e com a audiência escrita no   │
   │ rótulo visível. Ver o módulo de audiência.                                 │
   │                                                                            │
   │ Sem cor de alerta de propósito: não é um erro do cliente nem um estado do  │
   │ produto — é uma nota interna. Cor quente aqui faria o admin ler como falha  │
   │ da tela. A borda usa --accent-primary (PREENCHE/borda) e o rótulo usa      │
   │ --accent-primary-text (TINTA), que é a regra dos tokens: azul sólido       │
   │ reprova em contraste quando é texto.                                       │
   └────────────────────────────────────────────────────────────────────────────┘ */
.admin-diagnostic {
  margin: 8px 0 0;
  border-left: 2px solid var(--accent-primary-line);
  background: var(--accent-primary-soft);
  border-radius: 0 8px 8px 0;
  font-size: var(--text-label-size);
  line-height: 1.5;
}
.admin-diagnostic > summary {
  padding: 6px 10px;
  cursor: pointer;
  color: var(--accent-primary-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--text-label-size);
  list-style: none;
}
.admin-diagnostic > summary::-webkit-details-marker { display: none; }
.admin-diagnostic > summary::before { content: "▸ "; }
.admin-diagnostic[open] > summary::before { content: "▾ "; }
.admin-diagnostic-body {
  padding: 0 10px 8px;
  color: var(--text-secondary);
}
.admin-diagnostic-body code {
  font-size: var(--text-label-size);
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
}
.admin-diagnostic-body button {
  margin-top: 6px;
}

/* ┌─ ARGOS: CONVERSA, NÃO PAINEL DE BOTÕES — 16/09/2026 ───────────────────────┐
   │ Ordem dele: *"é um chat de conversação e que refina e gera coisa conforme  │
   │ cliente solicita"*. A regra visual que segue disso: o LOG é o corpo (ele   │
   │ cresce), o campo de escrita é fixo embaixo, e todo controle fino vive num  │
   │ `<details>` fechado. Referência: a imagem 2 do mockup mestre de UI/UX.     │
   └────────────────────────────────────────────────────────────────────────────┘ */
.argos-modes { display:flex; gap:6px; margin-top:10px; }
.argos-mode { flex:1; display:grid; gap:2px; justify-items:center; padding:7px 6px; min-height:auto; background:transparent; border:1px solid var(--border); border-radius:8px; }
.argos-mode[aria-selected="true"] { background:var(--accent-primary); border-color:var(--accent-primary); color:var(--accent-primary-ink); }
.argos-mode strong { font-size:var(--text-label-size); font-weight:500; }
.argos-mode small { font-size:var(--text-label-size); opacity:.8; }
.argos-mode-hint { margin:6px 0 0; font-size:var(--text-label-size); line-height:1.5; color:var(--text-muted); }
/* Os quatro atalhos: SECUNDÁRIOS, abaixo do log e acima do campo. Eles
   escrevem no campo em vez de enviar — por isso não têm peso de CTA. */
.argos-shortcuts { display:grid; gap:6px; padding:8px 16px 0; }
.argos-shortcuts > small { font-size:var(--text-label-size); color:var(--text-muted); }
.argos-shortcuts > div { display:flex; flex-wrap:wrap; gap:6px; }
.argos-shortcuts button { font-size:var(--text-label-size); min-height:32px; padding:6px 10px; background:transparent; border-color:var(--border); }
/* Os controles que saíram de cima do campo de escrita. */
.argos-advanced { margin-top:10px; border-top:1px solid var(--border); }
.argos-advanced > summary { cursor:pointer; padding:8px 0 6px; font-size:var(--text-label-size); color:var(--text-muted); list-style:none; }
.argos-advanced > summary::-webkit-details-marker { display:none; }
.argos-advanced > summary::before { content:"▸ "; }
.argos-advanced[open] > summary::before { content:"▾ "; }
.argos-advanced-body { display:grid; gap:10px; padding-bottom:6px; }
.argos-advanced-body .argos-controls { margin-bottom:0; }
/* A abertura da conversa (§17): é a TELA convidando, não o Argos falando —
   por isso não é uma bolha de mensagem. */
.argos-welcome-questions { margin:10px 0 0; padding-left:18px; display:grid; gap:5px; font-size:var(--text-label-size); line-height:1.5; text-align:left; }
.argos-welcome .field-note { margin-top:10px; }
/* ┌─ O BLOCO DA PROPOSTA (§18.2/§18.3) ────────────────────────────────────────┐
   │ Três momentos visíveis: o texto editável (raciocínio), Aprovar (aprovação)  │
   │ e a ida à Bancada (execução, que acontece lá). §18.4: nada de mídia aqui.  │
   └────────────────────────────────────────────────────────────────────────────┘ */
.argos-proposal { margin-top:10px; padding:10px; border:1px solid var(--accent-primary-line); border-radius:8px; background:var(--accent-primary-soft); display:grid; gap:7px; }
.argos-proposal.is-approved { border-color:var(--border); background:transparent; }
.argos-proposal-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.argos-proposal-head strong { font-size:var(--text-label-size); }
.argos-proposal-head small { font-size:var(--text-label-size); color:var(--text-muted); }
.argos-proposal-label { font-size:var(--text-label-size); color:var(--text-muted); }
.argos-proposal-text { width:100%; min-height:96px; font-size:var(--text-label-size); line-height:1.55; resize:vertical; }
.argos-proposal-technical > summary { cursor:pointer; font-size:var(--text-label-size); color:var(--text-muted); padding:4px 0; }
.argos-proposal-technical pre { margin:4px 0 0; font-size:var(--text-label-size); white-space:pre-wrap; overflow-wrap:anywhere; }
.argos-proposal-actions { display:flex; flex-wrap:wrap; gap:6px; }
.argos-proposal-actions button { font-size:var(--text-label-size); min-height:34px; padding:6px 10px; }
/* ┌─ "Refinar com Argos" ao lado de "Gerar" (§18.1) ───────────────────────────┐
   │ Dois botões, pesos diferentes: Refinar é secundário (não gasta geração),   │
   │ Gerar é o CTA e carrega o valor. No celular empilham, Gerar primeiro.      │
   └────────────────────────────────────────────────────────────────────────────┘ */
.generate-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:8px; align-items:stretch; }
.generate-pair .generate-refine { display:grid; gap:2px; justify-items:start; text-align:left; padding:10px 12px; background:transparent; border-color:var(--border); }
.generate-pair .generate-refine span { display:flex; align-items:center; gap:7px; font-size:var(--text-label-size); }
.generate-pair .generate-refine small { font-size:var(--text-label-size); color:var(--text-muted); }
.generate-pair .generate-button { margin:0; }
@media (max-width:760px) {
  .argos-modes { flex-wrap:wrap; }
  .argos-mode { flex:1 1 30%; min-height:46px; }
  /* Medido em 390 (20/09): cabeçalho (chips + quota + modos + dica) 250px,
     atalhos em DUAS fileiras 100px, campo 250px — sobravam ~120px para a
     conversa, que é o corpo. Os quatro atalhos viram UMA fileira rolável. */
  .argos-shortcuts button { min-height:40px; flex:none; }
  .argos-shortcuts > div { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
  .generate-pair { grid-template-columns:1fr; }
  .generate-pair .generate-button { order:-1; }
  .generate-pair .generate-refine { justify-items:center; text-align:center; min-height:44px; }
}

/* ┌─ O CABEÇALHO DO PAINEL PAROU DE COMER A CONVERSA — 16/09/2026 ─────────────┐
   │ Medido na captura de 390: as abas de agente em grade de 2 colunas ocupavam │
   │ DUAS fileiras de 44px, e com a linha de quota + os três modos + a dica     │
   │ sobravam ~500px de 844 para a conversa. A abertura do §17 ficava rolada    │
   │ para fora da tela na primeira vez que a pessoa abria o painel.             │
   │                                                                            │
   │ A hierarquia certa: o AGENTE é um interruptor secundário (qual motor       │
   │ responde); o MODO é decisão de trabalho e fica em destaque; a CONVERSA é o │
   │ corpo. Então as abas de agente encolhem para uma fileira de chips.         │
   └────────────────────────────────────────────────────────────────────────────┘ */
.chat-panel .chat-tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: nowrap;
}
.chat-panel .chat-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  padding: 6px 6px;
  font-size: var(--text-label-size);
  line-height: 1.25;
  justify-content: center;
  text-align: center;
  /* Medido em 390 e 1440 (20/09): "Aprofundado · pago" e "…ximo raciocínio · pa".
     Com `nowrap` + centralização o texto vazava pelos DOIS lados e as reticências
     nunca apareciam; o chip cortava o próprio rótulo. Agora o rótulo quebra em
     duas linhas quando não cabe, e nada é cortado. */
  white-space: normal;
  overflow-wrap: anywhere;
  background: transparent;
  border-color: var(--border);
}
.chat-panel .chat-status {
  margin-top: 8px;
  font-size: var(--text-label-size);
  line-height: 1.45;
}
/* A dica do modo é ajuda, não conteúdo: duas linhas no máximo. O texto inteiro
   continua no `title` de cada aba, para quem quiser ler tudo. */
.argos-mode-hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 760px) {
  .chat-panel .chat-tab { min-height: 36px; }
}
/* A aba de agente ESCOLHIDA tem de se distinguir: `.chat-panel .chat-tab` é
   mais específico que `.chat-tab[aria-selected]`, então sem esta regra os três
   agentes ficavam idênticos e não havia como ver qual estava ativo — medido na
   captura de 390. */
.chat-panel .chat-tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--muted);
  color: var(--fg);
  font-weight: 500;
}

/* ══ ALVO DE TOQUE NO CELULAR ═══════════════════════════════════════════════════════════════════
 * Auditoria §1.1: "botão mobile: altura mínima de 44px" · "área clicável de ícone: mínimo 40×40
 * desktop, 44×44 mobile".
 *
 * POR QUE ESTE BLOCO ESTÁ NO FIM DO ARQUIVO, e não junto do `@media` de 760px onde ele nasceu:
 * a primeira tentativa ficou lá e NÃO pegou em três dos quatro alvos. O motivo não era falta de
 * regra — era CASCATA, e a medição mostrou isso sozinha (o `.top-account` ficou 44 de largura e 32
 * de altura: o `min-width`, que ninguém mais declarava, passou; o `min-height` perdeu):
 *
 *   · `.top-account`          tem `min-height: 0`  mais adiante no arquivo  → vencia por ORDEM
 *   · `.topbar .chat-toggle`  tem `min-height: 38px`, seletor (0,2,0)       → vencia por ESPECIFICIDADE e ordem
 *   · `.create-modes button`  tem `min-height: 36px`, seletor (0,1,1)       → idem
 *
 * ⚠️ E esses três valores estão CERTOS no desktop — 32px de avatar, 38px de CTA e 36px de alternador
 * são a proporção desenhada. O que a auditoria pede é 44px NO CELULAR. Então a correção não é mexer
 * neles; é uma regra de celular que venha depois, com a mesma especificidade. Nada de `!important`:
 * `!important` esconde a discussão de cascata em vez de resolvê-la, e a próxima pessoa não vê por quê.
 *
 * MEDIDO, não estimado: o medidor de alvos de toque lê `getBoundingClientRect` nas 12 telas a
 * 390px — o retângulo que o dedo acerta, não o CSS declarado. Alvo pequeno DENTRO de um pai clicável
 * maior não conta, porque quem recebe o toque é o pai.
 *
 * `min-width` junto com `min-height` nos quadrados: sem ele o alvo fica alto e fino. Foi o caso do
 * `#viewPrompt`, que tinha 20px de largura por 28 de altura.
 */
@media (max-width: 760px) {
  .top-account,
  #viewPrompt {
    min-height: var(--control-height-md);
    min-width: var(--control-height-md);
  }
  /*
   * ⚠️ O `.chat-toggle` entra nos QUADRADOS, não nos "só altura", e a medição é que decidiu:
   * a 390px o `<span>` do rótulo está `display: none`, então o botão é alvo SÓ DE ÍCONE — e a regra
   * do §1.1 para ícone é 44×44 no celular, não apenas 44 de altura. Com só `min-height` ele ficava
   * 42×44: passava na leitura da regra de "botão" e falhava na de "ícone", por 2 pixels.
   */
  .topbar .chat-toggle {
    min-height: var(--control-height-md);
    min-width: var(--control-height-md);
  }
  .create-modes button,
  #openLibrary,
  #exportWorkspace,
  #promptAgent,
  #allStyles {
    min-height: var(--control-height-md);
  }
  /* `summary` abre o acordeão: é alvo de toque como qualquer botão. */
  .studio-shell summary,
  .studio-shell details > summary {
    min-height: var(--control-height-md);
    display: flex;
    align-items: center;
  }
  /* Link que age como botão (ex.: "Abrir agentes externos", medido com 21px de altura). */
  .studio-shell a.btn-quiet {
    min-height: var(--control-height-md);
    display: inline-flex;
    align-items: center;
  }
}

/* --- Comentário da comunidade — 18/09/2026 ---
 * Reaproveita o espaçamento e a régua de cor do resto dos cartões; o que é próprio daqui é só a
 * separação entre um comentário e o seguinte. Texto de OUTRA pessoa: a tela escapa tudo antes. */
.comment {
  padding: 10px 0;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
.comment:last-child {
  border-bottom: none;
}
.comment p {
  margin: 2px 0;
  overflow-wrap: anywhere;
}
#commentList {
  max-height: 46vh;
  overflow-y: auto;
}

/* --- Pessoas da comunidade — 18/09/2026 ---
 * Cada linha é um botão: abrir o perfil de alguém é uma AÇÃO, e ação é botão, não div com onclick
 * (teclado e leitor de tela precisam alcançar). */
.member-list {
  display: grid;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 10px;
}
.community-member {
  display: grid;
  gap: 2px;
  justify-items: start;
  text-align: left;
  width: 100%;
  padding: 8px 10px;
}
.community-member b {
  overflow-wrap: anywhere;
}

/* ==========================================================================
 * FRONT-VISUAL 22/09/2026 — Qualidade, Fixar modelo e o celular do Criar/Início.
 * Fica no FIM do arquivo de propósito: as regras de 760px espalhadas acima
 * perderiam a cascata para blocos posteriores.
 * ========================================================================== */
.assisted-quality {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.assisted-quality .eyebrow {
  margin: 0;
}
.assisted-quality small {
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
}
.quality-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.quality-chip {
  min-height: var(--control-height-md);
  padding: 0 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.quality-chip[aria-checked="true"] {
  border-color: var(--accent-ai);
  color: var(--text-primary);
  background: var(--surface-3);
}
.assisted-model-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.model-lock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: var(--control-height-md);
  margin-top: 6px;
  cursor: pointer;
  font-size: var(--text-body-sm-size);
}
.model-lock input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}
.model-lock small {
  grid-column: 2;
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
@media (max-width: 760px) {
  /* Cards informativos saem do celular (auditoria UX §1.4/§5.2): são as três
     promessas do produto, não estado — ocupavam uma tela inteira antes da prévia. */
  .assisted-side .benefit-row {
    display: none;
  }
  /* CTA principal fixo no rodapé enquanto o formulário está na tela (§1.4/§5.4):
     antes o sticky existia só no desktop — invertido. */
  /* `#studioForm` na frente: `bench.css` fixa `#studioForm .generate-area{position:static}`
     e um seletor com id venceria esta regra em qualquer ordem de arquivo. */
  #studioForm.composer .generate-area {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 10px 0 12px;
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
  }
  #studioForm.composer .generate-area .generate-note {
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .studio-shell.chat-open #studioForm.composer .generate-area {
    position: static;
  }
  /* Estilos do Guiado: uma fileira que rola, não cinco cartões empilhados. */
  .assisted-skills .preset-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 46%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .assisted-skills .preset-strip > * {
    scroll-snap-align: start;
  }
  /* Prévia vazia é ilustração: no celular ela não precisa de meia tela. */
  .assisted-side .preview-stage:not(.is-result) {
    aspect-ratio: 21 / 9;
  }
  /* Início: 4 Apps + "Ver todos" (auditoria UX §4.2). A lista inteira continua
     em /apps; aqui ela empurrava Gerações e Inspiração para depois de 16 cartões. */
  .start-row-apps .start-card:nth-child(n + 5) {
    display: none;
  }
  /* Inspiração: fileira que rola em vez de três fotos de tela cheia. */
  .inspire-col {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .inspire-card {
    scroll-snap-align: start;
  }
  .quality-chip {
    flex: 1 1 0;
    padding: 0 8px;
  }
}
/* "Resultado estimado": o custo é a célula que carrega a frase mais longa
   ("a partir de R$ 0,37") e quebrava em quatro linhas numa coluna igual às
   outras três. Ele ganha a coluna mais larga. */
@media (min-width: 761px) {
  .estimate-cells {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  }
}
.assisted-model > div:first-child {
  flex: 1 1 260px;
}
/* "Abrir agentes externos" é um <a> (vai para uma página do servidor) e não
   herdava o recuo dos <button> irmãos: o texto ficava 13px fora do alinhamento
   dos outros sete cartões de Configurações. */
.settings-card a.btn-quiet {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: var(--control-height-md);
  padding: 8px 12px;
  border: 1px solid transparent;
  text-decoration: none;
}

/* ══ FRONT-ESTRUTURA — 22/09/2026 ════════════════════════════════════════════════════════════════
 * Barra inferior do celular + topo de 56 px (v1.9 §71/§7.2), seletor de projeto no topo (§64),
 * Central de gerações (auditoria §23), Configurações em acordeão (§1.4/§20.2) e filtros da galeria
 * de Apps (§16.3). Só tokens de tokens.css; nenhuma cor nova. No FIM do arquivo de propósito: as
 * regras de celular daqui precisam vencer as de 760 px por ordem, sem `!important`.
 * O corte é 768 px (o pedido da fatia); entre 761 e 768 px o shell também vira celular, senão a
 * barra lateral de ícones e a barra inferior apareceriam juntas.
 */
:root {
  --bottom-nav-height: 64px;
}
.bottom-nav {
  display: none;
}
.project-switcher-drawer {
  display: none;
}
/* --- Seletor de projeto (topo no computador, gaveta "Mais" no celular) --- */
.project-switcher {
  position: relative;
  flex: none;
  min-width: 0;
}
.project-switcher-toggle {
  min-height: 38px;
  max-width: 240px;
  padding: 0 10px;
  gap: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--surface-1);
  color: var(--text-primary);
}
.project-switcher-toggle .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-muted);
}
.project-switcher-label {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}
.project-switcher-label small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
}
.project-switcher-label b {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-switcher-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: min(300px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-1);
}
.project-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.project-switcher-option {
  width: 100%;
  min-height: var(--control-height-md);
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  text-align: left;
}
.project-switcher-option:hover,
.project-switcher-option[aria-pressed="true"] {
  background: var(--surface-3);
}
.project-switcher-option > span:last-child {
  display: grid;
  min-width: 0;
}
.project-switcher-option b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-switcher-option small,
.project-switcher-note {
  font-size: var(--text-label-size);
  color: var(--text-muted);
}
.project-switcher-note {
  margin: 4px 10px;
}
.project-switcher-spacer {
  width: 20px;
  flex: none;
}
.project-switcher-all {
  justify-self: start;
}
/* --- Central de gerações --- */
.create-generation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}
.stage.has-generation-grid, .preview-stage.has-generation-grid {
  display: block;
  min-height: 0;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  padding: var(--space-3);
  overflow: visible;
  background: var(--bg-base);
}
.create-generation-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.create-generation-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
}
.create-generation-thumb:disabled { opacity: 1; cursor: default; }
.create-generation-thumb > img, .create-generation-thumb > video {
  width: 100%; height: 100%; object-fit: cover;
}
.create-generation-thumb .stage-audio, .create-generation-thumb .stage-text { max-width: 100%; overflow: hidden; }
.create-generation-open {
  position: absolute; bottom: var(--space-2); left: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--bg-base); color: var(--text-primary); font-size: var(--text-body-sm-size);
}
.create-generation-info { padding: var(--space-3); }
.create-generation-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.create-generation-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1); margin: var(--space-2) 0; color: var(--text-primary); }
.create-generation-meta time { font-variant-numeric: tabular-nums; }
.create-generation-detail { color: var(--text-secondary); font-size: var(--text-body-sm-size); line-height: 1.5; overflow-wrap: anywhere; }
.create-result-large img, .create-result-large video { display: block; width: 100%; max-height: 65vh; object-fit: contain; }
.create-result-large audio { width: 100%; }
#createResultDialog { width: min(900px, calc(100% - 32px)); }
#createResultActions small { max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 1800px) { .create-generation-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .create-generation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .create-generation-info { padding: var(--space-2); }
  .stage.has-generation-grid, .preview-stage.has-generation-grid { padding: var(--space-2); }
}
.generation-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.generation-count {
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.generation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.generation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.generation-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.generation-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label-size);
  color: var(--text-muted);
}
.generation-kind .icon {
  width: 16px;
  height: 16px;
}
.generation-main h2 {
  margin: 0;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
  overflow-wrap: anywhere;
}
.generation-meta,
.generation-detail {
  margin: 0;
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
}
.generation-meta {
  color: var(--text-muted);
}
.generation-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: var(--space-2);
  min-width: 200px;
}
.generation-stage {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-label-size);
  font-weight: 500;
  background: var(--surface-3);
  color: var(--text-secondary);
}
.generation-stage[data-tone="run"] {
  background: var(--accent-ai-soft);
  color: var(--accent-ai-text);
}
.generation-stage[data-tone="ok"] {
  background: var(--success-soft);
  color: var(--success);
}
.generation-stage[data-tone="warn"] {
  background: var(--warning-soft);
  color: var(--warning);
}
.generation-stage[data-tone="bad"] {
  background: var(--danger-soft);
  color: var(--danger);
}
.generation-charge {
  margin: 0;
  display: grid;
  justify-items: end;
  text-align: right;
}
.generation-charge small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
}
.generation-charge b {
  font-weight: 500;
  font-size: var(--text-body-sm-size);
  max-width: 260px;
}
.generation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}
.generation-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-height-md);
  padding: 0 14px;
  text-decoration: none;
}
.generation-none {
  margin: var(--space-4) 0;
}
/* --- Configurações em acordeão --- */
.settings-grid-cards.settings-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.settings-section {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-shell);
}
.settings-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
}
.settings-section > summary::-webkit-details-marker {
  display: none;
}
.settings-section > summary::after {
  content: "";
  margin-left: auto;
  align-self: center;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}
.settings-section[open] > summary::after {
  transform: rotate(-135deg);
}
.settings-section > summary:hover {
  background: var(--surface-1);
}
.settings-section-title {
  font-size: var(--text-body-size);
  font-weight: 600;
  color: var(--text-primary);
}
.settings-section > summary small {
  font-size: var(--text-label-size);
  color: var(--text-muted);
}
.settings-section-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
}
/* --- Filtros da galeria de Apps --- */
.apps-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.apps-filters-label {
  font-size: var(--text-label-size);
  color: var(--text-muted);
  margin-right: 4px;
}
.apps-filter-count {
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.apps-filter-now {
  margin-left: auto;
}
.apps-filter-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
/* --- Celular: barra inferior, topo de 56 px, gaveta "Mais" --- */
@media (max-width: 768px) {
  .studio-shell {
    grid-template-columns: 1fr;
  }
  .studio-body {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar .project-switcher,
  .top-search {
    display: none;
  }
  .sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: 56px;
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    width: min(300px, 86vw);
    height: auto;
    overflow-y: auto;
    padding: var(--space-3) 12px var(--space-4);
    border-right: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    z-index: 24;
  }
  .sidebar.mobile-open {
    display: flex;
  }
  .sidebar .nav-text,
  .sidebar .nav-label,
  .sidebar .workspace-id,
  .sidebar .local-note {
    display: block;
  }
  .sidebar .wordmark {
    display: none;
  }
  .sidebar .nav-button {
    justify-content: flex-start;
    min-height: var(--control-height-md);
  }
  .project-switcher-drawer:not([hidden]) {
    display: block;
    margin-bottom: var(--space-3);
  }
  .project-switcher-drawer .project-switcher-toggle {
    width: 100%;
    max-width: none;
    min-height: var(--control-height-md);
  }
  .project-switcher-drawer .project-switcher-label {
    flex: 1;
  }
  .project-switcher-drawer .project-switcher-panel {
    position: static;
    width: auto;
    margin-top: var(--space-2);
    box-shadow: none;
  }
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border-soft);
    background: var(--bg-shell);
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: var(--control-height-md);
    height: var(--bottom-nav-height);
    padding: 6px 2px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-label-size);
    font-weight: 500;
  }
  .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-item .icon {
    width: 22px;
    height: 22px;
  }
  .bottom-nav-item[aria-current="page"],
  .bottom-nav-item[aria-expanded="true"] {
    color: var(--text-primary);
  }
  .bottom-nav-item[aria-current="page"] .icon {
    color: var(--accent-ai);
  }
  .bottom-nav-item:focus-visible {
    outline-offset: -3px;
  }
  /* O que fica preso ao rodapé sobe a altura da barra, para não ficar embaixo dela. */
  #studioForm.composer .generate-area {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }
  .toast {
    bottom: calc(var(--bottom-nav-height) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .generation-card {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .generation-side {
    justify-items: start;
    min-width: 0;
  }
  .generation-charge {
    justify-items: start;
    text-align: left;
  }
  .generation-actions {
    justify-content: flex-start;
  }
  .settings-section > summary {
    padding: var(--space-3) var(--space-4);
  }
  .settings-section-body {
    grid-template-columns: 1fr;
    padding: 0 var(--space-2) var(--space-2);
  }
  .apps-filter-now {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-section > summary::after {
    transition: none;
  }
}
.project-switcher-caret {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 2px 3px 2px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
}
.project-switcher-toggle[aria-expanded="true"] .project-switcher-caret {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}
/* Dentro do grupo, o cartão perde a moldura e o sobrescrito: o `summary` já é o título do grupo,
   e caixa dentro de caixa com o mesmo nome duas vezes era ruído (medido na captura de 1440). */
.settings-section .settings-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--space-2) var(--space-5) var(--space-4);
}
.settings-section .settings-card + .settings-card {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-4);
}
.settings-section .settings-card > .eyebrow {
  display: none;
}
.settings-section .settings-card.profile-card {
  grid-column: auto;
}
.settings-section-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
@media (min-width: 769px) {
  .settings-grid-cards.settings-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .settings-accordion > .settings-section[data-settings-section="profile"] {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .settings-section .settings-card {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
}

/* ── CAPAS — 22/09/2026 ─────────────────────────────────────────────────────────
   Imagens em `assets/capas/` (WebP, sem texto nem marca dentro). Apps do Início: a capa entra no
   lugar do quadrado de ícone — no desktop em cima do cartão, no celular como miniatura à
   esquerda, para 16 Apps não virarem 16 telas de rolagem. */
.start-card.has-cover {
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 14px;
  overflow: hidden;
  gap: 10px;
}
.start-card.has-cover .start-text {
  padding: 0 14px;
}
.start-card.has-cover > .icon {
  display: none;
}
.start-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.start-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.start-card.has-cover:hover .start-cover img {
  transform: scale(1.03);
}
/* Convite e estado vazio com capa: a arte fica à esquerda (convite) ou em cima (página vazia). */
.home-invite.has-cover {
  flex-wrap: nowrap;
}
.home-invite-art {
  width: 128px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: none;
}
.home-invite.has-cover p {
  flex: 1;
}
.empty-page.has-cover {
  border-style: solid;
  border-color: var(--border-soft);
}
.empty-art {
  width: min(360px, 100%);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
/* Criar: faixa baixa da modalidade no topo do painel. */
.create-cover {
  margin: 0 0 14px;
  height: 116px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.create-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.page-heading + .create-cover {
  margin-top: 16px;
  height: 150px;
}
/* Projetos e Spaces vazios moram em telas de outros arquivos; aqui só ganham o fundo. */
.project-empty,
.space-onboarding {
  background-color: var(--surface-1);
  background-image:
    linear-gradient(90deg, rgba(6, 8, 11, 0.95) 0%, rgba(6, 8, 11, 0.82) 45%, rgba(6, 8, 11, 0.35) 100%),
    url("/assets/capas/vazio-projetos-640.webp");
  background-size: cover;
  background-position: center right;
}
.space-onboarding {
  background-image:
    linear-gradient(90deg, rgba(6, 8, 11, 0.95) 0%, rgba(6, 8, 11, 0.82) 45%, rgba(6, 8, 11, 0.35) 100%),
    url("/assets/capas/vazio-spaces-640.webp");
}
@media (prefers-reduced-motion: reduce) {
  .start-cover img { transition: none; }
  .start-card.has-cover:hover .start-cover img { transform: none; }
}
@media (max-width: 760px) {
  .start-card.has-cover {
    flex-direction: row;
    align-items: center;
    padding: 10px 14px 10px 10px;
    gap: 12px;
  }
  .start-card.has-cover .start-text {
    padding: 0;
  }
  .start-cover {
    width: 96px;
    flex: none;
    border-radius: var(--radius-sm);
    border-bottom: 0;
  }
  .home-invite-art {
    width: 96px;
    height: 54px;
  }
  .create-cover,
  .page-heading + .create-cover {
    height: 96px;
  }
  .project-empty,
  .space-onboarding {
    background-image: linear-gradient(180deg, rgba(6, 8, 11, 0.9) 0%, rgba(6, 8, 11, 0.95) 100%), url("/assets/capas/vazio-projetos-640.webp");
  }
  .space-onboarding {
    background-image: linear-gradient(180deg, rgba(6, 8, 11, 0.9) 0%, rgba(6, 8, 11, 0.95) 100%), url("/assets/capas/vazio-spaces-640.webp");
  }
}
/*
 * COMUNIDADE — REDESIGN 23/09/2026, referência aprovada pelo dono (mosaico
 * denso, sem cromo). Utilitário de acessibilidade que ainda não existia neste
 * arquivo: esconde visualmente mas mantém no leitor de tela (o rótulo da busca
 * e outros textos que só leitor de tela precisa ouvir).
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.community-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.community-title {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: var(--text-h1-weight);
  margin: 0;
}
.community-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.community-toolbar button {
  font-size: var(--text-body-sm-size);
  min-height: var(--control-height-sm);
}
.community-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.community-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  min-height: var(--control-height-sm);
  padding: 6px 14px;
}
.chip[aria-selected="true"] {
  background: var(--text-primary);
  color: var(--bg-base);
  border-color: var(--text-primary);
  font-weight: 600;
}
.community-search {
  min-width: 200px;
  max-width: 320px;
  flex: 1;
}
.community-search input {
  width: 100%;
  min-height: var(--control-height-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-primary);
  padding: 6px 16px;
}
.community-search input::placeholder {
  color: var(--text-muted);
}
/* MOSAICO — CSS Grid com `grid-auto-rows` pequeno e `grid-row: span N` por
   forma (ver `.shape-*`), NÃO por dimensão real da imagem: o servidor não
   manda largura/altura da mídia, então qualquer variação por proporção real
   pulsaria a página quando a imagem carregasse. As seis formas dão a
   variedade visual da referência sem depender do peso que ainda não temos. */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  /*
   * 23/09/2026 — CONSERTO: `6px` fixo (sem `minmax`) fazia o item do estado
   * VAZIO (`.empty-page`, que não declara `grid-row: span N`) ficar preso a
   * UMA track de 6px — a caixa continuava pintando 340px (o `min-height` dela
   * é do próprio item, não da track), só que por CIMA da fileira seguinte,
   * que a leitura de acessibilidade/clique enxergava como estando na frente.
   * `minmax(6px, auto)` deixa a track crescer quando o item não pede altura
   * nenhuma por `grid-row` (o caso do vazio) e continua servindo de unidade
   * pequena para o `span N` dos ladrilhos reais, que são a maioria dos casos.
   */
  grid-auto-rows: minmax(6px, auto);
  gap: 20px 16px;
  margin-bottom: 32px;
}
.community-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  grid-row: span 44;
}
.community-tile.shape-a, .community-tile.shape-d { grid-row: span 50; }
.community-tile.shape-b, .community-tile.shape-e { grid-row: span 38; }
.community-tile.shape-c, .community-tile.shape-f { grid-row: span 60; }
.community-cover {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
}
.community-cover img,
.community-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.community-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.community-cover-empty .icon {
  width: 28px;
  height: 28px;
}
.community-play {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: rgba(9, 11, 14, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.community-play .icon {
  width: 14px;
  height: 14px;
  color: #fff;
}
.community-tile-title {
  margin: 8px 0 4px;
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-tile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.community-avatar {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-secondary);
  /*
   * 23/09/2026 — 10px cravados, os mais baixos que sobraram na folha, e a tentação era chamar
   * isto de GLIFO (o selo redondo do Argos e o ícone do conector são px de propósito, porque o
   * número ali desenha geometria). NÃO é o caso: `.app-argos-seal` tem 34px de círculo para 15px
   * de letra e `.provider-symbol` 40px para 20px — os dois foram DIMENSIONADOS pela caixa. Aqui o
   * círculo tem 20px fixos e a inicial é só a inicial do nome de quem publicou: é texto, com a
   * função de rótulo, e cabe no token sem apertar. Medido na Comunidade a 1440px depois da
   * troca: a caixa do `<span>` continua 20×20px e o glifo ocupa 7,91×16px — 6,05px de folga de
   * cada lado, nada transborda, a linha de meta continua 21px e o estouro lateral continua zero.
   * Se um dia o círculo encolher abaixo de ~16px, aí a conversa é outra e vira exceção de
   * glifo — e exceção de glifo nesta casa se escreve e se defende na trava de tipografia, ao
   * lado das outras seis, não aqui em cima de um número solto.
   */
  font-size: var(--text-label-size);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-author {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-label-size);
  color: var(--text-secondary);
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  text-align: left;
  justify-content: flex-start;
}
button.community-author:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.community-like {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.community-like .icon {
  width: 14px;
  height: 14px;
}
button.community-like[aria-pressed="true"] {
  color: var(--danger);
}
button.community-like[aria-pressed="true"] .icon {
  fill: currentColor;
}
button.community-like:hover {
  color: var(--text-primary);
}
.community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.community-actions button {
  font-size: var(--text-label-size);
  min-height: 30px;
  padding: 4px 10px;
}
.community-audio-player {
  width: 100%;
  margin-top: 8px;
  height: 32px;
}
/* FILEIRAS (workflows populares, top criadores) — rolagem horizontal com o
   teclado (a fileira em si não recebe foco; cada cartão é um <button>/tile
   focável e a rolagem nativa do navegador segue o foco). */
.community-row {
  margin-bottom: 32px;
}
.community-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.community-row-head h2 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
  margin: 0;
}
.community-row-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.community-row-scroll .community-tile {
  flex: none;
  width: 168px;
  grid-row: auto;
}
.community-row-scroll .community-cover {
  height: 168px;
}
.community-creator {
  flex: none;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0 0 10px;
  background: var(--surface-1);
  overflow: hidden;
  text-align: left;
  min-height: 0;
}
.community-creator-banner {
  width: 100%;
  height: 64px;
  background: linear-gradient(135deg, hsl(var(--creator-hue, 262) 70% 22%), hsl(calc(var(--creator-hue, 262) + 40) 70% 14%));
}
.community-creator-avatar {
  margin: -20px 0 6px 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  background: var(--surface-3);
  color: var(--text-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-creator-name {
  padding: 0 10px;
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.community-creator-meta {
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--text-label-size);
}
.community-creator-meta .icon {
  width: 12px;
  height: 12px;
}
.community-creator:hover {
  border-color: var(--muted);
}
/* Foco visível em todo elemento interativo do redesign — chip, cartão, fileira. */
.chip:focus-visible,
.community-author:focus-visible,
.community-like:focus-visible,
.community-creator:focus-visible,
.community-cover:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .community-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
  .community-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .community-search {
    max-width: none;
  }
}
@media (max-width: 360px) {
  .community-grid {
    grid-template-columns: 1fr;
  }
}
/*
 * INÍCIO — REDESIGN 23/09/2026 (pedido do dono): um composer só acima da
 * dobra ("comece agora") e, abaixo, o resumo da Comunidade. Reaproveita
 * `.community-row`, `.community-row-scroll`, `.community-tile` etc. do bloco
 * acima — só o composer e o cabeçalho do resumo são classes novas.
 */
/*
 * TAMANHO DA BANDEJA — 23/09/2026. *"a bandeja que criamos falta resolução e
 * ficou pequena a bandeja, melhorar ali"*. O cartão tinha 145 px de altura e ia
 * de ponta a ponta da área de conteúdo (≈1150 px no monitor de 1440): esticado
 * e raso ao mesmo tempo, o primeiro elemento da tela com menos peso que a busca
 * do topo. A referência aprovada faz o contrário — largura CONTIDA e centrada,
 * campo alto, ar entre as partes — e é isso que dá presença.
 *
 * Os três números que mudaram, e o que cada um resolve:
 *   · `max-width: 920px` + `margin auto` — parar de esticar; um cartão largo e
 *     baixo lê como faixa, um cartão contido e alto lê como bandeja;
 *   · `min-height: 128px` no campo — cabem quatro linhas de pedido sem rolar,
 *     contra as duas de antes (`rows="2"`, ~56 px);
 *   · `padding: 22px` e 18 px entre as partes — o ar que a referência tem.
 */
.home-quickstart {
  margin: 16px auto 40px;
  max-width: 920px;
}
.quickstart-kinds {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
.quickstart-kind {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: var(--text-body-size);
  min-height: var(--control-height-md);
  padding: 8px 18px 8px 14px;
}
.quickstart-kind .icon {
  width: 18px;
  height: 18px;
}
.quickstart-kind[aria-selected="true"] {
  background: var(--accent-primary-soft);
  border-color: var(--accent-primary-line);
  color: var(--accent-primary-text);
}
.quickstart-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  padding: 22px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quickstart-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.quickstart-attach {
  flex: none;
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  border-radius: var(--radius-md);
}
.quickstart-input {
  flex: 1;
  min-width: 0;
  min-height: 128px;
  /* `none` e não `vertical`: o punho de redimensionar do navegador cai em cima
     da linha que separa o campo da fileira de ajustes, e o campo já nasce com
     quatro linhas de altura. */
  resize: none;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: var(--text-body-lg-size);
  line-height: 26px;
  padding: 6px 0 0;
}
.quickstart-input::placeholder {
  color: var(--text-muted);
}
.quickstart-attach-panel {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.quickstart-attach-tile {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.quickstart-attach-tile[aria-pressed="true"] {
  border-color: var(--accent-primary);
  outline: 2px solid var(--accent-primary-line);
}
.quickstart-attach-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.quickstart-attached {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm-size);
  margin: 0;
}
.quickstart-attached .icon {
  width: 16px;
  height: 16px;
}
/*
 * A FILEIRA DE BAIXO — UMA GRADE SÓ, 23/09/2026.
 *
 * Recusa do dono sobre a captura de hoje: *"fora de estrutura"*. Era um
 * `flex` com `justify-content: space-between`, então os ajustes colavam na
 * borda esquerda e o par preço+botão na direita, com todo o vão no meio. Duas
 * ilhas: quem trocava a resolução do lado esquerdo não via o número mudar do
 * lado direito — e ver o número mudar é o motivo de a fileira existir.
 *
 * Agora é uma grade de três trilhas, e cada uma tem um porquê:
 *   · `minmax(0, auto)` nos ajustes — eles ocupam o que precisam e nada mais,
 *     e o `0` de mínimo é o que os deixa encolher/quebrar em vez de empurrar a
 *     página (não há rolagem lateral em nenhuma largura);
 *   · `auto` no preço — ele fica ENCOSTADO no último ajuste, à distância de um
 *     `gap` (18 px), e não na outra ponta do cartão. Essa vizinhança é o ponto
 *     inteiro: é assim que a pessoa VÊ o número mudar quando mexe no ajuste;
 *   · `minmax(0, 1fr)` no botão — a trilha que absorve a sobra é a ÚLTIMA, e é
 *     por isso que o vão sai do meio da fileira e vai para depois do preço; o
 *     botão fecha a linha com `justify-self: end`.
 * `align-items: end` alinha os três pela BASE, que é onde mora o ritmo: o
 * seletor, o valor e o botão terminam na mesma linha, embora o botão seja mais
 * alto de propósito.
 *
 * A quarta área, `reason`, é uma linha inteira embaixo: o motivo é frase, e
 * frase dentro de uma célula de grade quebra em duas linhas irregulares e
 * empurra o botão — que foi exatamente o que a captura mostrou.
 */
.quickstart-bottom {
  display: grid;
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  grid-template-areas:
    "settings estimate action"
    "reason   reason   reason";
  align-items: end;
  gap: 10px 18px;
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
}
/*
 * A FILEIRA DE AJUSTES. Cada ficha é rótulo VISÍVEL + seletor, e não um
 * `<select>` mudo: a fileira tem agora até quatro dimensões (motor, formato,
 * resolução, duração) e sem rótulo ninguém sabe se "1K" é resolução ou modelo.
 * É a mesma forma das fichas do Spaces (decisão 74).
 */
.quickstart-settings {
  grid-area: settings;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  min-width: 0;
}
.quickstart-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.quickstart-field label {
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.quickstart-select {
  min-height: var(--control-height-md);
  max-width: 200px;
}
.quickstart-field-model .quickstart-select {
  max-width: 240px;
}
/*
 * O PREÇO — a QUARTA ficha da fileira, não um bloco à parte.
 *
 * Ele usa a MESMA forma dos ajustes (`.quickstart-field`): rótulo pequeno em
 * maiúsculas em cima, conteúdo embaixo, `min-height` igual ao do `<select>`.
 * É isso que faz "MOTOR · FORMATO · RESOLUÇÃO · DURAÇÃO · ESTIMATIVA" lerem
 * como uma fileira só — e é essa vizinhança que deixa a pessoa VER o número
 * mudar quando ela mexe no ajuste ao lado. Antes o rótulo ficava na horizontal,
 * ao lado do valor, e o bloco inteiro estava encostado na borda direita.
 *
 * Nenhum tamanho de fonte novo: `--text-label-*` no rótulo (o mesmo dos outros
 * rótulos da fileira) e `--text-h3-*` no valor (o peso que ele já tinha).
 */
.quickstart-estimate {
  grid-area: estimate;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.quickstart-estimate-value {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-height: var(--control-height-md);
}
.quickstart-estimate-value small {
  color: var(--text-muted);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.quickstart-estimate-value b {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--text-primary);
}
/* O MOTIVO ocupa a linha inteira: frase espremida numa célula da grade quebra
   em duas linhas irregulares e empurra o botão — foi o que o dono viu. */
.quickstart-estimate-reason {
  grid-area: reason;
  margin: 0;
  /* `--text-body-sm-*` e não um rótulo: isto é FRASE (o motivo do preço), e o
     token de legenda foi eliminado da escala em 16/09/2026 por ficar abaixo do
     piso de 12px. */
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  color: var(--text-secondary);
}
.quickstart-submit {
  grid-area: action;
  flex: none;
  justify-self: end;
  min-height: var(--control-height-lg);
  padding-inline: 22px;
}
/*
 * TELEFONE (390 px). O cartão empilha, mas NÃO encolhe para um toco: o campo
 * continua alto (112 px), os ajustes viram duas colunas de largura inteira em
 * vez de quatro fichas espremidas, e preço e botão ocupam a linha toda. Sem
 * rolagem lateral — `min-width: 0` em todas as caixas flex acima é o que
 * impede o `<select>` de nome longo de empurrar a página.
 */
@media (max-width: 720px) {
  .home-quickstart {
    margin: 12px 0 32px;
  }
  .quickstart-kinds {
    justify-content: flex-start;
  }
  .quickstart-card {
    padding: 16px;
    gap: 14px;
  }
  .quickstart-input {
    min-height: 112px;
  }
  /*
   * No telefone a grade empilha, mas o preço NÃO se afasta dos controles: ele
   * fica na linha logo abaixo dos ajustes, à esquerda, com o botão fechando a
   * mesma linha à direita. Empurrar o preço para o fim (ou o botão para uma
   * linha só dele) devolveria, em 390 px, exatamente a separação que o dono
   * recusou em 1440.
   */
  .quickstart-bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "settings settings"
      "estimate action"
      "reason   reason";
    gap: 14px 12px;
  }
  .quickstart-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .quickstart-select,
  .quickstart-field-model .quickstart-select {
    max-width: none;
    width: 100%;
  }
  .quickstart-submit {
    justify-self: end;
    justify-content: center;
  }
}
.home-community-summary .community-row:last-child {
  margin-bottom: 0;
}

/*
 * SELO DE ATRIBUIÇÃO — 25/09/2026.
 * Obrigação de contrato de um parceiro [A19-§1]: exibição proeminente com link, na tela onde se gera. Discreto
 * por decisão do dono, mas NÃO escondido: cor de texto secundário (não a de link apagado),
 * sublinhado e alvo de toque de 44px. Esconder o que o contrato manda mostrar seria descumprir
 * dizendo que cumpriu.
 */
.atribuicao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-label-size);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.atribuicao:hover { color: var(--text-primary); }

/*
 * ESQUELETO DE CARREGAMENTO — DESEMPENHO, 05/10/2026.
 * Aparece no instante em que o HTML chega (antes do JS) e enquanto uma tela sob demanda baixa.
 * É só forma: o texto de status continua ao lado para leitor de tela, e o bloco é aria-hidden.
 */
.esqueleto { display: grid; gap: var(--space-3, 12px); padding: var(--space-6, 24px) 0; max-width: 960px; }
.esqueleto span { display: block; height: 16px; border-radius: 8px; background: var(--surface-2, #171d26); }
.esqueleto span:nth-child(1) { width: 40%; height: 28px; }
.esqueleto span:nth-child(2) { width: 85%; }
.esqueleto span:nth-child(3) { width: 70%; }
.esqueleto span:nth-child(4) { width: 100%; height: 160px; border-radius: 12px; }
.boot-esqueleto { padding: 32px; }
@media (prefers-reduced-motion: no-preference) {
  .esqueleto span { animation: esqueleto-pulso 1.2s ease-in-out infinite alternate; }
}
@keyframes esqueleto-pulso { from { opacity: .55; } to { opacity: 1; } }