@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
/* airis-app.css · a folha única do app do técnico · rodada 2026-09-24
   Fonte da verdade: DESIGN.md (commit 459c20c). Uma linha por página, no FIM do <head>, depois
   do <style> da página:  <link rel="stylesheet" href="/assets/airis-app.css">
   Nenhum script é tocado. Os seletores levam o prefixo :root:root (especificidade 0,2,0) para
   vencer as regras da própria página sem depender da ordem; onde a página usa !important ou
   style="" inline, a folha também usa !important, e só ali. */

/* ================================================================ 1. TOKENS */
:root:root{
  /* marca (kit) */
  --ink:#11131C; --soapstone:#F1F3F4; --teal:#1294A2; --change:#FF3B24; --ink-gradient-end:#111E2C;
  --deep-teal:#005763; --teal-700:#05747F; --teal-600:#008696; --teal-300:#69AFB8; --teal-50:#E0EDEF;
  --surface-dark:#1B1E27; --graphite:#2B2F3A; --steel:#5D6371; --aluminum:#B4B9C2; --hairline:#D6DAE0;
  /* semântico */
  --primary:var(--teal-700); --primary-hover:var(--deep-teal); --primary-press:#00434C;
  --primary-grad-from:var(--teal-700); --primary-grad-to:var(--deep-teal);
  --primary-grad-hover-from:var(--deep-teal); --primary-grad-hover-to:#00434C;
  --on-primary:var(--soapstone); --teal-wash:var(--teal-50); --teal-line:var(--teal-300);
  --text:#1B1E27; --muted:var(--steel); --faint:var(--aluminum);
  --background:var(--soapstone); --surface:#FFFFFF; --surface-2:var(--soapstone); --border:var(--hairline);
  /* sistema (não é marca) */
  --good:#16A34A; --good-text:#15803D; --good-bg:#ECFDF5; --good-line:#9AE6B4;
  --warn:#B45309; --warn-text:#92400E; --warn-bg:#FEF6E7; --warn-line:#F5D9A6;
  --error:#B91C1C; --error-hover:#991B1B; --error-bg:#FEF2F2; --error-line:#FCA5A5;
  /* AS TRES FAMILIAS QUE FALTAVAM (25/09/2026, sessao DESIGN, com a palavra da MENTOR).
     O `DESIGN.md` declara as tres desde o kit novo, e esta folha nunca as recebeu. Medido antes de
     escrever: nem o NOME (--published, --pub, --info, --train-bg) nem o VALOR existiam aqui.
     Enquanto isso, tres selos do painel do admin ja' pintavam exatamente estes hex, escritos a mao:
     o `.b-pub`, o `b-queue` do intake e o `trainbadge` dos usuarios. Nao era escolha de ninguem
     ficar fora do contrato: era impossibilidade -- `var(--published)` nao resolvia, e trocar o hex
     por ele teria APAGADO o selo, que e' o que o `var(--tb)` ja' faz com o `.chip` do drop_in.
     Isto e' ACRESCIMO DE DECLARACAO: nenhuma regra existente muda, e os nomes e os valores sao os
     do `DESIGN.md`, sem derivar nem arredondar.
     MAS NAO E' NEUTRO, e a frase "nada usa isto ainda" era minha e estava errada: o `recipe.html` e
     o `factory_parameter.html` ja' escreviam `background:var(--info-bg)` e
     `border-left:4px solid var(--info)`, e ate' aqui esses nomes NAO RESOLVIAM. Medido, com um
     elemento plantado: token que nao existe devolve `background: rgba(0,0,0,0)` e
     `border-left: 0px none` -- a caixa de informacao das duas estava sem fundo e sem barra, ou
     seja, nao existia. Este acrescimo a faz aparecer. Palavra dele em 25/09: "sim, mostra a caixa". */
  --published:#3730A3; --published-bg:#EEF2FF; --published-line:#A5B4FC;
  --info:#155E75; --info-bg:#ECFEFF; --info-line:#67E8F9;
  --train-bg:#FFF7ED; --train-line:#FDBA74;
  /* foco (focus_convention): NAO reusar --gas-n2/--gas-o2 aqui nem o inverso -- azul e
     vermelho vizinhos por decisao (DESIGN, contrato 7802c27); emprestar colaria "gas" num
     sinal que nao e' gas. above/below medem 9:1 contra qualquer fundo, mas 1,03:1 entre si
     (mesma luminosidade, so' matiz) -- quem nao separa azul de vermelho nao le a cor; a
     seta ao lado (span.arrow/.conv-table .arrow) e' o que carrega o sentido, nao tirar. */
  --focus-above:#1E3A8A; --focus-below:#7F1D1D;
  /* ETAPA 3 (Usage), grafico do painel: sete tokens que nasceram dentro do :root do painel.html
     (26/09/2026, contrato da DESIGN) e descem para a folha compartilhada nesta rodada (MENTOR,
     mesmo dia) - mesma regra: so' claro, sem par em tema escuro (o app nao tem nenhum). */
  --chart-1:#1294A2; --chart-2:#11131C; --chart-3:#16A34A; --chart-4:#B45309; --chart-5:#3730A3;
  --chart-grid:#D6DAE0; --chart-axis:#5D6371;
  /* largura minima de coluna de valor em tabela de estagio (DESIGN, 26/09/2026, commit 3a86887
     do DESIGN.md - o 108px do pierce largo virou token). */
  --col-value-min:108px;
  /* diametro do circulo numerado do h2 de secao (DESIGN.md, bloco de dimensoes; gemeo em
     design-system/tokens/spacing.css). O 28px de .num virou token pra' o recuo do h2sub/h2tag
     (mais abaixo) poder derivar dele em vez de repetir o numero escrito a mao. */
  --num-badge-d:28px;
  /* costura optica entre as duas linhas do flex do h2 de secao (numero+titulo, depois subtitulo),
     por CIMA do leading das duas fontes -- nao e' o vao entre elementos separados, por isso fica
     abaixo da escala --sp-* e nao e' metade dela (DESIGN.md, 27/09/2026, contrato commitado em
     f3cf3d3; gemeo em design-system/tokens/spacing.css). O valor continua 2px, so' ganha nome. */
  --heading-sub-gap:2px;
  /* tipo, espaço, raio, movimento */
  --font-ui:"Montserrat","Segoe UI",system-ui,-apple-system,Arial,sans-serif; --font:var(--font-ui);
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px; --sp-7:16px; --sp-8:18px;
  --sp-9:20px; --sp-10:22px; --sp-11:24px; --sp-12:32px; --sp-13:48px; --sp-14:64px;
  --control-h:44px; --logo-min:16px; --logo-clear-mobile:16px; --logo-clear-desktop:24px;
  --bar-lockup-h:24px; --bar-lockup-w:85px; --bar-lockup-h-desktop:28px; --bar-lockup-w-desktop:99px;
  --r-sm:6px; --r-hbtn:8px; --r-ctl:9px; --r-panel:12px; --r-card:14px; --r-chip:999px;
  --dur-fast:140ms; --dur-med:150ms; --ease-standard:cubic-bezier(.4,0,.2,1);

  /* ---- PROFUNDIDADE (proposta desta rodada; os nomes são os que os tokens já têm) ----
     A cor da sombra sai de UM token. Recomendação: Ink. #137789 é o primário aposentado. */
  --shadow-rgb:17,19,28;                                   /* NOVO · = --ink em RGB */
  --shadow-card:0 1px 2px rgba(var(--shadow-rgb),.06),0 20px 42px -32px rgba(var(--shadow-rgb),.38);
  --shadow-rec:0 1px 2px rgba(var(--shadow-rgb),.05),0 18px 40px -32px rgba(var(--shadow-rgb),.32);
  --shadow-hover:0 2px 4px rgba(var(--shadow-rgb),.08),0 14px 28px -14px rgba(var(--shadow-rgb),.34);
  --shadow-pop:0 18px 44px rgba(var(--shadow-rgb),.28);
  --shadow-modal:var(--shadow-pop);
  --shadow-toast:0 6px 24px rgba(var(--shadow-rgb),.25);
  --veil-bar:rgba(255,255,255,.92); --veil-topbar:rgba(255,255,255,.88); --fixed-bar-clear:112px; /* PARAMETERS/ANALYZE v2, 24/09: autocontidos, aprovados */
  --scrim:rgba(17,19,28,.55); --blur-scrim:blur(2px);
  --ring-focus:0 0 0 3px rgba(5,116,127,.35);              /* era rgba(19,119,137) = aposentado */
  --edge-light:inset 0 1px 0 rgba(241,243,244,.22);        /* NOVO · fio de luz no topo do botão, Soapstone */
  --edge-press:inset 0 2px 4px rgba(0,67,76,.45);          /* NOVO · botão apertado afunda, = --primary-press */
  --edge-sunk:inset 0 1px 2px rgba(var(--shadow-rgb),.07); /* NOVO · campo e trilho escavados no cartão */
  --page-depth:linear-gradient(180deg,var(--surface) 0,var(--soapstone) 360px); /* NOVO · luz de cima */
  --brand-plate:linear-gradient(160deg,var(--ink) 0,var(--ink-gradient-end) 100%); /* gradiente Ink do kit */
  --photo-fill:var(--graphite);                            /* NOVO · o bloco da foto antes de ela chegar */

  /* ---- nomes que as 76 páginas redeclaram em :root, agora apontando para o kit ---- */
  --dne-navy:var(--ink); --dne-navy-dark:var(--ink); --dne-blue:var(--ink); --navy:var(--ink);
  --dne-teal:var(--teal-700); --dne-teal-light:var(--teal-50); --dne-teal-soft:var(--teal-300);
  --dne-teal-bg:var(--teal-50); --dne-blue-soft:var(--teal-50);
  --teal-d:var(--teal-700); --wash:var(--teal-50); --tl:var(--teal-300);
  --bg:var(--soapstone); --verified:var(--good-text); --placeholder:var(--warn);
  --warning:var(--warn); --warning-bg:var(--warn-bg); --red:var(--error); --red-bg:var(--error-bg);
  --bad:var(--error); --bad-bg:var(--error-bg);
}
/* só para a comparação lado a lado (a página real não usa estes atributos) */
:root:root[data-s="teal"]{--shadow-rgb:19,119,137}
:root:root[data-p="plana"]{--shadow-card:none;--shadow-rec:none;--shadow-hover:none;--edge-light:0 0 0 transparent;--edge-sunk:0 0 0 transparent;--page-depth:none}

/* ================================================================ 2. BASE · nível 0, o fundo */
:root:root body,:root:root body.dneid,:root:root .hubbody{
  background-color:var(--soapstone)!important;background-image:var(--page-depth)!important;
  background-repeat:no-repeat!important;font-family:var(--font-ui)!important;color:var(--text)!important;
  font-size:15px;line-height:1.5}
