/* ============================================================
   CONFRAPAG TERMINAL v0.1
   Marca: CONFRAPAG v1.1 (cofre, selo 2280103d783af9ee)
   Tokens oficiais: Azul #10104F · Verde #15F35B · Gradiente #15F35B→#1599FF
   Proibidos pelo brandbook: amarelo, magenta/rosa, laranja, roxo neon.
   Extensão semântica declarada (fora da paleta): --state-declined.
   Grid base 8px · raios sm6 md8 lg12 xl16 pill100 · botão pill peso 700.
   ============================================================ */

:root {
  /* --- tokens de marca (não alterar sem nova versão do brandbook) --- */
  --brand-blue:  #10104F;
  --brand-green: #15F35B;
  --brand-grad-a: #15F35B;
  --brand-grad-b: #1599FF;
  --brand-white: #FFFFFF;

  /* --- extensão semântica: a paleta CONFRAPAG não define cor de erro.
         Necessária para segurança: recusa precisa ser distinguível
         num relance. Não usa nenhuma cor proibida. --- */
  --state-declined: #FF5252;

  /* --- grid --- */
  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px;
  --2xl: 48px; --3xl: 64px;
  --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 100px;

  --font: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* dark é o padrão (brandbook §20) */
:root, :root[data-theme="dark"] {
  --bg: #06061A;              /* derivado do azul da marca, HUD extremamente escuro */
  --surface: #0C0C33;
  --surface-2: var(--brand-blue);
  --line: rgba(255,255,255,.10);
  --text: var(--brand-white);
  --text-dim: rgba(255,255,255,.58);
  --accent: var(--brand-green);
}

:root[data-theme="light"] {
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #EDEFF7;
  --line: rgba(16,16,79,.14);
  --text: var(--brand-blue);
  --text-dim: rgba(16,16,79,.60);
  --accent: #0BB84A;          /* verde escurecido para contraste AA no claro */
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F5F6FA; --surface: #FFFFFF; --surface-2: #EDEFF7;
    --line: rgba(16,16,79,.14); --text: var(--brand-blue);
    --text-dim: rgba(16,16,79,.60); --accent: #0BB84A;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* O atributo `hidden` vale display:none pela folha do navegador, mas QUALQUER
   regra de autor com `display` a vence. Sem isto, `.pix-box{display:grid}`
   deixaria o QR visível numa cobrança já paga — convite a pagamento duplicado. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------- sem zoom

   `touch-action: manipulation` mata o zoom por toque duplo. É o caminho de
   zoom mais fácil de acionar sem querer aqui: os alvos são botões grandes e
   colados (teclado numérico), e dois toques rápidos no MESMO botão — corrigir
   um dígito, insistir num botão que pareceu não responder — viram gesto de
   zoom em vez de dois toques. Ele também remove o atraso de ~300 ms que o
   navegador segura esperando para saber se o segundo toque vem.

   `text-size-adjust: 100%` impede o iOS de inflar o texto por conta própria
   ao girar para paisagem. Isso é zoom que ninguém pediu e que desalinha a
   coluna de valores — a fonte deve ser sempre a que o brandbook define.

   O zoom por PINÇA não se desliga por CSS. Ver o handler de `gesturestart`
   em app.js e o WKWebView em ios/App/TerminalApp.swift.                    */
html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Piso tipográfico de campo — é parte da mesma trava, não estética.
   Abaixo de 16px o iOS amplia a página sozinho ao focar o campo. Antes isso
   era só chato: o vendedor desfazia com a pinça. Agora a pinça está desligada,
   então esse zoom não teria volta e ele terminaria a venda com a tela torta.
   Global de propósito: `.pin-input`, `.co input` e `.rc input` já cumprem o
   piso e vencem por especificidade, mas campo novo criado fora desses
   containers nasceria desprotegido. `max()` respeita quem aumentou a fonte
   padrão do navegador em vez de prendê-la em 16px. */
input, select, textarea { font-size: max(16px, 1rem); }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--md);
  -webkit-font-smoothing: antialiased;
}

/* halo sutil no gradiente da marca */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 40% at 50% -10%, rgba(21,243,91,.10), transparent 70%),
    radial-gradient(50% 40% at 50% 110%, rgba(21,153,255,.08), transparent 70%);
}

/* ---------------------------------------------------------- shell */

