/* ============================================================================
   MENTIS — APP CSS  (base + componentes compartilhados)
   Consome design-tokens.css. Mobile-first 390px. Sem cor/fonte hardcoded.
   Componentes: shell (.frame), Button, Overline, Chip, Badge, Input, Choice,
   barras de progresso, anéis, disclaimer, cartões.
   @layer controla a cascata e dispensa !important.
   ============================================================================ */

@layer reset, base, components, screen, state;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  button { font: inherit; color: inherit; }
  a { color: inherit; }
  ul { margin: 0; }
  :focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; border-radius: 4px; }
}

@layer base {
  body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--canvas);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ---- SHELL: app web responsivo legítimo (não "telefone desenhado") ------ */
  /* Mobile (≤ ~480px): o conteúdo OCUPA a tela inteira, edge-to-edge, sem
     bezel de aparelho. Telas maiores: coluna centrada com max-width e respiro,
     elevada só o suficiente pra ler como "app", não como mockup de canvas. */
  .frame {
    width: 100%;
    max-width: var(--frame-w);
    min-height: 100dvh;
    margin-inline: auto;
    background: var(--surface);
    overflow: clip;
    /* Edge-to-edge no mobile: respeita a barra real do SO / notch (viewport-fit
       cover) em vez de desenhar uma barra falsa. Em telas largas o respiro vem
       do padding do body, então o inset some. */
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Telas maiores: coluna centrada com respiro e elevação sutil (sem raio de
     aparelho nem borda de bezel — leitura de "app real", não de telefone). */
  @media (width >= 480px) {
    body { padding: var(--space-8) var(--space-4); }
    .frame {
      min-height: calc(100dvh - 2 * var(--space-8));
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-md);
      padding-top: 0;
    }
  }
  /* Variante de fundo de tela (telas calmas: pré-teste, prévia, calculando). */
  .frame--bg { background: var(--bg); }

  /* container-type para componentes que adaptam ao container, não à viewport */
  .frame { container-type: inline-size; container-name: frame; }
}