/* BARRA PRESA (rd_barra_presa, Cristiano via MENTOR, 25/09): "sim, a barra fica presa no
   topo". O .m-topbar ja' nasce com position:sticky;top:0 (secao 4, abaixo), mas nunca
   grudava -- cada pagina carrega o bloco #dne-nozoom ("PINCA SEM QUERER", Cristiano,
   16/08/2026) com html,body{overflow-x:hidden}. overflow != visible em QUALQUER ancestral
   ate' o viewport tira ele como ancestral de rolagem do sticky e mata o efeito na cadeia
   inteira -- bug conhecido do WebKit/Chromium, nao e' so' deste app. overflow-x:clip corta
   o mesmo jeito (sem rolagem lateral) sem criar esse contexto de rolagem, entao o sticky
   volta a funcionar. Suporte no Safari: desde a 16 (iOS 16, lancado set/2022) -- qualquer
   iPhone em uso em 2026 cobre. Aqui, na folha global, com !important: vence a declaracao
   sem !important que continua em cada pagina (nao mexida, regra 16 -- fica de historico,
   morta por especificidade). Depois deste ponto: DESIGN mede as 24 paginas de rolagem/corte
   de novo, nos dois papeis -- tirar o hidden pode revelar conteudo largo que hoje o corte
   escondia. */
:root:root,:root:root body{overflow-x:clip!important}
/* Medido ao vivo (harness local): ":root:root html" nunca casa -- :root JA' e' o <html>,
   entao pedir um <html> descendente de :root:root e' pedir <html> dentro de si mesmo, e
   isso nao existe no DOM. A regra so' pegava o body (confirmado: getComputedStyle no
   defect_index.html deu overflow-x:hidden no html, clip so' no body). Corrigido para
   ":root:root" sozinho, que e' o proprio <html> com a mesma especificidade -- reconferido
   depois, os dois deram clip. */
:root:root body *{font-family:inherit}
:root:root h1,:root:root .cover h1,:root:root body.dneid .cover h1,:root:root .vdx .mast h1,:root:root .hdr-title{
  font-weight:700!important;color:var(--ink)!important;letter-spacing:-.015em;line-height:1.2;text-wrap:pretty}
:root:root h2,:root:root h3,:root:root h4{color:var(--ink);text-wrap:pretty}
:root:root a{color:var(--teal-700)}
:root:root :focus-visible{outline:2px solid var(--teal-700)!important;outline-offset:1px}
:root:root .ico{width:1.08em;height:1.08em;vertical-align:-.19em;stroke:currentColor;fill:none}

/* ================================================================ 3. A MARCA · uma regra, um arquivo
   O <img> antigo continua no HTML; a folha zera a caixa de conteúdo dele (padding = largura) e
   pinta o lockup do kit no fundo. Quando os 73 src forem trocados, esta regra continua valendo.
   PADRONIZACAO DA BARRA (Cristiano via MENTOR, 25/09): "algumas telas tem a logomarca e
   outras nao; tem que padronizar... com a logo fica mais bonito, mas um pouquinho menor do
   que hoje". Um degrau menor nos dois tamanhos -- o que era desktop (113x32) sai de cena; o
   celular cai pra --bar-lockup-w/-h (85x24, medido pela DESIGN, contrato 64f3cd1) e o
   desktop pra --bar-lockup-w/-h-desktop (99x28, o tamanho que era do celular). Proporcao
   99:28 exata nos dois pares -- nada distorce. Home (index.html) fica de fora (decisao dele
   de 24/09, a Home ja' tem o lockup grande). analyze.html tambem fica de fora por ora: a
   DESIGN mediu que a header dele (av2-back + "My plates" + "Sign out" por extenso) nao
   sobra 62px pro logo a 320px -- espera decisao separada, registrada com a MENTOR. */
:root:root .m-topbar .mlogo-img,:root:root .nav-logo,:root:root header .hlogo{
  box-sizing:border-box!important;width:var(--bar-lockup-w)!important;height:var(--bar-lockup-h)!important;padding-left:var(--bar-lockup-w)!important;
  overflow:hidden!important;color:transparent!important;font-size:0!important;border-radius:0!important;box-shadow:none!important;
  background:url(kit2609/lockup-horizontal-escuro.png) left center/contain no-repeat!important}
:root:root .airis-lockup-tela,:root:root .airis-nome img,:root:root body>.box img[alt="AIris"]{
  box-sizing:border-box!important;width:104px!important;height:120px!important;padding-left:104px!important;
  overflow:hidden!important;color:transparent!important;font-size:0!important;margin:0 auto!important;
  background:url(kit2609/lockup-vertical-escuro.png) center/contain no-repeat!important}
@media(min-width:761px){
  :root:root .m-topbar .mlogo-img,:root:root .nav-logo,:root:root header .hlogo{width:var(--bar-lockup-w-desktop)!important;height:var(--bar-lockup-h-desktop)!important;padding-left:var(--bar-lockup-w-desktop)!important}
  :root:root .m-topbar .mleft{gap:var(--logo-clear-desktop)!important}
  :root:root .airis-lockup-tela{width:130px!important;height:150px!important;padding-left:130px!important}}
:root:root .airis-frase{margin:var(--sp-7) 0 0;font-size:16px;font-weight:600;color:var(--ink);text-align:center;letter-spacing:-.005em}

/* ================================================================ 4. BARRA DE TOPO · nível 1 */
:root:root .m-topbar,:root:root body>header{
  display:flex!important;align-items:center;gap:var(--sp-3)!important;position:sticky;top:0;z-index:200;min-height:60px;
  background:rgba(255,255,255,.88)!important;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--hairline)!important;box-shadow:var(--shadow-rec)!important;
  padding:var(--sp-3) var(--logo-clear-mobile)!important}
/* REPROVADO pela SKILL (t_gruda.mjs, 25/09), consertado na palavra da MENTOR: o "body>header"
   acima serve o header simples de paginas sem .m-topbar (analyze e outras -- essa continua
   grudando, e' a barra delas). Mas em 26 paginas existe TAMBEM um <header class="cover">
   filho direto do body -- um bloco de titulo dentro do fluxo da pagina, nao uma barra --, e o
   seletor generico pegava ele junto. Sticky nele so' virou visivel agora: antes o
   overflow-x:hidden (secao 2) matava TODO sticky da pagina, entao o efeito nunca aparecia.
   Com o clip, ele grudou por cima da .m-topbar (mesmo z-index, vem depois no DOM) e cobriu
   ate' 56% da tela a 320px ao rolar. position:static tira ele do sticky sem tocar as outras
   paginas: especificidade (0,3,2) contra (0,2,2) do seletor generico, vence sem depender de
   ordem. */
:root:root body>header.cover{position:static!important}
:root:root .m-topbar .mleft{align-items:center;margin-right:auto;gap:var(--logo-clear-mobile)!important}
:root:root .m-topbar{justify-content:flex-end!important}
/* Achado da SKILL (25/09, defect_index.html, modo celular, papel com Submit parameters
   visivel): a 320/360px o conteudo do topbar (seta+logo, Submit parameters, Menu) passa
   de largura, e o flex-end estoura o excesso pela ESQUERDA -- sem rolagem pra pegar, entao
   nenhum teste de scrollWidth via. 17 telas perdem a seta e a marca. Decisao da MENTOR
   (25/09): a regra sobe da correcao local do defect_index.html pra ca', pra servir todas.
   Abaixo de 400px o topbar quebra linha em vez de estourar -- tudo continua visivel e
   clicavel, so' empilha (a barra vai de ~61 pra ~113px quando quebra). */
@media(max-width:400px){:root:root .m-topbar{flex-wrap:wrap!important;row-gap:8px!important}}
/* BARRA ESTREITA, UMA LINHA SO' (rd_barra_estreitar, Cristiano via MENTOR, 25/09 06:54):
   "mais baixa: uma linha, so' o icone". Abaixo de 400px, o botao Submit mostra so' o
   icone -- a palavra "Submit" sai da tela SEM sair do alcance: aria-label="Submit
   parameters" (ja' existe nas 64 paginas, sem mudar aqui) continua contando a palavra
   pra quem usa leitor de tela. O Menu NAO muda -- continua icone+palavra, decisao dele de
   24/09. font-size:0 no link colapsa o texto (nao da' pra mirar um no de texto solto com
   CSS, a palavra vem crua no HTML, sem <span>); o svg recebe font-size proprio de volta,
   porque .ico usa 1.08em e herdaria o 0 do pai sem isso. Meta dele: a barra numa linha so'
   (61px) a 320px com o Submit, nada fora da tela -- a quebra de linha da regra acima fica
   como rede, nao como plano principal. */
@media(max-width:400px){
  :root:root .m-topbar a[aria-label="Submit parameters"]{
    font-size:0!important;gap:0!important;padding:9px 10px!important}
  :root:root .m-topbar a[aria-label="Submit parameters"] svg{font-size:13px!important}
}
/* SUBMIT SO' NA HOME (Cristiano via MENTOR, 25/09): "aparece em todas as abas, polui o
   cabecalho; ele fica na pagina principal e no menu sanduiche, nao precisa estar em todas
   as telas". Sai da .m-topbar em toda pagina, menos a Home (index.html); no Menu continua
   (marcacao dele, selector diferente, nao mexido aqui). Escondido por CSS -- o HTML do link
   fica intacto nas 64 paginas (regra 16), so' nao aparece. Isso tira o motivo da regra de
   icone-so' acima (abaixo de 400px): ela fica escrita, sem efeito, porque agora so' a Home
   mostra o Submit na barra, e a Home nao tem seta (nada aperta ali). index.html tem um
   :root:root:root LOCAL revertendo esta regra so' nela -- especificidade (0,5,0) contra
   (0,4,0) daqui, vence sem depender de ordem (o <style> da pagina carrega antes do <link>
   desta folha). */
:root:root .m-topbar a[aria-label="Submit parameters"]{display:none!important}
/* FALTAVAM ~20-30px (medido: a seta de fallback que o voltar_analise.js injeta -- ver
   assets/voltar_analise.js -- entra em qualquer tela sem seta propria no HTML, defect_index
   inclusive). Decisao da MENTOR (25/09): a seta fica (o tecnico precisa voltar) e o logo nao
   muda NAQUELE DIA -- corte so' de espacamento, em degraus da escala, sem encolher nenhum
   alvo de toque em altura, e sem encolher a seta nem o Submit: gap da barra 8->4
   (--sp-3->--sp-1), margem da seta de fallback 8->4, padding lateral do botao Menu 14->10
   por lado (--sp-6->--sp-4). O .m-burger e' 3x :root: a regra dele ("botao secundario",
   mais abaixo no arquivo) usa 2x :root na mesma selecao -- empate de especificidade nesse
   caso perde pra quem vem DEPOIS no arquivo, e a regra do botao secundario vem depois
   desta. Medido ao vivo: sem o 3x, o padding do Menu nao mudava nem 1px.
   O PADDING LATERAL VOLTOU A 16px (Cristiano via MENTOR, 25/09, depois da pausa): com o
   Submit fora da barra em toda pagina menos a Home e o logo em --bar-lockup-w (85px, era
   99), sobrou espaco de sobra -- o respiro minimo do kit (16px, --logo-clear-mobile) vence
   de volta o --sp-5 (12px) de hoje de manha. Medido a 320px depois do reverta: cabe. */