.terminal {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

.head {
  display: flex; align-items: center; gap: var(--sm);
  padding: var(--md) var(--lg);
  border-bottom: 1px solid var(--line);
}
.home { background: none; border: none; padding: 0; cursor: pointer;
        display: block; line-height: 0; }
.home:active { opacity: .6; }
.head img { height: 22px; width: auto; display: block; }
/* Troca de logo por tema. Vale em QUALQUER lugar que use o par dark/light —
   o comprovante repete o cabeçalho, e uma regra presa a `.head` deixava os
   dois logos visíveis ao mesmo tempo lá. */
:root[data-theme="light"] img.dark-logo { display: none; }
:root:not([data-theme="light"]) img.light-logo { display: none; }

.head .sub {
  margin-left: auto; font-size: 11px; letter-spacing: .16em;
  font-weight: 700; color: var(--text-dim);
}

/* faixa de demonstração */
.demo-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px var(--lg); font-size:10.5px; font-weight:800; letter-spacing:.12em;
  background:linear-gradient(135deg, rgba(21,243,91,.14), rgba(21,153,255,.14));
  color:var(--accent); border-bottom:1px solid rgba(21,243,91,.28);
}
.demo-dot{width:7px; height:7px; border-radius:100px; background:currentColor;
          animation:pulsa 2s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .demo-dot{animation:none} }

/* ---------------------------------------------------------- passo 1: método */

.step { padding: var(--xl) var(--lg) var(--lg); display: grid; gap: var(--sm); }
.step-label { font-size: 11px; letter-spacing: .16em; font-weight: 700;
              color: var(--text-dim); margin-bottom: var(--sm); }

/* --- seletor de método, no alto da tela única --- */

.methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--xs);
           padding: var(--md) var(--lg) 0; }

/* Alvo de toque mínimo de 44px (WCAG 2.5.5). Botão de método com 38px
   era o mais tocado do app e o mais fácil de errar. */