@layer components {

  /* ---- Overline (mono uppercase) ----------------------------------------- */
  .overline {
    font-family: var(--font-mono);
    font-weight: var(--w-medium);
    font-size: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .overline--sage   { color: var(--sage); }
  .overline--petrol { color: var(--petrol); }
  .overline--muted  { color: var(--muted); }

  /* ---- Button ------------------------------------------------------------ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    min-height: var(--touch-target);
    padding: 15px 18px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    font-family: var(--font-sans);
    font-weight: var(--w-bold);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
  }
  .btn:active { transform: scale(0.985); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .btn--primary { background: var(--petrol); color: #fff; }
  .btn--primary:hover { background: var(--petrol-hover); }

  .btn--sage { background: var(--sage); color: #fff; }
  .btn--sage:hover { background: var(--sage-hover); }

  .btn--secondary { background: var(--surface); color: var(--petrol); border-color: var(--petrol); }
  .btn--secondary:hover { background: var(--petrol); color: #fff; }

  .btn--outline { background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: var(--w-semibold); }
  .btn--outline:hover { border-color: var(--sage); color: var(--sage); }

  .btn--ghost { background: none; color: var(--muted-2); border: none; font-weight: var(--w-semibold); width: auto; min-height: 44px; }
  .btn--ghost:hover { color: var(--ink-4); }

  /* ícone-botão quadrado (voltar, replay) */
  .iconbtn {
    width: 44px; height: 44px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-4); cursor: pointer;
    font-size: 1.125rem;
    transition: background var(--duration-fast) var(--ease);
  }
  .iconbtn:hover { background: var(--bg); }

  /* ---- Chip / Tag -------------------------------------------------------- */
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--text-xs);
    color: var(--petrol); background: var(--petrol-050);
    padding: 5px 9px; border-radius: var(--radius-pill);
  }
  .chip--outline { color: var(--ink-2); background: transparent; border: 1px solid var(--line); }

  /* ---- Badge ------------------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-weight: var(--w-semibold); font-size: var(--text-overline);
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: var(--radius-pill);
  }
  .badge--free { color: #fff; background: var(--sage); }
  .badge--info { color: var(--petrol); background: var(--petrol-050); }
  .badge--warn { color: var(--amber-text); background: var(--amber-bg); border: 1px solid var(--amber-border); }
  .badge--warn .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); display: block; }

  /* ---- Cartões internos -------------------------------------------------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-card-sm);
    padding: var(--space-4);
  }
  .entry-card {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-card);
    padding: 20px;
  }
  .entry-card--sage { border: 1.5px solid var(--sage-200); background: var(--sage-050); }

  /* ---- Inputs ------------------------------------------------------------ */
  .field {
    width: 100%;
    min-height: var(--touch-target);
    padding: 15px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 0.9375rem;
    color: var(--ink); background: var(--surface);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  }
  .field::placeholder { color: var(--muted-2); }
  .field:focus-visible { border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 22%, transparent); }
  .field[aria-invalid="true"] { border-color: var(--danger); }

  /* Input de código de verificação (6 dígitos) — §2.3 portão sem senha.
     Centralizado, mono, tracking largo: cada dígito respira e fica legível. */
  .field--code {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: var(--w-medium);
    letter-spacing: 0.5em;
    padding-left: 0.5em;            /* compensa o tracking do último dígito p/ centrar */
    caret-color: var(--petrol);
  }
  .field--code::placeholder { letter-spacing: 0.3em; font-size: 1.125rem; }

  /* Dica discreta com o dev_code (só aparece em APP_ENV=development). */
  .devhint {
    margin: 8px 0 0;
    font: var(--w-medium) var(--text-xs) var(--font-mono);
    color: var(--muted-2);
    text-align: center;
    letter-spacing: .02em;
  }
  .devhint b { color: var(--muted); font-weight: var(--w-bold); }

  /* ---- Choice (opção de resposta) — alvo ≥48px --------------------------- */
  .choice {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    min-height: 58px;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-weight: var(--w-semibold); font-size: var(--text-md);
    text-align: center; cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
  }
  /* Hover só em dispositivos com ponteiro fino (mouse). `hover: hover` sozinho
     ainda casa em aparelhos híbridos/iPadOS que se reportam como hover-capazes;
     exigir TAMBÉM `pointer: fine` garante mouse de verdade e nunca touch. */
  @media (hover: hover) and (pointer: fine) {
    .choice:hover { border-color: var(--sage); }
  }
  /* Feedback de toque no tap (não persiste, some ao soltar). */
  .choice:active { border-color: var(--sage-200); }
  /* Foco do .choice: o outline sage GLOBAL (:focus-visible, layer reset) pintava
     um anel cor-de-seleção quando o iOS RESTAURAVA foco no botão re-renderizado
     da MESMA posição após a troca de questão — parecia "pré-resposta marcada".
     Aqui restringimos o realce de foco do .choice a teclado (pointer: fine):
     quem navega por teclado MANTÉM foco visível; em touch o anel não aparece.
     A seleção real (aria-checked) é independente disto e continua valendo. */
  @media not all and (pointer: fine) {
    .choice:focus-visible { outline: none; }
  }
  /* Seleção REAL — vale em qualquer input, é a única borda persistente no touch. */
  .choice[aria-checked="true"] { border-color: var(--sage); background: var(--sage-050); }
  /* redundância daltônico-segura: além da cor, um check no canto */
  .choice[aria-checked="true"]::after {
    content: ""; position: absolute; top: 8px; right: 8px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  }

  /* ---- Barra de progresso fina (topo do cartão) -------------------------- */
  .progress { height: 4px; background: var(--line-track); }
  .progress__fill { height: 100%; background: var(--petrol); transition: width var(--duration-base) var(--ease); }
  .progress__fill--sage { background: var(--sage); }

  /* ---- Disclaimer âmbar -------------------------------------------------- */
  .disclaimer {
    display: flex; gap: 12px;
    background: var(--amber-bg); border: 1px solid var(--amber-border);
    border-radius: var(--radius-md); padding: 14px 16px;
  }
  .disclaimer__icon {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--amber); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: var(--w-bold); font-size: 0.875rem;
  }
  .disclaimer p { margin: 0; font-weight: var(--w-medium); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--amber-text); }

  /* ---- Selo "provisório · norming em calibração" (discreto) -------------- */
  /* Ressalva PRESENTE mas SÓBRIA: chip neutro (não-âmbar/não-alarme) perto do    */
  /* número de QI, com um "por quê?" acessível por <details> nativo (teclado +    */
  /* leitor de tela, sem JS). NÃO é banner — é uma nota de confiança honesta.     */
  .provseal { display: inline-block; text-align: left; }
  .provseal__summary {
    display: inline-flex; align-items: center; gap: 6px;
    font: var(--w-medium) var(--text-overline) var(--font-mono);
    letter-spacing: .04em; color: var(--muted-2);
    background: var(--surface); border: 1px solid var(--line);
    padding: 4px 9px; border-radius: var(--radius-pill);
    cursor: pointer; list-style: none; user-select: none;
    transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  }
  .provseal__summary::-webkit-details-marker { display: none; }
  .provseal__summary .dot {
    flex: none; width: 5px; height: 5px; border-radius: 50%;
    background: var(--muted-4); display: block;
  }
  .provseal__why { font-weight: var(--w-medium); color: var(--muted-3); text-decoration: underline; text-underline-offset: 2px; }
  @media (hover: hover) and (pointer: fine) {
    .provseal__summary:hover { border-color: var(--line); color: var(--muted); }
  }
  .provseal__summary:focus-visible {
    outline: none; border-color: var(--petrol);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 18%, transparent);
  }
  .provseal__note {
    margin: 8px auto 0; max-width: 38ch;
    font: var(--w-regular) 0.78125rem/var(--lh-normal) var(--font-sans);
    color: var(--muted); text-align: center;
  }
  .provseal[open] .provseal__summary { border-color: var(--line-2); color: var(--muted); }

  /* ---- Resultado NÃO confiável (reliable:false) -------------------------- */
  /* Aviso honesto que SUBSTITUI o número quando o teste não pôde medir com     */
  /* confiança (chute rápido). Tom sério mas acolhedor, sem culpa, sem dark      */
  /* pattern. Reusa a paleta âmbar do .disclaimer, mas é conteúdo PRIMÁRIO.      */
  .unreliable {
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-card);
    padding: 26px 22px 24px;
    text-align: center;
  }
  .unreliable__icon {
    width: 52px; height: 52px; margin: 0 auto 16px;
    border-radius: 50%;
    /* amber-text (não o amber claro) p/ o glifo branco clarear 3:1 (não-texto WCAG) */
    background: var(--amber-text); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .unreliable__title {
    margin: 0;
    font-family: var(--font-sans); font-weight: var(--w-bold);
    font-size: var(--text-xl); line-height: 1.18;
    letter-spacing: -0.02em; color: var(--ink);
  }
  .unreliable__body {
    margin: 12px auto 0; max-width: 34ch;
    font-family: var(--font-sans); font-weight: var(--w-regular);
    font-size: var(--text-base); line-height: var(--lh-normal);
    color: var(--ink-3);
  }
  .unreliable__cta { margin-top: 22px; }
  .unreliable__hint {
    margin: 12px 0 0;
    font-family: var(--font-mono); font-weight: var(--w-medium);
    font-size: var(--text-overline); line-height: var(--lh-normal);
    color: var(--amber-text);
  }
  /* resultado apagado por trás do aviso (quando ainda renderizamos a forma) */
  .is-muted { opacity: 0.32; filter: grayscale(0.6); pointer-events: none; user-select: none; }

  /* nota informativa (i) */
  .infonote { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 14px; }
  .infonote__icon { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--petrol-050); color: var(--petrol); display: flex; align-items: center; justify-content: center; font-weight: var(--w-bold); font-size: var(--text-xs); }
  .infonote p { margin: 0; font-size: 0.78125rem; line-height: var(--lh-normal); color: var(--muted); }

  /* ---- App bar / nav row ------------------------------------------------- */
  .appbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 10px; }
  .brand { display: flex; align-items: center; gap: 8px; font-weight: var(--w-bold); font-size: 1.125rem; letter-spacing: var(--tracking-tight); color: var(--petrol); }
  /* marca clicável: herda a aparência de .brand, sem cara de link */
  a.brand { text-decoration: none; }
  a.brand:hover { color: var(--petrol-700, var(--petrol)); }

  /* Variante MÍNIMA da marca para telas de foco (teste em andamento, cálculo):
     wordmark pequeno e discreto, centralizado, sem nav nem links. A marca está
     PRESENTE sem competir com o item/timer/progresso. Não-clicável por padrão
     (não tirar o usuário do teste sem querer). */
  .appbar--mini { justify-content: center; padding: 12px 22px 6px; }
  .appbar--mini .brand { font-size: 0.9375rem; color: var(--muted); gap: 6px; }
  .appbar--mini .brand svg { width: 16px; height: 16px; }

  /* marca dentro de uma navrow (telas de doc/preparação): fica à direita,
     discreta, ao lado do botão Voltar à esquerda. */
  .navrow { display: flex; align-items: center; gap: 14px; padding: 14px 20px 8px; }
  .navrow .brand { font-size: 1rem; }
  .navrow__spacer { flex: 1; }

  /* ---- Toggle (opt-in) --------------------------------------------------- */
  .toggle { flex: none; width: 44px; height: 26px; border-radius: 13px; background: #D2DAD8; position: relative; transition: background var(--duration-fast) var(--ease); display: block; }
  .toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left var(--duration-fast) var(--ease); display: block; }
  [aria-checked="true"] > .toggle { background: var(--sage); }
  [aria-checked="true"] > .toggle .toggle__knob { left: 21px; }

  /* pill de demografia (single-select) */
  .pill {
    padding: 11px 15px; border-radius: 11px;
    border: 1.5px solid var(--line); background: var(--surface);
    color: var(--ink-2); font-weight: var(--w-semibold); font-size: 0.875rem;
    cursor: pointer; min-height: 44px;
  }
  .pill[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol); color: #fff; }

  /* divisor com texto "ou" */
  .divider { display: flex; align-items: center; gap: 12px; }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
  .divider span { font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--text-xs); color: var(--muted-2); }

  /* régua de medição (assinatura visual) */
  .measure-rule { height: 2px; background: repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent 12px); }

  /* ---- Linha de dimensão do resultado (telas 07 bloqueado / 09 completo) -- */
  /* state="free": medida grátis (petróleo). state="new": dimensão da Parte 2
     (sálvia, badge NOVO). Sub-estado data-locked="true" borra a barra e o número
     na tela 07 (a FORMA do radar prova o cálculo; o NÚMERO fica para o pago). */
  .dim-row {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    display: flex; align-items: center; gap: 12px;
  }
  .dim-row--new { border: 1.5px solid var(--sage-200); }
  .dim-row__name { flex: 1; font: var(--w-semibold) 0.875rem var(--font-sans); color: var(--ink); }
  .dim-row__tag {
    font: var(--w-semibold) 0.5625rem var(--font-mono); color: var(--sage);
    background: var(--sage-050); padding: 2px 5px; border-radius: 5px;
    vertical-align: middle; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em;
  }
  .dim-row__bar { width: 84px; height: 6px; background: var(--line-track); border-radius: 4px; overflow: hidden; }
  .dim-row__fill { height: 100%; border-radius: 4px; width: 0; background: var(--petrol); transition: width var(--duration-slow) var(--ease); }
  .dim-row--new .dim-row__fill { background: var(--sage); }
  .dim-row__val { width: 26px; text-align: right; font: var(--w-bold) 0.8125rem var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
  /* bloqueio: borra barra+número, impede seleção/cópia, esconde do leitor de tela
     (o número real nunca chega ao DOM antes do pagamento — vide JS). */
  .dim-row[data-locked="true"] .dim-row__bar,
  .dim-row[data-locked="true"] .dim-row__val { filter: blur(5px); user-select: none; }
  .dim-row[data-locked="true"] .dim-row__bar { filter: blur(3px); }

  /* ---- Cartão de desbloqueio (escuro, calmo) — tela 07 ------------------- */
  .unlock-card { background: var(--petrol); border-radius: var(--radius-card); padding: 20px; }
  .unlock-card__price { display: flex; align-items: baseline; gap: 9px; }
  .unlock-card__amount { font: var(--w-bold) 1.75rem var(--font-sans); color: #fff; letter-spacing: -.02em; }
  .unlock-card__note { font: var(--w-medium) var(--text-xs) var(--font-mono); color: var(--petrol-200); }
  .unlock-card p { margin: 8px 0 15px; font: var(--w-regular) 0.84375rem/var(--lh-normal) var(--font-sans); color: var(--petrol-100); }
  .unlock-card .btn--invert { background: #fff; color: var(--petrol); border-color: #fff; }
  .unlock-card .btn--invert:hover { background: var(--petrol-050); }

  /* ---- Checkbox de consentimento (alvo amplo, redundância visual) -------- */
  .consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; padding: 4px 0; }
  .consent__box {
    flex: none; width: 24px; height: 24px; border-radius: 7px;
    border: 2px solid var(--line); background: var(--surface);
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
    transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
  }
  .consent__box svg { opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
  .consent__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .consent__input:checked + .consent__box { background: var(--sage); border-color: var(--sage); }
  .consent__input:checked + .consent__box svg { opacity: 1; }
  .consent__input:focus-visible + .consent__box { outline: 3px solid var(--sage); outline-offset: 2px; }
  .consent__text { font: var(--w-regular) 0.78125rem/var(--lh-normal) var(--font-sans); color: var(--ink-3); }

  /* ---- Método de pagamento (rádio visual) -------------------------------- */
  .pay-method {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 14px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); cursor: pointer; text-align: left;
    transition: border-color var(--duration-fast) var(--ease);
  }
  .pay-method:hover { border-color: var(--petrol-300); }
  .pay-method[aria-checked="true"] { border-color: var(--petrol); background: var(--petrol-050); }
  .pay-method__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; }
  .pay-method[aria-checked="true"] .pay-method__dot { border-color: var(--petrol); }
  .pay-method[aria-checked="true"] .pay-method__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--petrol); display: block; }
  .pay-method__label { display: block; font: var(--w-semibold) 0.9375rem var(--font-sans); color: var(--ink); }
  .pay-method__note { display: block; font: var(--w-regular) var(--text-xs) var(--font-sans); color: var(--muted-2); margin-top: 1px; }

  /* ---- Selo "Parte 2 concluída" / "Mapa completo" ------------------------ */
  .stage-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font: var(--w-medium) var(--text-overline) var(--font-mono); letter-spacing: .04em;
    color: var(--sage); background: var(--sage-050); border: 1px solid var(--sage-200);
    padding: 6px 10px; border-radius: 8px;
  }

  /* ---- Lista de garantias (checkmarks sálvia) ---------------------------- */
  .assured { background: var(--sage-050); border: 1px solid var(--sage-200); border-radius: var(--radius-card-sm); padding: 16px; display: flex; flex-direction: column; gap: 11px; }
  .assured__row { display: flex; gap: 10px; align-items: center; }
  .assured__check { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sage); color: #fff; display: flex; align-items: center; justify-content: center; }
  .assured__row span:last-child { font: var(--w-semibold) 0.875rem var(--font-sans); color: var(--ink); }

  /* ---- LikertScale (temperamento, tela 11) ------------------------------- */
  /* 5 círculos graduados (extremos maiores). Cada célula é um alvo de toque ≥48px
     (a área é o botão; o disco é só o glifo visual). Cor + tamanho + rótulo ARIA
     são redundantes (daltônico-seguro): <3 cinza, 3 neutro, >3 sálvia. */
  .likert { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .likert__cell {
    flex: 1 1 0;
    min-height: var(--touch-target);
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 6px 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .likert__cell:focus-visible { outline: none; }
  .likert__cell:focus-visible .likert__dot { outline: 3px solid var(--sage); outline-offset: 3px; }
  .likert__dot {
    border-radius: 50%; border: 2px solid var(--muted-4); background: var(--surface);
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
  }
  .likert__dot--xl { width: 42px; height: 42px; }
  .likert__dot--md { width: 34px; height: 34px; }
  .likert__dot--sm { width: 27px; height: 27px; }
  @media (hover: hover) and (pointer: fine) {
    .likert__cell:hover .likert__dot { border-color: var(--ink-4); }
  }
  /* selecionado: preenche com a cor do tom + check redundante para o leitor visual */
  .likert__cell[aria-checked="true"] .likert__dot { transform: scale(1.06); border-color: transparent; }
  .likert__cell[aria-checked="true"] .likert__dot--lo  { background: var(--temp-melancolico); }
  .likert__cell[aria-checked="true"] .likert__dot--mid { background: var(--muted-2); }
  .likert__cell[aria-checked="true"] .likert__dot--hi  { background: var(--sage); }
  .likert__ends { display: flex; justify-content: space-between; margin-top: 14px; font: var(--w-medium) var(--text-sm) var(--font-sans); color: var(--muted-2); }

  /* ---- Resultado de temperamento (tela 12) ------------------------------- */
  /* Cabeçalho tingido pela COR do temperamento primário (via --temp-accent,
     setado inline no JS). Texto claro sobre fundo escuro/saturado. */
  /* --temp-accent = cor do temperamento escurecida no JS (mix com quase-preto)
     para o texto branco (--temp-ink) atingir AA ≥4.5:1 em todos os 4 — incluindo
     o âmbar do Sanguíneo (que falha com branco puro: 2.24:1). */
  .temp-hero {
    background: var(--temp-accent, var(--sage));
    color: var(--temp-ink, #fff); padding: 26px 24px 22px;
  }
  /* Texto em força total (sem opacity) — dimming reduzia o ratio abaixo de AA nos
     accents claros (Fleumático/Melancólico). A hierarquia vem do peso/tamanho. */
  .temp-hero__over { font: var(--w-medium) var(--text-overline) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--temp-ink, #fff); }
  .temp-hero__title { margin: 8px 0 0; font: var(--w-bold) var(--text-2xl) var(--font-sans); letter-spacing: -.025em; }
  .temp-hero__title small { font: var(--w-medium) 1rem var(--font-sans); color: var(--temp-ink, #fff); }
  .temp-hero p { margin: 10px 0 0; font: var(--w-regular) 0.875rem/var(--lh-normal) var(--font-sans); color: var(--temp-ink, #fff); text-wrap: pretty; }

  /* barras da mistura dos 4 — a cor vem inline (cor do temperamento) */
  .temp-mix { display: flex; flex-direction: column; gap: 11px; }
  .temp-mix__row { display: flex; align-items: center; gap: 12px; }
  .temp-mix__name { width: 92px; font: var(--w-semibold) var(--text-sm) var(--font-sans); color: var(--ink); }
  .temp-mix__track { flex: 1; height: 9px; background: var(--line-track); border-radius: 5px; overflow: hidden; }
  .temp-mix__fill { height: 100%; width: 0; border-radius: 5px; transition: width var(--duration-slow) var(--ease); }
  .temp-mix__pct { width: 34px; text-align: right; font: var(--w-bold) var(--text-xs) var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

  /* ponte de coerência DISC ↔ temperamento */
  .coherence { background: var(--sage-050); border: 1px solid var(--sage-200); border-radius: var(--radius-card); padding: 18px; }
  .coherence--off { background: var(--bg-2); border-color: var(--line-2); }
  .coherence__head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
  .coherence__badge { width: 26px; height: 26px; border-radius: 8px; color: #fff; font: var(--w-bold) 0.8125rem var(--font-sans); display: flex; align-items: center; justify-content: center; flex: none; }
  .coherence__title { font: var(--w-semibold) 0.875rem var(--font-sans); color: var(--ink); }
  .coherence p { margin: 0; font: var(--w-regular) 0.84375rem/1.55 var(--font-sans); color: var(--ink-2); }

  /* ---- DISC: escolha forçada (teste-disc, tela 03) ----------------------- */
  /* Cada palavra é uma linha com 2 botões (Mais / Menos). A AFFORDANCE nunca é
     só cor: glifo (✓ Mais · − Menos) + rótulo ARIA + cor → daltônico-seguro.
     Alvo de toque ≥48px no botão inteiro (CONTRATOS §4). */
  .disc-fc__hi-most  { color: var(--sage); font-weight: var(--w-bold); }
  .disc-fc__hi-least { color: var(--disc-c); font-weight: var(--w-bold); }

  .disc-fc__legend {
    display: flex; justify-content: flex-end; gap: 6px; padding-right: 8px; margin-bottom: 10px;
  }
  .disc-fc__legend span {
    width: 48px; text-align: center;
    font: var(--w-semibold) var(--text-overline) var(--font-mono);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .disc-fc__legend-most  { color: var(--sage); }
  .disc-fc__legend-least { color: var(--disc-c); }

  .disc-fc__list { display: flex; flex-direction: column; gap: 10px; }
  .disc-fc__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bg); border: 1px solid var(--line-2);
    border-radius: var(--radius-md); padding: 8px 8px 8px 16px;
    transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
  }
  /* a linha sinaliza o estado escolhido (reforça a cor do botão) */
  .disc-fc__row:has(.disc-fc__pick--most[aria-pressed="true"])  { border-color: var(--sage-200); background: var(--sage-050); }
  .disc-fc__row:has(.disc-fc__pick--least[aria-pressed="true"]) { border-color: var(--line); background: var(--bg-2); }
  .disc-fc__word { font: var(--w-semibold) var(--text-md) var(--font-sans); color: var(--ink); }
  .disc-fc__pickers { display: flex; gap: 6px; flex: none; }
  .disc-fc__pick {
    width: 48px; height: 48px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1.5px solid var(--line);
    background: var(--surface); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
  }
  .disc-fc__pick:active { transform: scale(0.94); }
  .disc-fc__glyph { font-size: 1.125rem; line-height: 1; color: var(--muted-4); font-weight: var(--w-bold); }
  @media (hover: hover) and (pointer: fine) {
    .disc-fc__pick--most:hover  { border-color: var(--sage); }
    .disc-fc__pick--least:hover { border-color: var(--disc-c); }
  }
  .disc-fc__pick--most[aria-pressed="true"]  { background: var(--sage); border-color: var(--sage); }
  .disc-fc__pick--least[aria-pressed="true"] { background: var(--disc-c); border-color: var(--disc-c); }
  .disc-fc__pick[aria-pressed="true"] .disc-fc__glyph { color: #fff; }

  /* ---- DISC: resultado (resultado-disc, tela 10) ------------------------- */
  .disc-hero { background: var(--petrol); color: #fff; padding: 26px 24px 22px; }
  .disc-hero__over { font: var(--w-medium) var(--text-overline) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--petrol-200); }
  .disc-hero__title { margin: 8px 0 0; font: var(--w-bold) var(--text-2xl) var(--font-sans); letter-spacing: -.025em; }
  .disc-hero p { margin: 10px 0 0; font: var(--w-regular) 0.875rem/var(--lh-normal) var(--font-sans); color: var(--petrol-100); text-wrap: pretty; }

  /* radar wrap */
  .disc-radar { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-card-sm); padding: 14px; display: flex; justify-content: center; }

  /* 3 gráficos clássicos — barras D/I/S/C (sigla + cor + número: redundante) */
  .disc-chart { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-card-sm); padding: 14px 16px; }
  .disc-chart__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 11px; }
  .disc-chart__title { font: var(--w-bold) 0.875rem var(--font-sans); color: var(--ink); }
  .disc-chart__sub { font: var(--w-regular) var(--text-xs) var(--font-sans); color: var(--muted-2); }
  .disc-bars { display: flex; flex-direction: column; gap: 8px; }
  .disc-bar { display: flex; align-items: center; gap: 10px; }
  .disc-bar__code { width: 14px; flex: none; font: var(--w-bold) var(--text-xs) var(--font-mono); color: var(--ink-3); }
  .disc-bar__track { flex: 1; height: 9px; background: var(--line-track); border-radius: 5px; overflow: hidden; }
  .disc-bar__fill { height: 100%; width: 0; border-radius: 5px; transition: width var(--duration-slow) var(--ease); }
  .disc-bar__val { width: 28px; text-align: right; flex: none; font: var(--w-semibold) var(--text-xs) var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

  /* "Como se comunicar comigo" — cartão sálvia, linhas do/don't redundantes */
  .disc-comm { background: var(--sage-050); border: 1px solid var(--sage-200); border-radius: var(--radius-card); padding: 18px; }
  .disc-comm__title { font: var(--w-bold) 0.9375rem var(--font-sans); color: var(--ink); margin-bottom: 12px; }
  .disc-comm__list { display: flex; flex-direction: column; gap: 11px; }
  .disc-comm__row { display: flex; gap: 10px; align-items: flex-start; }
  .disc-comm__icon { flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: var(--w-bold); margin-top: 1px; }
  .disc-comm__icon--do   { background: var(--sage); }
  .disc-comm__icon--dont { background: var(--line); color: var(--muted-2); }
  .disc-comm__row span:last-child { font: var(--w-regular) 0.84375rem/1.45 var(--font-sans); color: var(--ink-2); }
  .disc-comm__row--dont span:last-child { color: var(--muted); }
  .disc-comm p { margin: 0; font: var(--w-regular) 0.875rem/1.55 var(--font-sans); color: var(--ink-2); }

  /* CTAs de combo SUAVES (cross-sell honesto, sem pressão) */
  .combo-cta {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left; cursor: pointer; text-decoration: none;
    border-radius: var(--radius-md); padding: 15px; min-height: var(--touch-target);
    background: var(--bg); border: 1px solid var(--line-2);
    transition: border-color var(--duration-fast) var(--ease);
  }
  .combo-cta:hover { border-color: var(--petrol-300); }
  .combo-cta--sage { background: var(--sage-050); border: 1.5px solid var(--sage-200); }
  .combo-cta--sage:hover { border-color: var(--sage); }
  .combo-cta__main { display: flex; align-items: center; gap: 12px; }
  .combo-cta__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
  .combo-cta--sage .combo-cta__ico { border-color: var(--sage-200); }
  .combo-cta__t { display: block; font: var(--w-semibold) 0.875rem var(--font-sans); color: var(--ink); }
  .combo-cta__s { display: block; font: var(--w-regular) var(--text-xs) var(--font-sans); color: var(--muted-2); margin-top: 2px; }
  .combo-cta--sage .combo-cta__s { color: var(--sage); }
  .combo-cta__arrow { flex: none; font: var(--w-bold) 0.875rem var(--font-sans); color: var(--petrol); }
  .combo-cta--sage .combo-cta__arrow { color: var(--sage); }

  /* ---- memory_span (Gsm) — fase de APRESENTAÇÃO da sequência ------------- */
  /* Tela de carga de memória: editorial, dígitos oversized em mono, foco       */
  /* total na sequência. Sem alternativas visíveis (só existem no recall).      */
  .memspan {
    display: flex; flex-direction: column; align-items: center;
    gap: 22px; padding: 18px 8px 6px; text-align: center;
  }
  .memspan__hint {
    margin: 0; max-width: 30ch;
    font-family: var(--font-sans); font-weight: var(--w-medium);
    font-size: var(--text-sm); line-height: var(--lh-normal, 1.45);
    color: var(--muted-2);
  }
  /* a sequência: dígitos grandes, mono, com separador discreto. */
  .memspan__seq {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: center; gap: 10px;
    font-family: var(--font-mono); font-weight: var(--w-semibold);
    color: var(--petrol);
  }
  .memspan__digit {
    font-size: clamp(2.5rem, 1.8rem + 6vw, 3.75rem);
    line-height: 1; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .memspan__sep {
    font-size: clamp(1.5rem, 1rem + 3vw, 2.25rem);
    color: var(--muted-4); line-height: 1;
  }
  /* barra que esvazia durante display_ms (pista visual redundante ao texto). */
  .memspan__bar {
    width: min(220px, 70%); height: 4px;
    background: var(--line-track); border-radius: 999px; overflow: hidden;
  }
  .memspan__bar-fill {
    display: block; height: 100%; width: 100%;
    background: var(--petrol); border-radius: 999px;
    transform-origin: left center;
    animation: memspan-deplete var(--memspan-ms, 4000ms) linear forwards;
  }
  @keyframes memspan-deplete { from { transform: scaleX(1); } to { transform: scaleX(0); } }

  /* utilitários de visibilidade controlados por JS via data-attr/classe */
  [hidden] { display: none !important; }
  .is-hidden { display: none !important; }

  /* skeleton de carregamento (antecipa a forma, não spinner genérico) */
  .skeleton {
    background: linear-gradient(90deg, var(--line-track) 25%, var(--line-3) 37%, var(--line-track) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton 1.4s ease infinite;
  }
  @keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

  /* pulsar de texto "calculando" */
  .pulse { animation: mpulse 1.6s ease-in-out infinite; }
  @keyframes mpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

  /* enter de tela/portão sem JS */
  .fade-enter { animation: fadeIn var(--duration-base) var(--ease-out) both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* shake de erro */
  .shake { animation: shake .2s ease; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

  /* estado de erro inline (cor + ícone + texto: redundante) */
  .errorbar { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: var(--text-sm); font-weight: var(--w-medium); padding: 4px 0; }
  .errorbar::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--w-bold); font-size: var(--text-xs); }

  /* ---- Selo de confiança "faixa, não número cravado" (FORÇA, não desculpa) -- */
  /* Reframe do provisório: bloco VISÍVEL por padrão (não escondido), sóbrio,     */
  /* petróleo (confiança, não âmbar/alarme). É o diferencial vs. concorrentes que */
  /* inflam — por isso afirmativo, não apologético. Sem JS: é conteúdo estático.  */
  .confseal {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--petrol-050);
    border: 1px solid var(--petrol-100);
    border-radius: var(--radius-card-sm);
    padding: 14px 15px;
    text-align: left;
  }
  .confseal__icon {
    flex: none; width: 26px; height: 26px; border-radius: 8px;
    background: var(--petrol); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .confseal__title {
    margin: 0;
    font: var(--w-semibold) 0.84375rem/1.35 var(--font-sans);
    color: var(--ink);
  }
  .confseal__body {
    margin: 5px 0 0;
    font: var(--w-regular) 0.78125rem/var(--lh-normal) var(--font-sans);
    color: var(--ink-3);
  }
  .confseal__refine {
    margin: 7px 0 0;
    display: inline-flex; align-items: center; gap: 6px;
    font: var(--w-medium) var(--text-overline)/1.4 var(--font-mono);
    letter-spacing: .03em; color: var(--petrol);
  }
  .confseal__refine .dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); display: block; }

  /* ---- Âncora honesta de preço (preço de lançamento sobe ao fim) ----------- */
  /* Sem dia/contador falso: apenas o FATO de que sobe. O valor atual em destaque */
  /* e o "futuro" riscado em mono discreto — urgência genuína, prova de honestidade. */
  .price-anchor { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 9px; }
  .price-anchor__future {
    font: var(--w-medium) 0.71875rem var(--font-mono);
    color: var(--muted-2);
    text-decoration: line-through;
    text-decoration-color: var(--muted-4);
    text-underline-offset: 2px;
  }
  .launch-rise {
    display: flex; align-items: center; gap: 8px; margin-top: 9px;
    font: var(--w-medium) var(--text-xs)/1.4 var(--font-mono);
    color: var(--muted);
  }
  .launch-rise__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); display: block; }
  /* variante sobre o cartão escuro de desbloqueio */
  .unlock-card .launch-rise { color: var(--petrol-200); }
  .unlock-card .price-anchor__future { color: var(--petrol-200); text-decoration-color: var(--petrol-300); }

  /* ---- Pico-fim: celebração sóbria do reveal pago ------------------------- */
  /* Não é confete: é o reconhecimento calmo do que ela conquistou. Os 3 números  */
  /* novos entram com stagger curto (≤3 itens) — recompensa merecida, sem teatro. */
  .reveal-banner {
    display: flex; gap: 12px; align-items: center;
    background: var(--sage-050);
    border: 1px solid var(--sage-200);
    border-radius: var(--radius-card-sm);
    padding: 15px 16px;
  }
  .reveal-banner__seal {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    background: var(--sage); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .reveal-banner__title { margin: 0; font: var(--w-bold) 1rem/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--ink); }
  .reveal-banner__sub { margin: 3px 0 0; font: var(--w-regular) var(--text-sm)/1.4 var(--font-sans); color: var(--ink-3); }
  /* os cards das dimensões recém-desbloqueadas entram escalonados */
  .dim-row--reveal { animation: dimReveal var(--duration-base) var(--ease-out) both; }
  .dim-row--reveal:nth-of-type(1) { animation-delay: 60ms; }
  .dim-row--reveal:nth-of-type(2) { animation-delay: 160ms; }
  .dim-row--reveal:nth-of-type(3) { animation-delay: 260ms; }
  @keyframes dimReveal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

  /* ---- Marco de posição no teste (NEUTRO — nunca elogio de desempenho) ----- */
  /* Faixa fina sobre a barra de progresso anunciando só POSIÇÃO ("Metade do      */
  /* caminho", "Reta final"). Some sozinha. Comunica orientação, não mérito.      */
  .milestone {
    margin: 8px 24px 0;
    display: flex; align-items: center; gap: 7px;
    font: var(--w-semibold) var(--text-overline) var(--font-mono);
    letter-spacing: .06em; text-transform: uppercase; color: var(--petrol);
    animation: milestoneIn var(--duration-base) var(--ease-out) both;
  }
  .milestone__bar { flex: none; width: 16px; height: 2px; border-radius: 2px; background: var(--petrol); display: block; }
  @keyframes milestoneIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* ---- Feedback de sucesso do código (fecha o loop antes do redirect) ------ */
  .code-success {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 8px 0 4px; text-align: center;
    animation: fadeIn var(--duration-base) var(--ease-out) both;
  }
  .code-success__ring {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--sage); color: #fff;
    display: flex; align-items: center; justify-content: center;
    animation: popIn 360ms var(--ease-out) both;
  }
  .code-success__label { font: var(--w-semibold) 0.9375rem var(--font-sans); color: var(--ink); }
  .code-success__path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: drawCheck 320ms 120ms var(--ease-out) forwards; }
  @keyframes popIn { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
  @keyframes drawCheck { to { stroke-dashoffset: 0; } }
}

/* utilitário de leitura para screen readers */
.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;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: var(--z-toast);
  background: var(--petrol); color: #fff; padding: 10px 14px; border-radius: 8px;
  font-weight: var(--w-semibold); text-decoration: none;
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: 8px; }

/* ---- Reduced motion ------------------------------------------------------ */
/* O present→hide do memory_span é a CARGA DE MEMÓRIA — acontece sempre (é o    */
/* setTimeout do JS, não a animação). Aqui só removemos o MOVIMENTO chamativo:   */
/* a barra deixa de "esvaziar" suave e vira um indicador estático/neutro. O      */
/* tempo continua comunicado pelo texto "Memorize por X segundos".              */
@media (prefers-reduced-motion: reduce) {
  .memspan__bar-fill {
    animation: none;
    /* trilho neutro preenchido: presença discreta, sem implicar movimento */
    background: var(--muted-4);
  }
}

/* ---- Confirm dialog (saída do teste) ------------------------------------- */
/* <dialog> nativo: foco preso, Esc fecha, ::backdrop, semântica modal — tudo  */
/* de graça. Estilizado nos tokens do app. Mobile-first: card colado ao rodapé */
/* no celular (alvo grande, polegar), centralizado a partir de 480px.          */
.confirm {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--ink);
  width: min(100% - 24px, 420px);
  margin: auto auto 12px;   /* rodapé no mobile */
}
.confirm::backdrop {
  background: color-mix(in oklab, var(--ink) 55%, transparent);
}
.confirm__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 18px;
}
.confirm__title {
  margin: 0 0 6px;
  font: var(--w-bold) var(--text-lg)/var(--lh-snug) var(--font-sans);
  color: var(--ink);
}
.confirm__body {
  margin: 0 0 18px;
  font: var(--w-regular) var(--text-sm)/var(--lh-normal) var(--font-sans);
  color: var(--ink-2);
}
.confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* primário = ficar no teste (caminho seguro em destaque); sair fica ghost */
.confirm__actions .btn--ghost { width: 100%; }

@media (min-width: 480px) {
  .confirm { margin: auto; }
  .confirm__actions { flex-direction: row-reverse; }
  .confirm__actions .btn { flex: 1; }
  .confirm__actions .btn--ghost { width: auto; flex: 0 0 auto; }
}

@starting-style {
  .confirm[open] { opacity: 0; transform: translateY(8px); }
}
.confirm[open] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .confirm[open] { transition: none; }
  @starting-style { .confirm[open] { opacity: 1; transform: none; } }
}