@media(max-width:400px){
  :root:root .m-topbar{gap:var(--sp-1)!important}
  :root:root:root .m-burger{padding-left:var(--sp-4)!important;padding-right:var(--sp-4)!important}
}
@media(min-width:761px){:root:root .m-topbar,:root:root body>header{padding:var(--sp-5) var(--logo-clear-desktop)!important;min-height:72px}}
:root:root header .hleft{display:flex;align-items:center;gap:var(--sp-5)}
:root:root header .t{font-size:14px;font-weight:600;color:var(--ink)}
:root:root header .hright{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
:root:root header .u{font-size:12px;color:var(--steel)}

/* botão secundário · barra, menu, filtros (a seta de voltar saiu daqui, tem regra propria
   logo abaixo -- "SETA UNICA") */
:root:root .m-burger,:root:root .hbtn,:root:root .deskgloss,:root:root a[aria-label="Submit parameters"],
:root:root .nav-back,:root:root .desk-back,:root:root .rfilter #fClear,:root:root .drill-toggle,:root:root .vdx .dcard .vabrir,
:root:root .volta button.ghost{
  display:inline-flex!important;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--control-h)!important;
  padding:0 var(--sp-6)!important;border-radius:var(--r-hbtn)!important;border:1px solid var(--hairline)!important;
  background:var(--surface)!important;color:var(--ink)!important;font:600 13px/1 var(--font-ui)!important;text-decoration:none!important;
  box-shadow:var(--edge-sunk),0 1px 0 rgba(var(--shadow-rgb),.04)!important;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
:root:root .m-burger:hover,:root:root .hbtn:hover,:root:root a[aria-label="Submit parameters"]:hover,
:root:root .nav-back:hover,:root:root .desk-back:hover,:root:root .drill-toggle:hover,:root:root .vdx .dcard .vabrir:hover{
  background:var(--teal-50)!important;border-color:var(--teal-300)!important}
/* MENU ABERTO, UM SO' ESTADO (Cristiano, 25/09): "o botao Menu aberto fica teal-claro em
   tres telas e branco no defect_index". Nao era CSS por pagina -- era :hover "preso" pelo
   toque em alguns aparelhos/paginas e nao noutros, um acidente de UA, nao um estado
   desenhado. mToggle() (repetido em 33 paginas) passa a marcar aria-expanded no botao;
   esta regra fixa o mesmo teal-claro do hover, de proposito, sempre que a gaveta esta'
   aberta -- deixa de depender do aparelho. */
:root:root .m-burger[aria-expanded="true"]{background:var(--teal-50)!important;border-color:var(--teal-300)!important}
:root:root a[aria-label="Submit parameters"] svg{color:var(--teal-700)}
:root:root .deskgloss{display:none!important} /* a página já decidiu: o glossário mora no menu */
/* SETA UNICA (Cristiano, 25/09, rd_seta_back: "B: so' a seta em todas"). As tres variantes
   que existiam -- .m-back (28 telas, entidade &larr; pequena), .av2-back (analyze/defect_card,
   chevron de texto + palavra) e #dneSeta (a seta de fallback do voltar_analise.js, ja' desenhada
   assim hoje mais cedo) -- viram o MESMO componente: 40x44, tokens, chevron em CSS puro
   (::before, borda girada, sem entidade), sem palavra visivel. font-size:0 apaga o que cada
   pagina tem escrito dentro (a entidade do .m-back, o "Back"/"Find & Fix" do .av2-back) sem
   editar as 30 paginas -- so' o aria-label continua contando a palavra pro leitor de tela
   ("Back", igual nos tres; o .av2-back nao tinha aria-label nenhum antes, entrou junto). */
:root:root .m-back,:root:root .av2-back,:root:root #dneSeta{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;width:40px!important;min-height:var(--control-h)!important;
  padding:0!important;margin:0!important;flex:0 0 auto;
  background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--hairline)!important;border-radius:var(--r-hbtn)!important;
  font-size:0!important;text-decoration:none!important;cursor:pointer;white-space:nowrap;
  box-shadow:var(--edge-sunk),0 1px 0 rgba(var(--shadow-rgb),.04)!important;
  transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
:root:root .m-back:hover,:root:root .av2-back:hover,:root:root #dneSeta:hover{
  background:var(--teal-50)!important;border-color:var(--teal-300)!important}
:root:root .m-back::before,:root:root .av2-back::before,:root:root #dneSeta::before{
  content:'';display:block;width:9px;height:9px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:3px}

/* botão primário · gradiente B, nível 2 (elevado) */
:root:root #btn,:root:root #btnLogin,:root:root #btnAnalyze,:root:root #btnTeach,:root:root .srow #qgo,:root:root .rfilter #rgo,
:root:root .volta button:not(.ghost),:root:root body>.box>button:not(.esqueci){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:var(--control-h)!important;
  padding:0 var(--sp-7)!important;border:0!important;border-radius:var(--r-ctl)!important;
  background-color:var(--primary-grad-from)!important;background-image:linear-gradient(180deg,var(--primary-grad-from),var(--primary-grad-to))!important;
  color:var(--on-primary)!important;font:600 14px/1 var(--font-ui)!important;box-shadow:var(--edge-light),var(--shadow-hover)!important;cursor:pointer;
  transition:box-shadow var(--dur-fast) var(--ease-standard)}
:root:root #btn:hover,:root:root #btnLogin:hover,:root:root #btnAnalyze:hover,:root:root .srow #qgo:hover,:root:root .rfilter #rgo:hover,:root:root body>.box>button:not(.esqueci):hover{
  background-color:var(--primary-grad-hover-from)!important;background-image:linear-gradient(180deg,var(--primary-grad-hover-from),var(--primary-grad-hover-to))!important}
:root:root #btn:active,:root:root #btnLogin:active,:root:root #btnAnalyze:active,:root:root .srow #qgo:active,:root:root .rfilter #rgo:active,:root:root body>.box>button:not(.esqueci):active{
  background-image:none!important;background-color:var(--primary-press)!important;box-shadow:var(--edge-press)!important}
:root:root button:disabled{opacity:.45;pointer-events:none}
:root:root body>.box>button:not(.esqueci),:root:root #btn,:root:root #btnAnalyze{width:100%}

/* ================================================================ 5. MENU · nível 3 (sobreposição) */
/* ACHADO AO LEVAR A GAVETA PRO ANALYZE (Cristiano, 25/09, "o menu sanduiche esta zuado"):
   esta secao nunca cobriu width/text-align/text-decoration -- as outras 4 telas com gaveta
   ficavam certas so' porque cada uma tem o PROPRIO bloco local repetindo essas 3
   propriedades (mnav-css/desknav-uni e equivalentes). O <a> ate' disfarça (bloco = largura
   cheia por padrao), mas o <button class="edutrig"> nao: elemento de formulario nao
   segue a largura do bloco por conta propria mesmo com display:flex, entao ficava do
   tamanho do proprio conteudo (metade da barra) e com o texto centralizado (padrao do
   navegador pra botao). Sem text-decoration:none, o <a> tambem sublinhava, cru. Motivo de
   trazer pra ca' em vez de copiar o bloco local de novo (regra do dia, "pela folha global
   onde der"): assim as 5 telas leem da mesma fonte, e o bloco local das outras 4 fica
   redundante-mas-inofensivo (regra 16), nao mais a unica fonte de verdade. */
:root:root .m-menu{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;
  box-shadow:var(--shadow-modal)!important;right:var(--sp-5)!important;padding:var(--sp-2) 0}
:root:root .m-menu a,:root:root .m-menu .edutrig{display:flex!important;align-items:center;gap:var(--sp-3);min-height:var(--control-h);
  width:100%!important;box-sizing:border-box!important;text-align:left!important;text-decoration:none!important;
  padding:0 var(--sp-7)!important;color:var(--ink)!important;background:transparent!important;font:600 14px/1.3 var(--font-ui)!important;
  border-bottom:1px solid var(--hairline)!important;border-left:3px solid transparent;cursor:pointer}
:root:root .m-menu a.hl{background:var(--teal-50)!important;border-left-color:var(--teal)!important;color:var(--ink)!important}
:root:root .m-menu .edutrig .edut{color:var(--ink)!important;font-weight:600!important}
:root:root .m-menu .edutrig .educ{background:var(--teal-50)!important;color:var(--teal-700)!important}
:root:root .m-menu .edutrig .edua{color:var(--steel)!important;margin-left:auto}
:root:root .m-menu .edugrp a{padding-left:var(--sp-12)!important;background:var(--soapstone)!important;font-weight:500!important}
/* Achado da MENTOR (25/09, item 2): o icone da camera de "Analyze my cut", dentro da
   gaveta, e' #1E94A8 cru no style='' do svg, repetido nas 33 paginas que tem a gaveta --
   uma regra aqui alcanca todas (attr selector mirando a cor exata, !important vence o
   inline, mesma tecnica do item 3 de hoje mais cedo). */
:root:root .m-menu svg[style*="#1E94A8" i]{color:var(--teal-700)!important}
/* SIGN OUT DEIXA DE SER ERROR (25/09/2026, Cristiano via MENTOR/DESIGN, commit a4b46fb do
   DESIGN.md): vermelho passa a ter DOIS papeis -- a unica coisa que muda de verdade (erro,
   falha), e um estado que falhou. Sair da conta nao destroi nada, entao empresta o --steel em
   vez do --error. Regra global: alcanca toda pagina com a gaveta, sem editar cada uma (as
   regras locais mortas -- #B3261E e var(--red), sombreadas por esta ha' muito -- ficam como
   estao, regra 16). As 33 paginas de cards/ NAO mudam com isto: o link la' e' so' .signout-item
   (sem a classe .signout, bug de atributo duplicado antigo), cai na regra generica .m-menu a
   (--ink) -- fora de escopo, o _redirects ja' fecha essas paginas com 301! desde 20/08. */