.method {
  font-family: var(--font); cursor: pointer; text-align: center;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: var(--r-md);
  min-height: 46px; padding: 12px 4px;
  transition: color .15s, border-color .15s, background .15s;
}
.method:hover:not([disabled]) { border-color: rgba(21,243,91,.4); }
.method[aria-pressed="true"] {
  color: var(--brand-blue); border-color: transparent;
  background: linear-gradient(135deg, var(--brand-grad-a), var(--brand-grad-b));
}
:root[data-theme="light"] .method[aria-pressed="true"] { color: #fff; }
.m-name { font-size: 11px; font-weight: 800; letter-spacing: .04em; }

.note-small { padding: var(--sm) var(--lg) 0; font-size: 11px; line-height: 1.5;
              color: var(--text-dim); }

.chip-btn { background: none; border: none; cursor: pointer;
            font-family: var(--font); font-size: 12px; color: var(--text-dim);
            text-decoration: underline;
            /* padding generoso: o rótulo é pequeno, a área de toque não */
            padding: 12px 16px; min-height: 44px; }

/* ---------------------------------------------------------- valor */

.amount-wrap { padding: var(--xl) var(--lg) var(--lg); text-align: center; }
.amount-label { font-size: 11px; letter-spacing: .18em; color: var(--text-dim);
                font-weight: 700; margin-bottom: var(--sm); }
.amount {
  font-size: 52px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
  background: linear-gradient(135deg, var(--brand-grad-a), var(--brand-grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.amount.zero { background: none; color: var(--text-dim); -webkit-text-fill-color: currentColor; }
.hint { margin-top: var(--sm); font-size: 12px; color: var(--text-dim); min-height: 16px; }
.hint.err { color: var(--state-declined); }

/* ---------------------------------------------------------- teclado */

.pad { display: grid; grid-template-columns: repeat(3, 1fr);
       gap: var(--sm); padding: 0 var(--lg) var(--lg);
       transition: opacity .2s ease; }

/* Teclado travado até um método ser escolhido. Apagar em vez de esconder
   mostra ao operador que ele existe e o que falta para liberá-lo. */
.pad.locked { opacity: .22; pointer-events: none; }
.key {
  font-family: var(--font); font-size: 22px; font-weight: 600;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--md) 0; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.key:hover { border-color: rgba(21,243,91,.45); }
.key:active { transform: scale(.96); background: rgba(21,243,91,.14); }
.key.util { font-size: 18px; color: var(--text-dim); }

/* ---------------------------------------------------------- ações */

.actions { padding: 0 var(--lg) var(--lg); display: grid; gap: var(--sm); }

/* Na tela de status o conteúdo cresce (QR + pagador) e o botão de sair
   cairia abaixo da dobra. Fixa a barra para "NOVA TRANSAÇÃO" estar sempre
   ao alcance. */
.actions.sticky {
  position: sticky; bottom: 0; padding-top: var(--md);
  background: linear-gradient(to top, var(--surface) 72%, transparent);
}

.btn {
  font-family: var(--font); font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: opacity .15s ease, transform .08s ease;
}
.btn:active { transform: scale(.98); }
/* Desabilitado PERDE o gradiente, não só a opacidade. Um botão primário
   apagado ainda lê como clicável, e toque que não responde parece defeito
   do app em vez de estado. */
.btn:disabled {
  cursor: not-allowed;
  background: var(--surface-2) !important;
  color: var(--text-dim) !important;
  border-color: var(--line);
  opacity: 1;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-grad-a), var(--brand-grad-b));
  color: var(--brand-blue);
}
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line); }
.btn-danger { background: var(--state-declined); color: #fff; }

/* ---------------------------------------------------------- telas */

.screen { display: none; }
.screen.on { display: block; }

.confirm-box { padding: var(--lg); }
.rows { display: grid; gap: 1px; background: var(--line);
        border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.row { display: flex; justify-content: space-between; gap: var(--md);
       padding: 12px var(--md); background: var(--surface); font-size: 13px; }
.row .k { color: var(--text-dim); }
.row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.row .v.big { color: var(--accent); }

/* ---------------------------------------------------------- status */

.status { padding: var(--3xl) var(--lg); text-align: center; }
.glyph {
  width: 84px; height: 84px; margin: 0 auto var(--lg);
  border-radius: var(--r-pill); display: grid; place-items: center;
  font-size: 40px; font-weight: 800; border: 2px solid currentColor;
}
.glyph.ok      { color: var(--brand-green); }
.glyph.no      { color: var(--state-declined); }
.glyph.wait    { color: var(--brand-grad-b); }
.glyph.unknown { color: var(--text-dim); }
.glyph.wait::after {
  content: ""; width: 26px; height: 26px; border-radius: var(--r-pill);
  border: 3px solid currentColor; border-top-color: transparent;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.status-word { font-size: 24px; font-weight: 800; letter-spacing: .1em; }
.status-amount { margin-top: var(--sm); font-size: 30px; font-weight: 800;
                 font-variant-numeric: tabular-nums; }
.status-note { margin-top: var(--md); font-size: 13px; color: var(--text-dim);
               line-height: 1.5; }
.status-id { margin-top: var(--lg); font-family: var(--mono); font-size: 11px;
             color: var(--text-dim); }

/* ---------------------------------------------------------- pagador */

.rows.payer { margin-top: var(--lg); text-align: left; }
.rows.payer .v { font-size: 12px; }
.rows.payer .v.mono { font-family: var(--mono); font-size: 10px; }

/* ---------------------------------------------------------- sessão */

.pin-input {
  width: 100%; font-family: var(--mono); font-size: 30px; font-weight: 700;
  letter-spacing: .38em; text-align: center; text-indent: .38em;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--md); margin-top: var(--sm);
}
.pin-input:focus { outline: none; border-color: rgba(21,243,91,.55); }

/* ---------------------------------------------------------- checkout */

.co { padding: var(--md) var(--lg) var(--sm); display: grid; gap: var(--md); }

.co-head { display: flex; align-items: baseline; gap: var(--sm);
           padding-bottom: var(--sm); border-bottom: 1px solid var(--line); }
.co-amount { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
             color: var(--accent); }
.co-meta { margin-left: auto; font-size: 11px; letter-spacing: .1em;
           font-weight: 700; color: var(--text-dim); }

.co-group { display: grid; gap: var(--sm); }
.co-label { font-size: 10px; letter-spacing: .16em; font-weight: 800;
            color: var(--text-dim); }

/* Vale para TODO campo do checkout, inclusive `type=password` (o CVV).
   Listar tipos um a um deixou o CVV sem estilo — ele ficou com 20px de
   altura contra 45px dos demais. */
.co input:not([type="checkbox"]) {
  /* 16px é o mínimo: abaixo disso o Safari do iOS dá ZOOM ao focar o campo,
     e a tela salta no meio da digitação do cartão. Não reduzir. */
  width: 100%; font-family: var(--font); font-size: 16px;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px var(--md); min-width: 0;
}
.co input::placeholder { color: var(--text-dim); }
.co input:focus { outline: none; border-color: rgba(21,243,91,.55); }
.co input.bad { border-color: var(--state-declined); }

.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm); }
.co-field { position: relative; }
.co-brand {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--accent);
  pointer-events: none; text-transform: uppercase;
}
/* O CVV é um campo igual aos outros — mesma borda, mesma altura, mesma
   tipografia. A única diferença é o olho, que revela enquanto pressionado. */