:root:root .m-menu .signout{color:var(--steel)!important}
:root:root #mScrim{background:var(--scrim)!important;-webkit-backdrop-filter:var(--blur-scrim);backdrop-filter:var(--blur-scrim)}
:root:root #dneLB,:root:root #lightbox,:root:root .modal{background:rgba(17,19,28,.92)!important}
:root:root .modalbox{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-modal)}

/* ================================================================ 6. HOME */
:root:root .hubwrap{max-width:720px!important;padding:var(--sp-12) var(--sp-7) var(--sp-13)!important}
:root:root .hubhead{text-align:center;margin-bottom:var(--sp-11)!important;padding:var(--logo-clear-mobile)}
:root:root .hubkerf{display:none!important}
:root:root .pan{display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--sp-5)!important;background:transparent!important;
  border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important}
:root:root .pcell{background:var(--surface)!important;border:1px solid var(--hairline);border-radius:var(--r-panel);box-shadow:var(--shadow-card)!important;
  padding:var(--sp-7) var(--sp-12) var(--sp-7) var(--sp-7)!important;min-height:112px;
  transition:box-shadow var(--dur-med) var(--ease-standard),border-color var(--dur-med) var(--ease-standard)}
:root:root .pcell:hover{background:var(--surface)!important;border-color:var(--teal-300);box-shadow:var(--shadow-hover)!important}
:root:root .pcell h3{font-size:15px!important;font-weight:600!important;color:var(--ink)!important;display:flex;align-items:center;gap:var(--sp-3)}
:root:root .pcell p{font-size:12.5px!important;color:var(--steel)!important}
:root:root .pcell .harw{color:var(--steel)!important;top:var(--sp-7)!important;right:var(--sp-7)!important}
:root:root .pcell[href="analyze.html"]{grid-column:1/-1;min-height:0;padding:var(--sp-9) var(--sp-13) var(--sp-9) var(--sp-9)!important}
:root:root .pcell[href="analyze.html"] h3{font-size:18px!important}
:root:root .pcell[href="analyze.html"] h3 svg{color:var(--teal-700);width:22px;height:22px}
:root:root .pan-ref{grid-template-columns:1fr 1fr!important}
@media(max-width:380px){:root:root .pan{grid-template-columns:1fr!important}}
:root:root .edubar{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-panel)!important;
  color:var(--ink)!important;box-shadow:var(--shadow-card);min-height:56px}
:root:root .edubar:hover{border-color:var(--teal-300)!important;box-shadow:var(--shadow-hover)}
:root:root .edubar .edut{color:var(--ink)!important;font-weight:600!important;font-size:15px!important}
:root:root .edubar .educ{background:var(--teal-50)!important;color:var(--teal-700)!important;font-weight:700!important}
:root:root .edubar .edua{color:var(--steel)!important}

/* ================================================================ 7. RODAPÉ · o chão, gradiente Ink do kit */
:root:root .footer{background:var(--brand-plate)!important;border:0!important;padding:var(--sp-12) var(--sp-11)!important;margin-top:var(--sp-13);text-align:center}
:root:root .footer .footer-tag,:root:root .footer .tagline{color:var(--soapstone)!important;font:700 11px/1.4 var(--font-ui)!important;letter-spacing:.14em!important;text-transform:uppercase}
/* Achado da DESIGN (medido ao vivo, contraste.teste.mjs): --teal (#1294A2) sobre soapstone
   dava 3,26:1 no rotulo do rodape, 11px negrito -- reprova (precisa 4,5:1). No v211 esse par
   era #0F6E7E, 4,97:1, passava: regressao da repintura. --teal-700 sobre soapstone da' 4,95:1.
   Uma linha aqui conserta as 21 telas que leem este rotulo, em vez de 21 sobrescritas por
   pagina. */
:root:root .footer .footer-tag .accent,:root:root .footer .tagline .accent{color:var(--teal-700)!important}
:root:root .footer .meta,:root:root .footer-meta{color:var(--aluminum)!important}

/* ================================================================ 8. CAPA DE PÁGINA, SEÇÃO, CARTÃO (nível 1) */
:root:root .cover,:root:root body.dneid .cover{max-width:1000px!important;padding:var(--sp-11) var(--sp-7) var(--sp-7)!important;background:transparent!important}
:root:root .cover h1,:root:root body.dneid .cover h1{font-size:24px!important;margin:0 0 var(--sp-3)!important}
:root:root body.dneid .cover:after{display:none!important}
:root:root .cover .subtitle,:root:root body.dneid .cover .subtitle,:root:root .anchor{font-size:15px!important;color:var(--steel)!important;margin:0!important}
:root:root .anchor{background:transparent!important;border:0!important;padding:0!important}
:root:root .anchor b{color:var(--ink)!important}
:root:root .container,:root:root body.dneid .container{max-width:1000px!important;padding:var(--sp-3) var(--sp-7) var(--sp-13)!important}
:root:root body.dneid .section,:root:root .sec,:root:root .card,:root:root .bluf,:root:root .vdx .ctrlcard,:root:root .analyze-card,:root:root body>.box,:root:root .diag{
  background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;box-shadow:var(--shadow-card)!important}
:root:root body.dneid .section{padding:var(--sp-10)!important;margin:0 0 var(--sp-7)!important}
:root:root body.dneid .section h2,:root:root .section-title{display:flex!important;align-items:center;gap:var(--sp-5);font-size:18px!important;font-weight:600!important;color:var(--ink)!important;
  border:0!important;padding:0!important;margin:0 0 var(--sp-7)!important}
:root:root body.dneid .section h2 .num,:root:root .section-title .num,:root:root .stp .num,:root:root .num{
  display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:var(--num-badge-d)!important;height:var(--num-badge-d)!important;border-radius:50%!important;
  background:var(--ink)!important;color:var(--soapstone)!important;font:700 13px/1 var(--font-ui)!important;font-variant-numeric:tabular-nums}
:root:root .section-title .title{font-size:18px!important;font-weight:600!important;color:var(--ink)!important}

/* etiqueta (Label Bold caps) */
:root:root label,:root:root .symptom-strip .label,:root:root .vdx .eye,:root:root .hdr-tag,:root:root .stepslabel,:root:root .xref .xref-label,
:root:root .vdx .cc b,:root:root .hero .k,:root:root .blk .k,:root:root .material-note b{
  font:700 10.5px/1.35 var(--font-ui)!important;letter-spacing:.08em!important;text-transform:uppercase;color:var(--steel)!important}

/* chips e selos */
:root:root .badge,:root:root .vdx .chip,:root:root .pill,:root:root .bdg,:root:root .cover .badge,:root:root .status-badge,:root:root .facts span,:root:root .tp-chip{
  display:inline-flex!important;align-items:center;gap:var(--sp-2);border-radius:var(--r-chip)!important;border:1px solid var(--hairline)!important;
  background:var(--surface)!important;color:var(--steel)!important;font:700 10.5px/1 var(--font-ui)!important;letter-spacing:.06em!important;
  text-transform:uppercase;padding:var(--sp-2) var(--sp-4)!important}
:root:root .badge.high{background:var(--error-bg)!important;color:var(--error)!important;border-color:var(--error-line)!important}
:root:root .badge.medium{background:var(--warn-bg)!important;color:var(--warn-text)!important;border-color:var(--warn-line)!important}
:root:root .bdg.conf-high{background:var(--good-bg)!important;color:var(--good-text)!important;border-color:var(--good-line)!important}
:root:root .bdg.conf-medium,:root:root .bdg.conf-low{background:var(--warn-bg)!important;color:var(--warn-text)!important;border-color:var(--warn-line)!important}
:root:root .vdx .chip{min-height:var(--control-h);padding:0 var(--sp-6)!important;font-size:12px!important;letter-spacing:0!important;text-transform:none;color:var(--ink)!important;cursor:pointer;font-weight:600!important}
:root:root .vdx .chip i{font-style:normal;color:var(--steel);font-variant-numeric:tabular-nums}
:root:root .vdx .chip.on{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--soapstone)!important}
:root:root .vdx .chip.on i{color:var(--aluminum)!important;background:transparent!important}

/* campos · escavados no cartão */
:root:root input:not([type=radio]):not([type=checkbox]):not([type=file]),:root:root select,:root:root textarea{
  min-height:var(--control-h)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;background-color:var(--surface)!important;
  color:var(--text)!important;font:400 15px/1.3 var(--font-ui)!important;padding:0 var(--sp-5)!important;box-shadow:var(--edge-sunk)!important;box-sizing:border-box}
:root:root textarea{padding:var(--sp-4) var(--sp-5)!important}
:root:root input:focus,:root:root select:focus,:root:root textarea:focus{outline:none!important;border-color:var(--teal-700)!important;box-shadow:var(--ring-focus)!important}

/* aviso · a única borda esquerda (3px de status) */
:root:root .test-warn,:root:root .vdx .zero,:root:root .zero,:root:root .note,:root:root .callout,:root:root .preflight-card,:root:root .ajuda{
  background:var(--warn-bg)!important;border:1px solid var(--warn-line)!important;border-left:3px solid var(--warn)!important;border-radius:var(--r-sm)!important;
  color:var(--text)!important;box-shadow:none!important;padding:var(--sp-5) var(--sp-6)!important}
:root:root .ajuda{background:var(--soapstone)!important;border-color:var(--hairline)!important;border-left-color:var(--teal)!important}
:root:root .zero b,:root:root .test-warn b{color:var(--warn-text)!important}
:root:root .tw-icon,:root:root .pf-icon,:root:root .ph-icon,:root:root .preflight-icon{display:none!important}

/* ================================================================ 9. FOTO · retângulo 4/3 escuro */
:root:root img[data-foto],:root:root .vdx .ph img,:root:root .hero-img .img-slot img,:root:root .recipe-photo img,:root:root .viz img,
:root:root img.hero-photo,:root:root body.dneid img.hero-photo,:root:root .pprev img,:root:root .gallery img{
  display:block;width:100%!important;aspect-ratio:4/3;height:auto!important;object-fit:cover!important;background:var(--photo-fill)!important;border-radius:0!important;border:0!important;outline:0!important;box-shadow:none!important}
:root:root .vdx .ph,:root:root .hero-img .img-slot,:root:root .recipe-photo,:root:root .viz,:root:root .bluf-video{
  position:relative;aspect-ratio:4/3;background:var(--photo-fill)!important;overflow:hidden;border:0!important;border-radius:0!important}
:root:root .hero-img .placeholder-card{background:var(--photo-fill)!important;border:0!important;height:100%!important;display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;padding:var(--sp-5)!important}
:root:root .hero-img .placeholder-card .ph-label{color:var(--aluminum)!important;font:600 11px/1.35 var(--font-ui)!important;text-align:left!important}
/* selo sobre a foto: chapa Soapstone, texto Ink (16,6:1), lê sobre qualquer foto */
:root:root .vdx .pt,:root:root .recipe-photo .status-badge,:root:root .vdx .ph .pt{
  position:absolute;left:var(--sp-4);top:var(--sp-4);background:var(--soapstone)!important;color:var(--ink)!important;border:0!important;
  box-shadow:0 1px 2px rgba(var(--shadow-rgb),.35);border-radius:var(--r-chip)!important;font:700 10.5px/1 var(--font-ui)!important;
  letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-2) var(--sp-4)!important}

/* ================================================================ 10. FIND & FIX */
:root:root .vdx .mast{max-width:1000px;margin:0 auto;padding:var(--sp-11) var(--sp-7) var(--sp-5)!important;background:transparent!important;text-align:left!important}
:root:root .vdx .mast{display:block!important}
:root:root .vdx .mast h1{font-size:24px!important;margin:0 0 var(--sp-3)!important}
:root:root .vdx .mast p{color:var(--steel)!important;font-size:15px!important;max-width:60ch;margin:0!important;padding:0!important}
:root:root .vdx .kerf{display:none!important}
:root:root .vdx .ctrl{max-width:1000px;margin:0 auto;padding:0 var(--sp-7)!important;position:static!important;background:transparent!important}
:root:root .vdx .ctrlcard{padding:var(--sp-6)!important}
:root:root .srow{display:flex!important;gap:var(--sp-3)!important;align-items:stretch}
:root:root .srow .search,:root:root .vdx .search{flex:1;min-width:0}
:root:root .srow #qclear{min-width:var(--control-h);min-height:var(--control-h);border:1px solid var(--hairline)!important;background:var(--surface)!important;color:var(--steel)!important;border-radius:var(--r-ctl)!important}
:root:root .vdx .chips{display:flex!important;gap:var(--sp-3)!important;overflow-x:auto;padding:var(--sp-5) 0 var(--sp-1)!important;margin:0!important}
:root:root .vdx .wrap{max-width:1000px;margin:0 auto;padding:var(--sp-7)!important}
:root:root .vdx .eye{margin:var(--sp-11) 0 var(--sp-5)!important;border:0!important}
:root:root .vdx .grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:var(--sp-7)!important;align-items:start!important}
:root:root .vdx .dcard{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;overflow:hidden;
  box-shadow:var(--shadow-card)!important;padding:0!important;display:flex;flex-direction:column;transition:box-shadow var(--dur-med) var(--ease-standard)}
:root:root .vdx .dcard:hover,:root:root .vdx .dcard.vaberto{box-shadow:var(--shadow-hover)!important}
:root:root .vdx .dcard.vaberto{border-color:var(--teal-300)!important}
:root:root .vdx .phrow{display:block!important;margin:0!important;gap:0!important;padding:0!important}
:root:root .vdx .ph,:root:root .vdx .ph.bad,:root:root .vdx .ph.good{border:0!important;height:auto!important;width:100%!important;margin:0!important;border-radius:0!important}
:root:root .vdx .ph img{position:absolute;inset:0;height:100%!important;aspect-ratio:auto}
:root:root .vdx .dcard h3{font-size:16px!important;font-weight:600!important;color:var(--ink)!important;margin:0!important;padding:var(--sp-6) var(--sp-7) var(--sp-3)!important;line-height:1.35}
:root:root .vdx .dcard .vabrir{margin:auto var(--sp-7) var(--sp-7)!important;width:calc(100% - 32px);color:var(--teal-700)!important}
:root:root .vdx .dcard .vabrir:after{color:var(--steel)!important}
:root:root .vdx .cr{display:grid!important;gap:var(--sp-5)!important;padding:0 var(--sp-7) var(--sp-7)!important}
:root:root .vdx .cc{background:var(--soapstone)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;padding:var(--sp-5)!important;box-shadow:var(--edge-sunk)}
:root:root .vdx .cc.fix{background:var(--surface)!important;border-color:var(--teal-300)!important;box-shadow:none}
:root:root .vdx .cc.fix b{color:var(--teal-700)!important}
:root:root .vdx .cc ul{margin:var(--sp-2) 0 0!important;padding-left:var(--sp-9)!important}
:root:root .vdx .cc li{font-size:14px!important;color:var(--text)!important;line-height:1.45;margin:var(--sp-1) 0}
:root:root .stp,:root:root .vdx .stp,:root:root .ar-row .stp{font-variant-numeric:tabular-nums}
:root:root .vdx .cc .stp{display:inline-block;margin-left:var(--sp-1);font-weight:600;color:var(--ink);background:var(--teal-50);border-radius:var(--r-sm);padding:1px var(--sp-2)}
:root:root .vdx .preflight{max-width:1000px;margin:0 auto!important;padding:0 var(--sp-7) var(--sp-7)!important;background:transparent!important;border:0!important}
:root:root .vdx .adjrule{margin:0!important;padding:0!important;background:transparent!important;border:0!important}
:root:root .vdx .adjrule .box{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;box-shadow:var(--shadow-rec)!important;padding:var(--sp-7)!important;max-width:none!important;margin:0!important}
:root:root .vdx .adjrule b{font:700 10.5px/1.35 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)!important}
:root:root .ar-row{display:flex!important;justify-content:space-between;align-items:center;gap:var(--sp-5);min-height:var(--control-h);border-top:1px solid var(--hairline)!important;padding:0!important}
:root:root .ar-k{font-size:14px!important;font-weight:500!important;color:var(--ink)!important}
:root:root .ar-row .stp{background:var(--teal-50)!important;color:var(--ink)!important;border:0!important;border-radius:var(--r-sm)!important;padding:var(--sp-1) var(--sp-3)!important;font:600 13px/1.3 var(--font-ui)!important;box-shadow:none!important;min-height:0!important}
:root:root .ar-lead,:root:root .ar-foot{font-size:13px!important;color:var(--steel)!important}
:root:root .vestado,:root:root .pestado,:root:root .vdx .empty{color:var(--steel)!important;font-size:14px!important;background:transparent!important;border:0!important}
:root:root .vestado.ruim,:root:root .pestado.ruim{color:var(--error)!important}

/* ================================================================ 11. FICHA DE DEFEITO (cards/) */
:root:root .card>.hdr,:root:root .hdr{background:transparent!important;border:0!important;padding:var(--sp-9) var(--sp-10) var(--sp-5)!important;color:var(--ink)!important}
:root:root .hdr-id{font:700 12px/1 var(--font-ui)!important;letter-spacing:.08em;color:var(--teal-700)!important;font-variant-numeric:tabular-nums}
:root:root .hdr-title{font-size:22px!important;margin:var(--sp-3) 0!important}
:root:root .hdr-subtitle{color:var(--steel)!important;font-size:14px!important}
:root:root .hdr-meta-row{display:flex!important;flex-wrap:wrap;gap:var(--sp-3)!important;margin-top:var(--sp-5)!important}
:root:root .focus-link{color:var(--teal-700)!important;font-size:12.5px!important;font-weight:600!important;background:transparent!important;border:0!important;padding:0!important;min-height:var(--control-h);display:inline-flex;align-items:center}
:root:root .divider{height:1px!important;background:var(--hairline)!important;margin:0!important}
:root:root .hero{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:var(--sp-5)!important;padding:var(--sp-7) var(--sp-10)!important;background:transparent!important}
:root:root .hero-img{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-panel)!important;overflow:hidden;box-shadow:var(--shadow-rec)!important;padding:0!important}
:root:root .hero-img .hero-tag{position:static!important;display:block;background:transparent!important;border:0!important;padding:var(--sp-4) var(--sp-5) 0!important;
  font:700 10.5px/1.3 var(--font-ui)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--error)!important}
:root:root .hero-img.correct .hero-tag{color:var(--good-text)!important}
:root:root .hero-img .hero-caption{padding:var(--sp-1) var(--sp-5) var(--sp-5)!important;font-size:13px!important;font-weight:600;color:var(--ink)!important;background:transparent!important;position:static!important}
:root:root .hero-img .hero-sub{color:var(--steel)!important;font-weight:400;font-size:12px!important;margin-top:var(--sp-1)}
:root:root .card>.body,:root:root .body{padding:var(--sp-3) var(--sp-10) var(--sp-10)!important}
:root:root .symptom-strip{background:var(--soapstone)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;box-shadow:var(--edge-sunk);padding:var(--sp-6)!important;margin:0 0 var(--sp-7)!important}
:root:root .symptom-strip .text{color:var(--text)!important;font-size:15px!important;margin-top:var(--sp-2)}
:root:root .card .preflight{display:block!important;background:transparent!important;border:0!important;padding:0!important;margin:0 0 var(--sp-9)!important;color:var(--steel);font-size:13.5px}
:root:root .card .preflight .pf-text b{color:var(--ink)!important}
:root:root .scenario{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;box-shadow:var(--shadow-rec)!important;overflow:hidden;margin:var(--sp-7) 0!important}
:root:root .scenario .scn-head{display:flex!important;justify-content:space-between;gap:var(--sp-3);background:var(--soapstone)!important;border-bottom:1px solid var(--hairline)!important;padding:var(--sp-5) var(--sp-7)!important}
:root:root .scenario .scn-gas,:root:root .scenario.n2 .scn-gas,:root:root .scenario.o2 .scn-gas,:root:root .scenario.none .scn-gas{color:var(--ink)!important;background:transparent!important;font:700 12px/1.3 var(--font-ui)!important}
:root:root .scenario .scn-thick{color:var(--steel)!important;font-size:12px!important}
:root:root .steps{padding:0!important;margin:0!important}
:root:root .step{background:transparent!important;border:0!important;border-bottom:1px solid var(--hairline)!important;border-radius:0!important;padding:var(--sp-6) var(--sp-7)!important;margin:0!important;box-shadow:none!important}
:root:root .step .step-num{font:700 10.5px/1 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)!important;background:transparent!important;padding:0!important}
:root:root .step .step-action{font-size:15px!important;font-weight:600!important;color:var(--ink)!important;margin:var(--sp-2) 0!important}
:root:root .step .step-where{font-size:13px!important;color:var(--steel)!important}
:root:root .step .step-revert{font-size:12.5px!important;color:var(--steel)!important;background:transparent!important;border:0!important;padding:var(--sp-2) 0 0!important}
:root:root .applied-example{background:var(--soapstone)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;margin:var(--sp-7)!important;padding:var(--sp-6)!important}
:root:root .xref{border-top:1px solid var(--hairline)!important;background:transparent!important;padding:var(--sp-7) 0!important}
:root:root .xref a{color:var(--teal-700)!important;font-weight:600;min-height:var(--control-h);display:inline-flex;align-items:center}
:root:root .card{max-width:1000px!important;margin:var(--sp-7) auto!important;overflow:hidden}
:root:root .card>.desk-back{margin:var(--sp-7) var(--sp-10) 0!important}