.co-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--text-dim); padding: 0;
}
.co-eye svg { width: 18px; height: 18px; display: block; }
.co-eye:active, .co-eye[aria-pressed="true"] { color: var(--accent); }
/* espaço para o olho não cobrir o texto digitado */
#f-cvv { padding-right: 44px; }
/* os dots do type=password ficam com o mesmo peso dos outros campos */
#f-cvv[type="password"] { letter-spacing: .18em; }

/* campo preenchido pela câmera: some ao operador tocar nele */
.co input.scanned { border-color: rgba(21,243,91,.45); }

.co-auto { font-size: 12px; color: var(--text-dim); line-height: 1.45;
           background: var(--surface-2); border: 1px solid var(--line);
           border-radius: var(--r-md); padding: 10px var(--md); }
.co-auto.ok { color: var(--text); }

.co-hint { font-size: 11px; line-height: 1.5; color: var(--text-dim);
           background: rgba(21,243,91,.07); border: 1px solid rgba(21,243,91,.22);
           border-radius: var(--r-md); padding: 10px var(--md); }
.co-hint b { color: var(--accent); }

.co-check { display: flex; align-items: center; gap: var(--sm);
            font-size: 12px; color: var(--text-dim); cursor: pointer; }
/* caixa maior e rótulo com área de toque: marcar consentimento no balcão
   não pode exigir mira. */
.co-check { min-height: 44px; }
.co-check input { width: 22px; height: 22px; accent-color: var(--brand-green); }

/* ---------------------------------------------------------- comprovante */

/* O comprovante é um DOCUMENTO, com cabeçalho próprio. Quando ele está
   aberto, o cabeçalho do app sai de cena — senão o logo aparece duas vezes,
   e no PDF exportado a moldura do app entraria junto com o documento. */
body:has(#screen-receipt.on) .head { display: none; }

.rc { padding: var(--lg); display: grid; gap: var(--md);
      background: var(--surface); }
.rc-head { display: flex; align-items: center; gap: var(--sm);
           padding-bottom: var(--md); border-bottom: 1px solid var(--line); }
.rc-head img { height: 18px; width: auto; }
.rc-title { margin-left: auto; font-size: 10px; letter-spacing: .12em;
            font-weight: 800; color: var(--text-dim); }

.rc-amount { font-size: 34px; font-weight: 800; text-align: center;
             font-variant-numeric: tabular-nums; color: var(--accent); }
.rc-state { text-align: center; font-size: 11px; letter-spacing: .16em;
            font-weight: 800; color: var(--text-dim); margin-top: calc(-1 * var(--sm)); }

.rc-rows { display: grid; gap: 1px; background: var(--line);
           border: 1px solid var(--line); border-radius: var(--r-md);
           overflow: hidden; }
.rc-rows .row { display: flex; justify-content: space-between; gap: var(--md);
                padding: 9px var(--md); background: var(--surface); font-size: 12px; }
.rc-rows .k { color: var(--text-dim); }
.rc-rows .v { font-weight: 700; text-align: right; word-break: break-word; }
.rc-rows .v.mono { font-family: var(--mono); font-size: 10px; }

.rc-sign { display: grid; gap: var(--sm); }
.rc-sign-label { font-size: 10px; letter-spacing: .12em; font-weight: 800;
                 color: var(--text-dim); }
#rc-canvas { width: 100%; height: 150px; display: block; touch-action: none;
             background: var(--surface-2); border: 1px solid var(--line);
             border-radius: var(--r-md); cursor: crosshair; }
.rc-sign-line { height: 1px; background: var(--line); margin: 0 var(--lg); }
#rc-sign-img { width: 100%; max-height: 150px; object-fit: contain;
               background: var(--surface-2); border: 1px solid var(--line);
               border-radius: var(--r-md); }

.rc-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover;
            border: 1px solid var(--line); border-radius: var(--r-md);
            background: var(--surface-2); }

.rc-foot { display: flex; justify-content: space-between; font-size: 10px;
           color: var(--text-dim); letter-spacing: .05em;
           border-top: 1px solid var(--line); padding-top: var(--sm); }

.rc input { width: 100%; font-family: var(--font); font-size: 16px;
            color: var(--text); background: var(--surface-2);
            border: 1px solid var(--line); border-radius: var(--r-md);
            padding: 12px var(--md); min-height: 46px; }
.rc input:focus { outline: none; border-color: rgba(21,243,91,.55); }

/* ---------------------------------------------------------- histórico */

.ghost-link { margin: var(--sm) auto 0; display: block; }

.hist { display: grid; gap: 1px; background: var(--line);
        border: 1px solid var(--line); border-radius: var(--r-lg);
        overflow: hidden; max-height: 340px; overflow-y: auto; }
.hist-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sm);
  align-items: center; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font); color: var(--text);
  background: var(--surface); border: none; padding: 11px var(--md);
}
.hist-item:hover { background: var(--surface-2); }
.hist-when { font-size: 10px; color: var(--text-dim); }
.hist-amount { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
               grid-row: 1 / span 2; }
.hist-who { font-size: 12px; font-weight: 600; }
.hist-st { font-size: 10px; letter-spacing: .08em; font-weight: 800; }
.hist-st.ok { color: var(--brand-green); }
.hist-st.no { color: var(--state-declined); }
.hist-st.wait { color: var(--text-dim); }

/* ---------------------------------------------------------- Pix */

.pix-box { margin-top: var(--lg); display: grid; gap: var(--sm); justify-items: center; }
.pix-box img { width: 200px; height: 200px; border-radius: var(--r-md);
               background: #fff; padding: var(--sm); display: block; }
.pix-code { font-family: var(--mono); font-size: 10px; line-height: 1.45;
            color: var(--text-dim); word-break: break-all; text-align: left;
            max-height: 74px; overflow-y: auto; width: 100%;
            background: var(--surface-2); border: 1px solid var(--line);
            border-radius: var(--r-md); padding: var(--sm); }
.pix-box .btn { width: 100%; }

/* método indisponível */
.method[disabled] { opacity: .4; cursor: not-allowed; }
.method[disabled]:hover { border-color: var(--line); }
.m-off { font-size: 11px; color: var(--text-dim); }

.foot { padding: var(--md) var(--lg); border-top: 1px solid var(--line);
        display: flex; justify-content: space-between; align-items: center;
        font-size: 10px; color: var(--text-dim); letter-spacing: .06em; }
.theme-btn { background: none; border: 1px solid var(--line); color: var(--text-dim);
             border-radius: var(--r-pill); padding: 4px 10px; cursor: pointer;
             font-size: 10px; font-family: var(--font); }

/* ============================================================
   CELULAR — o terminal vira o aparelho inteiro.

   Num POS o operador segura o telefone e opera com o polegar: cartão
   flutuando no meio da tela desperdiça a área alcançável e não parece
   um aplicativo. Aqui ele ocupa a tela toda, respeita o notch e a barra
   de gestos (safe-area), e as ações ficam no alcance do polegar.
   ============================================================ */
@media (max-width: 560px) {
  body { padding: 0; align-items: stretch; }
  body::before { position: fixed; }

  .terminal {
    max-width: none; width: 100%;
    min-height: 100vh; min-height: 100dvh;   /* dvh: desconta a barra do Safari */
    border: none; border-radius: 0; box-shadow: none;
    display: flex; flex-direction: column;
  }

  /* respeita notch e barra de gestos do iPhone */
  .head { padding-top: calc(var(--md) + env(safe-area-inset-top)); }
  .foot { padding-bottom: calc(var(--md) + env(safe-area-inset-bottom)); }

  .screen.on { flex: 1; display: flex; flex-direction: column; }

  #screen-pin .step { flex: 1; justify-content: center; gap: var(--md); }

  .methods { padding-left: var(--md); padding-right: var(--md); }
  .method { padding: 12px 2px; }
  .m-name { font-size: 10px; }

  /* o valor cresce e empurra o teclado para baixo, perto do polegar */
  .amount-wrap { flex: 1; display: flex; flex-direction: column;
                 justify-content: center; padding: var(--lg) var(--md); }
  .amount { font-size: 46px; }

  .pad, .actions, .step, .co, .confirm-box, .status, .chip-bar {
    padding-left: var(--md); padding-right: var(--md);
  }
  .key { padding: var(--lg) 0; font-size: 24px; }   /* alvo de toque maior */

  .actions.sticky { padding-bottom: calc(var(--md) + env(safe-area-inset-bottom)); }

  .status { flex: 1; display: flex; flex-direction: column;
            justify-content: center; }
  .pix-box img { width: min(62vw, 240px); height: auto; aspect-ratio: 1; }
}

/* telas muito estreitas */
@media (max-width: 360px) {
  .amount { font-size: 38px; }
  .co-row2 { grid-template-columns: 1fr; }
}