/* ================================================================ 12. PARAMETERS e a ficha */
:root:root .rfilter{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)!important;
  background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;box-shadow:var(--shadow-card)!important;padding:var(--sp-6)!important;margin:0 0 var(--sp-9)!important}
:root:root .rfilter .rsearch{grid-column:1/-1}
:root:root .rfilter #fCount{grid-column:1/-1;font-size:12px;color:var(--steel)}
:root:root #auxlink{display:flex!important;justify-content:space-between;align-items:center;min-height:var(--control-h);background:var(--surface)!important;border:1px solid var(--hairline)!important;
  border-radius:var(--r-panel)!important;color:var(--ink)!important;font-weight:600!important;padding:0 var(--sp-7)!important;box-shadow:var(--shadow-rec)!important;margin-bottom:var(--sp-11)!important;text-decoration:none}
:root:root .material-header{display:flex;align-items:center;gap:var(--sp-5);border:0!important;padding:0!important;margin:var(--sp-11) 0 var(--sp-5)!important;background:transparent!important}
:root:root .material-header h2{font-size:18px!important;font-weight:600!important;color:var(--ink)!important;margin:0!important}
:root:root .material-header .gas-pill{border-radius:var(--r-chip)!important;font:700 10.5px/1 var(--font-ui)!important;padding:var(--sp-2) var(--sp-4)!important}
:root:root .recipe-grid,:root:root .matrix-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:var(--sp-7)!important}
:root:root .recipe-card{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;overflow:hidden;box-shadow:var(--shadow-card)!important;
  text-decoration:none!important;color:inherit!important;display:flex;flex-direction:column;transform:none!important;transition:box-shadow var(--dur-med) var(--ease-standard)}
:root:root .recipe-card.validated:hover{box-shadow:var(--shadow-hover)!important;border-color:var(--teal-300)!important}
:root:root .recipe-card.pending{opacity:1}
:root:root .recipe-meta{padding:var(--sp-6) var(--sp-7) var(--sp-7)!important;display:flex;flex-direction:column;gap:var(--sp-2)}
:root:root .recipe-thickness{font:600 23px/1.2 var(--font-ui)!important;color:var(--ink)!important;font-variant-numeric:tabular-nums}
:root:root .recipe-thickness .unit{font-size:14px!important;color:var(--steel)!important;font-weight:500!important}
:root:root .recipe-spec{font-size:13px!important;color:var(--steel)!important;font-variant-numeric:tabular-nums}
:root:root .recipe-spec b{color:var(--ink)!important;font-weight:600!important}
:root:root .recipe-link{color:var(--teal-700)!important;font:600 13px/1 var(--font-ui)!important;margin-top:auto;padding-top:var(--sp-3)}
/* a ficha · Parameter | Value nunca rola para o lado (Cristiano, 18/08) */
:root:root #recipe-root .cover .meta{color:var(--steel)!important;font-size:13px!important;font-variant-numeric:tabular-nums}
:root:root #recipe-root .cover .meta b{color:var(--ink)!important}
:root:root .param-table{width:100%!important;table-layout:fixed!important;border-collapse:separate!important;border-spacing:0;border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;overflow:hidden;background:var(--surface)!important}
:root:root .tscroll:has(> .param-table),:root:root body.dneid .tscroll:has(> .param-table){overflow-x:visible!important}
:root:root .param-table th{background:var(--soapstone)!important;color:var(--steel)!important;font:700 10.5px/1.35 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:var(--sp-4) var(--sp-5)!important;border-bottom:1px solid var(--hairline)!important}
:root:root .param-table td{padding:0 var(--sp-5)!important;height:44px;border-bottom:1px solid var(--hairline)!important;font-size:14px!important;color:var(--text)!important;overflow-wrap:anywhere;background:var(--surface)!important;font-variant-numeric:tabular-nums}
:root:root .param-table tr:last-child td{border-bottom:0!important}
:root:root .param-table .key{width:48%;color:var(--steel)!important;font-weight:500}
:root:root .param-table .val{color:var(--ink)!important;font-weight:600}
:root:root .param-table .val.highlight{background:var(--teal-50)!important;box-shadow:inset 3px 0 0 var(--teal)}
:root:root .val .dne-foco-acao{color:var(--teal-700)!important;font-weight:600}
:root:root .fl-tabs{display:inline-flex!important;gap:var(--sp-1);background:var(--soapstone)!important;border:1px solid var(--hairline);border-radius:var(--r-ctl);padding:3px;box-shadow:var(--edge-sunk)}
:root:root .fl-tab{min-height:38px;padding:0 var(--sp-6)!important;border:0!important;border-radius:var(--r-sm)!important;background:transparent!important;color:var(--steel)!important;font:600 13px/1 var(--font-ui)!important}
:root:root .fl-tab.active{background:var(--surface)!important;color:var(--ink)!important;box-shadow:var(--shadow-hover)!important}
/* aviso de origem no topo da ficha: o único trecho que muda entre as três origens */
:root:root .origem{display:flex;gap:var(--sp-3);align-items:baseline;border-radius:var(--r-sm);padding:var(--sp-5) var(--sp-6);margin:0 0 var(--sp-7);font-size:13.5px;border:1px solid var(--good-line);border-left:3px solid var(--good);background:var(--good-bg);color:var(--text)}
:root:root .origem b{color:var(--good-text);font:700 10.5px/1.35 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
:root:root .tier2-table th{background:var(--soapstone)!important;color:var(--steel)!important;font:700 10.5px/1.35 var(--font-ui)!important;letter-spacing:.08em}
:root:root .tier2-table td{font-variant-numeric:tabular-nums;color:var(--text)!important}

/* ================================================================ 13. MAINTENANCE HOW-TO */
:root:root .tiles{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;gap:var(--sp-7)!important}
:root:root .tile{background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-panel)!important;box-shadow:var(--shadow-card)!important;
  padding:var(--sp-7)!important;text-decoration:none!important;color:inherit!important;transform:none!important;transition:box-shadow var(--dur-med) var(--ease-standard)}
:root:root .tile:hover{box-shadow:var(--shadow-hover)!important;border-color:var(--teal-300)!important}
:root:root .tile .tb{font:700 10.5px/1 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)!important;background:transparent!important;padding:0!important}
:root:root .tile h3{font-size:16px!important;font-weight:600!important;color:var(--ink)!important;margin:var(--sp-3) 0 var(--sp-2)!important}
:root:root .tile p{font-size:13px!important;color:var(--steel)!important;margin:0!important}
:root:root .bluf{padding:0!important;overflow:hidden;margin-bottom:var(--sp-9)!important}
:root:root .bluf-video{display:flex!important;flex-direction:column;justify-content:flex-end;padding:var(--sp-7)!important;color:var(--soapstone)!important;text-decoration:none!important}
:root:root .bluf-video .play{width:56px;height:56px;border-radius:50%;background:var(--soapstone)!important;color:var(--ink)!important;display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--font-ui);margin-bottom:var(--sp-5)}
:root:root .bluf-video .vt{font:600 16px/1.3 var(--font-ui)!important;color:var(--soapstone)!important}
:root:root .bluf-video .vs{font-size:12.5px!important;color:var(--aluminum)!important}
:root:root .bluf .facts{display:flex!important;flex-wrap:wrap;gap:var(--sp-3)!important;padding:var(--sp-7)!important}
:root:root .stepslabel{margin:var(--sp-11) 0 var(--sp-5)!important;display:block}
:root:root ol.steps,:root:root .sec ol.steps{list-style:none!important;counter-reset:passo;display:grid;gap:var(--sp-5)!important}
:root:root ol.steps>li{counter-increment:passo;position:relative;background:var(--surface)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;
  box-shadow:var(--shadow-card)!important;padding:var(--sp-7) var(--sp-7) var(--sp-7) 64px!important;font-size:16px!important;line-height:1.5;color:var(--text)!important;overflow:hidden}
:root:root ol.steps>li:before{content:counter(passo)!important;position:absolute;left:var(--sp-7);top:var(--sp-7);width:32px;height:32px;border-radius:50%;background:var(--ink)!important;
  color:var(--soapstone)!important;font:700 14px/32px var(--font-ui)!important;text-align:center;font-variant-numeric:tabular-nums}
:root:root ol.steps>li b{color:var(--ink)!important;font-weight:600!important}
:root:root ol.steps>li .viz{margin:var(--sp-5) 0 0!important;border-radius:var(--r-ctl)!important}
:root:root .viz .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-3) var(--sp-5);background:var(--brand-plate)!important;color:var(--soapstone)!important;font-size:12px!important}

/* ================================================================ 14. ANALYZE MY CUT */
:root:root body>.wrap{max-width:720px!important;padding:var(--sp-9) var(--sp-7) var(--sp-13)!important}
:root:root body>.wrap>.card{padding:var(--sp-10)!important;margin:0 0 var(--sp-7)!important}
:root:root body>.wrap>.card h1{font-size:22px!important;margin:0 0 var(--sp-2)!important}
:root:root .wrap .sub,:root:root body>.box .sub{color:var(--steel)!important;font-size:14px!important}
:root:root .grid4,:root:root .grid2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--sp-5) var(--sp-5)!important}
:root:root .grid4 label,:root:root .wrap label{display:block;margin:var(--sp-5) 0 var(--sp-2)!important}
:root:root .grid4 select,:root:root .grid4 input{width:100%}
/* segmentado: trilho escavado, polegar levantado */
:root:root .seg{display:flex!important;gap:var(--sp-1)!important;background:var(--soapstone)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;padding:3px!important;box-shadow:var(--edge-sunk)}
:root:root .seg .opt{flex:1;min-height:38px;display:flex!important;align-items:center;justify-content:center;border-radius:var(--r-sm)!important;background:transparent!important;
  color:var(--steel)!important;font:600 13px/1 var(--font-ui)!important;border:0!important;cursor:pointer}
:root:root .seg .opt.on{background:var(--surface)!important;color:var(--ink)!important;box-shadow:var(--shadow-hover)!important}
:root:root .pbtn,:root:root .micbtn{min-height:56px!important;border:1px dashed var(--teal-300)!important;background:var(--surface)!important;color:var(--ink)!important;border-radius:var(--r-card)!important;font:600 14px/1 var(--font-ui)!important;display:flex!important;align-items:center;justify-content:center;gap:var(--sp-3)}
:root:root .pbtn svg{color:var(--teal-700)}
/* 24/09/2026, achado da SKILL: o display:flex!important acima vencia o style="display:none" com que o
   analyze.html e o intake.html escondem o "Choose from gallery" no iPhone, e o segundo botao voltava,
   contra a decisao de 24/08 (um botao so' no iOS). O botao escondido pela pagina continua escondido. */
:root:root .pbtn[style*="display:none"],:root:root .pbtn[style*="display: none"]{display:none!important}
:root:root .setts{border:1px solid var(--hairline)!important;border-radius:var(--r-ctl)!important;background:var(--soapstone)!important;padding:var(--sp-5)!important;margin:var(--sp-7) 0!important}
:root:root .setts summary{min-height:var(--control-h);display:flex;align-items:center;font-weight:600;color:var(--ink)}
:root:root .setts summary span{color:var(--steel);font-weight:400;font-size:12.5px;margin-left:var(--sp-3)}
/* o resultado */
:root:root .diag{padding:var(--sp-10)!important}
:root:root .diag .badges{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-7)}
:root:root .diag .hero{display:block!important;padding:0!important;margin-bottom:var(--sp-7)!important}
:root:root .diag .hero .v{font:600 18px/1.35 var(--font-ui)!important;color:var(--ink)!important;margin-top:var(--sp-2)}
:root:root .diag .stp{background:var(--soapstone)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;padding:var(--sp-7)!important;margin:0 0 var(--sp-5)!important;box-shadow:var(--edge-sunk)}
:root:root .diag .stp.now{background:var(--surface)!important;border-color:var(--hairline)!important;box-shadow:var(--shadow-hover)!important;padding:var(--sp-9)!important}
:root:root .diag .stp-h{display:flex!important;align-items:center;gap:var(--sp-4);background:transparent!important;padding:0!important}
:root:root .diag .stp-h span{font:700 10.5px/1 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)!important}
:root:root .diag .stp-b{padding:var(--sp-5) 0 0!important}
:root:root .diag .stp .act{font:600 16px/1.35 var(--font-ui)!important;color:var(--ink)!important}
/* READOUT · seta + valor, Red do kit, só aqui. 28px passa como texto grande (3,56:1 sob branco) */
:root:root .diag .stp.now .act em{display:block;font-style:normal!important;font:600 28px/1.15 var(--font-ui)!important;color:var(--change)!important;font-variant-numeric:tabular-nums;margin-top:var(--sp-2);letter-spacing:-.01em}
:root:root .diag .stp .act em{font-style:normal!important;font-weight:600;color:var(--ink)}
:root:root .diag .stp .sz,:root:root .diag .stp .then{font-size:13px!important;color:var(--steel)!important;margin-top:var(--sp-3)}
:root:root .diag .mpath{display:inline-block;margin-top:var(--sp-5);background:var(--soapstone)!important;border:1px solid var(--hairline)!important;border-radius:var(--r-sm)!important;
  padding:var(--sp-2) var(--sp-4)!important;font:600 12.5px/1.4 var(--font-ui)!important;color:var(--ink)!important}
:root:root .diag .zero{display:flex!important;flex-direction:column;gap:var(--sp-1)}
:root:root .delta{border-radius:var(--r-sm)!important;border-width:1px!important;border-style:solid!important;border-left-width:3px!important;padding:var(--sp-5) var(--sp-6)!important}
:root:root .fbbtn{min-height:var(--control-h)!important;border-radius:var(--r-hbtn)!important;border:1px solid var(--hairline)!important;background:var(--surface)!important;color:var(--ink)!important;font:600 13px/1 var(--font-ui)!important}
:root:root .msg.err{color:var(--error)!important;background:var(--error-bg)!important}
:root:root .msg.ok{color:var(--good-text)!important;background:var(--good-bg)!important}

/* ================================================================ 15. SIGN IN */
:root:root body>.box{max-width:400px!important;margin:var(--sp-13) auto!important;padding:var(--sp-11) var(--sp-10)!important;box-shadow:var(--shadow-card),var(--shadow-hover)!important}
:root:root body>.box h1.airis-nome{margin:0!important;padding:var(--logo-clear-mobile) 0 0!important}
:root:root body>.box .sub{text-align:center;margin:var(--sp-2) 0 var(--sp-9)!important}
:root:root body>.box label{display:block;margin:var(--sp-7) 0 var(--sp-2)!important}
:root:root body>.box input{width:100%!important}
:root:root body>.box>button:not(.esqueci){margin-top:var(--sp-9)!important}
:root:root .esqueci{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:var(--control-h);margin-top:var(--sp-3)!important;background:transparent!important;border:0!important;
  color:var(--teal-700)!important;font:600 13.5px/1 var(--font-ui)!important;text-decoration:underline;text-underline-offset:3px;box-shadow:none!important}
:root:root body>.box .foot{text-align:center;margin-top:var(--sp-9)!important;font:700 10.5px/1 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)!important}

:root:root .hidden,:root:root .card.hidden{display:none!important}
:root:root label .hint{text-transform:none!important;letter-spacing:0!important;font-weight:400!important;font-size:12px!important;color:var(--steel)!important}
:root:root .diag .hero{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}
:root:root .diag .stp-h{border:0!important}
:root:root .pslot{border:1px solid var(--hairline)!important;border-radius:var(--r-card)!important;background:var(--soapstone)!important;padding:0!important;overflow:hidden;box-shadow:var(--edge-sunk)}
:root:root .pprev img{max-height:none!important}
:root:root header .hleft{gap:var(--logo-clear-mobile)!important}
@media(min-width:761px){:root:root header .hleft{gap:var(--logo-clear-desktop)!important}}
:root:root .cover,:root:root body.dneid .cover{display:block!important;text-align:left!important}
:root:root .cover .nav-back{margin:0 0 var(--sp-5)!important}
:root:root .param-table td{vertical-align:middle!important}
:root:root .bluf-video{aspect-ratio:16/9!important}
:root:root .hdr{position:relative}
:root:root .hdr .hdr-id{position:static!important;display:inline-block!important;background:transparent!important;border:0!important;padding:0!important;margin:0 0 var(--sp-3)!important;box-shadow:none!important}
:root:root .cover,:root:root body.dneid .cover{box-shadow:none!important;border:0!important}
:root:root .m-menu .edutrig[style*="display:none"]{display:none!important}
/* ================================================================ 16. RODADA 2 · com os insumos reais de 24/09
   Fotos reais: peça escura sobre fundo CLARO de showroom. O bloco escuro vira só o estado
   "carregando"; a foto entra num passe-partout Soapstone com fio, para não vazar no cartão branco. */
:root:root{
  /* CORES DE SISTEMA declaradas (resposta do dono, 24/09: "declaradas"). Texto medido sobre o próprio fundo. */
  --gas-o2:#C00000; --gas-o2-bg:#FCE8E8;       /* 5,51:1 */
  --gas-n2:#1D4ED8; --gas-n2-bg:#DCE7F8;       /* 5,37:1 · era #2563EB, que dá 4,14:1 no fundo */
  --gas-air:#15803D; --gas-air-bg:#ECFDF5;     /* 4,76:1 · era #16A34A, 3,30:1 */
  --gas-none:#5D6371; --gas-none-bg:#F1F3F4;   /* 5,41:1 */
  --gas-o2-soft:var(--gas-o2-bg); --gas-n2-soft:var(--gas-n2-bg); --gas-none-soft:var(--gas-none-bg);
  --action-software:#1D4ED8; --action-software-soft:#EFF4FD;       /* 6,07:1 */
  --action-parameter:#92400E; --action-parameter-soft:#FEF3D9;     /* 6,43:1 · era #D97706 */
  --action-maintenance:#15803D; --action-maintenance-soft:#ECFDF5; /* 4,76:1 */
  --photo-mat:var(--soapstone);
}
/* foto: passe-partout */
:root:root .vdx .ph,:root:root .recipe-photo{margin:var(--sp-3) var(--sp-3) 0!important;width:auto!important;border-radius:var(--r-ctl)!important;
  background:var(--photo-mat)!important;box-shadow:inset 0 0 0 1px var(--hairline)!important}
:root:root .vdx .ph img,:root:root .recipe-photo img{border-radius:var(--r-ctl)!important;background:var(--photo-fill)!important}
/* GALERIA SEMPRE EM 2 COLUNAS, INCLUSIVE A 320px (Cristiano, 27/09/2026, no iPhone; item 2d
   original ficou trancado em auto-fit no dia anterior, achado da DESIGN em 26/09).
   O auto-fit resolvia o estouro do item 2d mas deixava a galeria inconsistente entre receitas:
   .gallery (as ~30 antigas, esta regra) ficava 1 coluna abaixo de ~480px de caixa, e .good-grid
   (as receitas novas, regra propria em recipe.html) ja' fazia isso sempre -- empilhando as duas
   fotos da peca no celular (exemplo dele: G-060). Ele comparou com G-017 (ainda 2 colunas, .gallery
   antes desta troca) e decidiu: "o lado a lado eu achei interessante ... ficou mais agradavel
   visualmente lado a lado" -- SEMPRE 2 colunas, foto menor, clique pra ampliar continua (regra
   de .good-grid em recipe.html leva o mesmo valor, no mesmo commit).
   O minmax(0,1fr) no lugar do minmax(240px,1fr) e' o que evita o estouro que motivou o item 2d:
   a coluna pode encolher ate' 0 de largura minima, e a imagem encolhe com ela (max-width:100%,
   height:auto ja vem da regra da secao 9 acima) em vez de forcar 240px e furar a tela estreita.
   pierce_analysis.html continua com as 2 colunas fixas dele (pierce_enxuto.js:136 reinjeta
   depois, na cascata, so' ali) -- inalterado. */
:root:root .gallery,:root:root body.dneid .gallery{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-3)!important;margin:0!important}
:root:root .gallery img,:root:root body.dneid .gallery img{border-radius:var(--r-ctl)!important;border:1px solid var(--hairline)!important;max-height:none!important;max-width:100%!important}
:root:root .cfotos{display:grid!important;grid-template-columns:1fr 1fr;gap:var(--sp-3)!important;padding:0 var(--sp-7) var(--sp-5)!important}
:root:root .cfoto{margin:0!important;background:transparent!important;border:0!important}
:root:root .cfoto img{border-radius:var(--r-ctl)!important;border:1px solid var(--hairline)!important;aspect-ratio:4/3;object-fit:cover;width:100%}
:root:root .cfoto figcaption{font-size:12px!important;color:var(--steel)!important;line-height:1.4;margin-top:var(--sp-2)!important}

/* Find & Fix · 154 cartões, o maior grupo com 54: duas colunas no celular, cartão compacto */
:root:root .vdx .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-5)!important}
@media(min-width:761px){:root:root .vdx .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}}
:root:root .vdx .dcard h3{font-size:14px!important;padding:var(--sp-4) var(--sp-5) var(--sp-3)!important}
:root:root .vdx .dcard .vabrir{margin:auto var(--sp-3) var(--sp-3)!important;width:calc(100% - 16px);padding:0 var(--sp-3)!important;font-size:12.5px!important}
:root:root .vdx .dcard.vaberto{grid-column:1/-1}
:root:root .vdx .dcard.vaberto h3{font-size:17px!important;padding:var(--sp-6) var(--sp-7) var(--sp-3)!important}
:root:root .vdx .pt{font-size:9.5px!important;padding:var(--sp-1) var(--sp-3)!important}
:root:root .vdx .dcode{display:block;padding:var(--sp-4) var(--sp-5) 0;font:700 10.5px/1 var(--font-ui);letter-spacing:.06em;color:var(--teal-700);font-variant-numeric:tabular-nums}
:root:root .vdx .dcard.vaberto .dcode{padding:var(--sp-6) var(--sp-7) 0}

/* chips de gás e passos por tipo: palavra + cor de sistema */
:root:root .badge.gas-o2,:root:root .gas-tag.o2,:root:root .gas-pill.o2{background:var(--gas-o2-bg)!important;color:var(--gas-o2)!important;border-color:transparent!important}
:root:root .badge.gas-n2,:root:root .gas-tag.n2,:root:root .gas-pill.n2,:root:root .gas-pill{background:var(--gas-n2-bg)!important;color:var(--gas-n2)!important;border-color:transparent!important}
:root:root .badge.gas-none,:root:root .gas-tag.any{background:var(--gas-none-bg)!important;color:var(--gas-none)!important;border-color:transparent!important}
:root:root .step.parameter{box-shadow:inset 3px 0 0 var(--action-parameter)!important}
:root:root .step.software{box-shadow:inset 3px 0 0 var(--action-software)!important}
:root:root .step.maintenance{box-shadow:inset 3px 0 0 var(--action-maintenance)!important}
:root:root .step.parameter .step-num{color:var(--action-parameter)!important}
:root:root .step.software .step-num{color:var(--action-software)!important}
:root:root .step.maintenance .step-num{color:var(--action-maintenance)!important}

/* Analyze · o motor devolve a direção como FRASE, não como seta + valor. O <em> volta a ser texto;
   o Readout é um elemento próprio, .readout, que o script precisa passar a escrever (ver a lista). */
:root:root .diag .stp.now .act em,:root:root .diag .stp .act em{display:block;font:400 15px/1.5 var(--font-ui)!important;color:var(--text)!important;margin-top:var(--sp-2);letter-spacing:0}
/* A FOLHA PASSA A DIZER O QUE A PAGINA PINTA (DESIGN, 25/09/2026, item 6, zero mudanca visivel).
   A pagina escreve este mesmo bloco no `<style id="analyze-v2">`, e vence: o `<style>` vem depois do
   `<link>`, e a margem dela e' `!important`. A folha discordava em duas medidas -- `gap` 8px contra
   10px e margem de cima 8px contra 4px --, entao quem limpasse o bloco local confiando nela MOVERIA
   o Readout sem erro nenhum. Medido: o print do `#resultCard` a 390px mudava de md5 (c30898abb7a6
   para 877554394830) com o texto visivel identico. Agora as duas pontas dizem 10px e 4px, com
   token: `--sp-4` e' 10px e `--sp-1` e' 4px.
   O `.rt` abaixo NAO TEM MARCACAO: a pagina escreve so' `<div class="readout"><span class="rv">`.
   A regra fica (regra 16) e esta' anotada para ninguem supor que existe uma etiqueta ao lado do
   numero. E o 40px do `.rv` ja' bate nas duas pontas -- era o 32px desta folha, corrigido em 25/09
   as 09:37, antes deste conserto. */
:root:root .readout{display:flex;align-items:baseline;gap:var(--sp-4);margin:var(--sp-1) 0 var(--sp-1);font:inherit;color:inherit}
:root:root .readout .rv{font:600 40px/1 var(--font-ui);color:var(--change);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
:root:root .readout .rt{font:600 14px/1 var(--font-ui);color:var(--ink)}
:root:root .diag .see{font-size:15px;line-height:1.5;color:var(--text);margin:var(--sp-2) 0 0}
:root:root .diag .dcode{font:700 10.5px/1 var(--font-ui);letter-spacing:.06em;color:var(--teal-700)}
:root:root .diag .gaps{margin-top:var(--sp-7);font-size:13px;color:var(--steel);border-top:1px solid var(--hairline);padding-top:var(--sp-5)}
:root:root .aceita{display:flex;gap:var(--sp-3);align-items:baseline;border-radius:var(--r-sm)!important;padding:var(--sp-5) var(--sp-6)!important;margin:0 0 var(--sp-7)!important;border:1px solid var(--error-line)!important;border-left:3px solid var(--error)!important;background:var(--error-bg)!important}
:root:root .aceita .ak{font:700 10.5px/1.35 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--error)!important}
:root:root .aceita .av{font-size:13.5px!important;color:var(--text)!important}

/* Ficha de parâmetro · UMA casca para as três origens: o selo e o aviso viram a mesma faixa de origem */
:root:root #recipe-root .cover .badge,:root:root .cover .badge{display:flex!important;width:auto;border-radius:var(--r-sm)!important;text-transform:none!important;letter-spacing:0!important;
  font:600 13px/1.4 var(--font-ui)!important;padding:var(--sp-4) var(--sp-5)!important;margin:0 0 var(--sp-5)!important;border:1px solid var(--good-line)!important;border-left:3px solid var(--good)!important;background:var(--good-bg)!important;color:var(--good-text)!important}
:root:root .dne-tec-avisos{border-radius:var(--r-sm)!important;padding:var(--sp-4) var(--sp-5)!important;margin:0 0 var(--sp-7)!important;border:1px solid var(--warn-line)!important;border-left:3px solid var(--warn)!important;background:var(--warn-bg)!important}
:root:root .dne-tec-avisos p{margin:0!important;font-size:13px!important;color:var(--text)!important}
:root:root .dne-tec-avisos p:first-child{font-weight:600;color:var(--warn-text)!important}
:root:root #recipe-root .cover .badge:not(:has(+ h1 + .meta)){border-color:var(--warn-line)!important;border-left-color:var(--warn)!important;background:var(--warn-bg)!important;color:var(--warn-text)!important}
:root:root #recipe-root .cover .meta{display:grid!important;grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-5);margin-top:var(--sp-5)}
:root:root #recipe-root .cover .meta span{font-size:12.5px;color:var(--steel)}
:root:root .dne-tec-item{background:var(--surface)!important;border:0!important}
:root:root .dne-tec-item>summary{list-style:none;cursor:pointer;min-height:var(--control-h);display:flex;align-items:center}
:root:root .dne-tec-item>summary h2{margin:0!important;font-size:18px!important;font-weight:600!important;color:var(--ink)!important}
:root:root .dne-tec-maq{font-size:13px!important;color:var(--steel)!important;margin:0 0 var(--sp-5)!important}
:root:root .dne-tec h3,:root:root body.dneid .section h3{font:700 10.5px/1.35 var(--font-ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)!important;margin:var(--sp-7) 0 var(--sp-3)!important}
:root:root .param-table .dne-vsub{display:block;font-size:12px;font-weight:400;color:var(--steel)}
:root:root .param-table tr.dne-z td{background:var(--surface)!important}
:root:root .param-table.dne-2col th:nth-child(3),:root:root .param-table.dne-2col td:nth-child(3){width:18%;color:var(--steel)!important;font-size:12px!important}
:root:root .param-table td{padding:var(--sp-4) var(--sp-5)!important;height:auto;min-height:44px}
:root:root .insight-card{background:var(--warn-bg)!important;border:1px solid var(--warn-line)!important;border-left:3px solid var(--warn)!important;border-radius:var(--r-sm)!important;padding:var(--sp-5) var(--sp-6)!important;margin:0 0 var(--sp-7)!important;box-shadow:none!important}
:root:root .insight-card h4{font-size:14px!important;font-weight:600!important;color:var(--warn-text)!important;margin:0 0 var(--sp-2)!important}
:root:root .insight-card p{font-size:13px!important;color:var(--text)!important;margin:0!important}
:root:root body.dneid .section h2 .h2sub,:root:root body.dneid .section h2 .h2tag{font-size:12px!important;font-weight:500!important;color:var(--steel)!important}
/* 24/09/2026, teste no celular do Cristiano: com o h2 em flex, o "(start hole made by the laser)" virava
   uma coluna estreita e quebrava palavra por palavra. O subtitulo e a etiqueta descem para a linha de
   baixo, alinhados ao texto do titulo (28 do numero + 12 do vao), como a pagina fazia antes da folha. */
:root:root body.dneid .section h2{flex-wrap:wrap!important;row-gap:var(--heading-sub-gap)}
/* ESTOURAVA 1px A 320 NO PIOR CASO REAL (item 3 da v216, decisao da DESIGN registrada no contrato,
   aplicada agora na v217): o `margin-left:40px` somava POR FORA de `flex:1 0 100%`, entao o item
   sempre media caixa+40px -- o "1px" na pagina era so' o resto depois do padding do `.section` e
   do wrapper engolirem quase tudo, mas o estouro de verdade sobre a caixa do `.section` era os 40px
   inteiros. Trocado por `padding-left` com `box-sizing:border-box`: o recuo fica DENTRO dos 100%,
   entao o item nunca passa da largura do container. O valor continua o mesmo (28 do --num-badge-d
   + 12 do --sp-5 = 40px) -- zero mudanca visual, so' o estouro morre. */
:root:root body.dneid .section h2 .h2sub,:root:root body.dneid .section h2 .h2tag{
  flex:1 0 100%!important;box-sizing:border-box!important;
  padding-left:calc(var(--num-badge-d) + var(--sp-5))!important;margin:0!important}

/* How-To real: .sec > .bluf > .bluf-video(.play .vt .vs) + .facts + .note, depois .howto > ol.steps + .viz */
:root:root .sec{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
:root:root .bluf{background:var(--surface)!important}
:root:root .bluf-video{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:var(--sp-6);aspect-ratio:auto!important;min-height:88px;background:var(--brand-plate)!important}
:root:root .bluf-video .play{margin:0!important;flex:none;font-size:18px!important}
:root:root .bluf .note{margin:0 var(--sp-7) var(--sp-7)!important}
:root:root .howto .viz{margin-top:var(--sp-5)!important;border-radius:var(--r-card)!important;box-shadow:inset 0 0 0 1px var(--hairline)!important;background:var(--photo-mat)!important}
:root:root .howto .viz img{border-radius:var(--r-card)!important}

:root:root #recipe-root:has(.dne-tec-avisos) .cover .badge{display:none!important}
:root:root .vdx .dcard.vaberto .phrow{display:none!important}
:root:root .vdx .dcard.vaberto .cfotos{padding-top:var(--sp-3)!important}
@media(prefers-reduced-motion:reduce){:root:root *{transition-duration:0ms!important}}