:root{
  --bg:#0F1113; --sf:#17191C; --sf2:#1F2226;
  --bd:rgba(255,255,255,.09); --bd-forte:rgba(255,255,255,.16);
  --tx:#ECEAE6; --mu:#8B8880; --fraco:#5A574F;
  --ac:#32BCAD; --ac-fundo:rgba(50,188,173,.12);
  --ok:#5BD69B; --av:#E8A33D; --er:#E5574C;
  --r:12px; --r-p:9px;
  --seg:1px solid var(--bd);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
h1,h2,p{margin:0}
button,input{font:inherit;color:inherit}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.app{max-width:520px;margin:0 auto;padding:18px 18px 24px}
.pagina{animation:sobe .22s ease-out}
@keyframes sobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.eyebrow{display:block;font-size:11px;letter-spacing:.09em;color:var(--ac);margin-bottom:4px}
.titulo{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-bottom:20px}
.rotulo{display:block;font-size:11px;letter-spacing:.06em;color:var(--mu);margin-bottom:6px}

.passo{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.passo-num{font-size:11px;color:var(--fraco)}
.passo-txt{font-size:13px;color:var(--mu)}

.painel{display:block;width:100%;text-align:left;background:var(--sf);border:var(--seg);
  border-radius:var(--r);padding:14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.painel[aria-pressed="true"]{border-color:var(--ac);background:var(--ac-fundo)}
.painel-linha{display:flex;justify-content:space-between;align-items:center}
.painel-nome{font-size:16px}
.painel-meta{font-size:11px;color:var(--mu)}

.medidor{width:100%;background:var(--sf2);border:var(--seg);border-radius:var(--r);
  color:var(--tx);font-size:40px;text-align:center;padding:16px 0;margin-bottom:10px;
  -moz-appearance:textfield}
.medidor::-webkit-outer-spin-button,.medidor::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.medidor::placeholder{color:var(--fraco)}

.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}
.chip{background:var(--sf2);border:var(--seg);border-radius:var(--r-p);padding:10px 0;
  font-size:14px;cursor:pointer;transition:.15s}
.chip[aria-pressed="true"]{background:var(--ac-fundo);border-color:var(--ac);color:var(--ac)}

.cartao{background:var(--sf);border:var(--seg);border-radius:var(--r);padding:14px}
.linha{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14px}
.linha span{color:var(--mu)}
.linha-total{border-top:var(--seg);margin-top:5px;padding-top:11px}
.linha-total strong{font-size:20px;color:var(--ac);font-weight:500}
.faixa{font-size:12px;color:var(--ok);min-height:18px;margin:9px 0 15px}
.faixa[data-tipo="dica"]{color:var(--mu)}

.btn{display:block;width:100%;border:0;border-radius:var(--r-p);padding:15px;
  font-size:15px;font-weight:500;cursor:pointer;transition:.15s;text-align:center;text-decoration:none}
.btn-primario{background:var(--ac);color:#04231F}
.btn-primario:hover{background:#3ED4C3}
.btn:disabled{background:var(--sf2);color:var(--fraco);cursor:not-allowed}
.btn-secundario{background:var(--sf2);color:var(--tx);border:var(--seg)}
.btn-texto{background:none;border:0;color:var(--mu);font-size:13px;padding:14px;width:100%;cursor:pointer}
.btn-sair{color:var(--er)}

.campo{width:100%;background:var(--sf2);border:var(--seg);border-radius:var(--r-p);
  padding:13px 14px;font-size:16px;margin-bottom:13px}
.campo::placeholder{color:var(--fraco)}

.portal{min-height:78vh;display:flex;flex-direction:column;justify-content:center}
.marca{width:44px;height:44px;border-radius:12px;background:var(--ac-fundo);
  border:1px solid var(--ac);color:var(--ac);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center}
.marca svg{width:22px;height:22px;fill:currentColor;stroke:none}
.portal-topo{text-align:center;margin-bottom:26px}
.portal-titulo{font-size:20px;font-weight:500;margin-bottom:5px}
.portal-sub{font-size:13px;color:var(--mu)}
.portal-rodape{text-align:center;font-size:12px;color:var(--mu);margin-top:18px}

.trilha{display:flex;gap:5px;list-style:none;padding:0;margin:0 0 20px}
.trilha li{flex:1;font-size:11px;color:var(--mu)}
.trilha i{display:block;height:3px;background:var(--sf2);border-radius:2px;margin-bottom:6px;transition:background .3s}
.trilha li[data-on="ac"]{color:var(--ac)} .trilha li[data-on="ac"] i{background:var(--ac)}
.trilha li[data-on="av"]{color:var(--av)} .trilha li[data-on="av"] i{background:var(--av)}
.trilha li[data-on="ok"]{color:var(--ok)} .trilha li[data-on="ok"] i{background:var(--ok)}

.qr{background:var(--tx);border-radius:var(--r);padding:16px;display:flex;
  align-items:center;justify-content:center;margin-bottom:14px}
.qr img,.qr canvas{display:block;width:100%;max-width:190px;height:auto}
.expira{text-align:center;font-size:12px;color:var(--mu);margin-top:12px}

.selo{width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center}
.selo-ok{background:rgba(91,214,155,.14);border:1px solid var(--ok);color:var(--ok)}
.selo-av{background:rgba(232,163,61,.14);border:1px solid var(--av);color:var(--av)}
.final{text-align:center;padding:20px 0}
.final-titulo{font-size:18px;margin-bottom:6px}
.final-sub{font-size:13px;color:var(--mu);margin-bottom:22px}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.kpi{background:var(--sf);border-radius:var(--r);padding:13px}
.kpi-rot{font-size:11px;color:var(--mu)}
.kpi-num{font-size:22px;margin:2px 0}
.kpi-pe{font-size:11px;color:var(--mu)}

.pedido{display:block;width:100%;text-align:left;background:var(--sf);border:var(--seg);
  border-radius:var(--r);padding:13px;margin-bottom:7px;cursor:pointer}
.pedido-topo{display:flex;justify-content:space-between;margin-bottom:5px;font-size:15px}
.pedido-base{display:flex;justify-content:space-between;font-size:11px}
.pedido-data{color:var(--mu)}
[data-st="creditado"]{color:var(--ok)}
[data-st="pago"],[data-st="inconclusivo"]{color:var(--av)}
[data-st="aguardando_pagamento"]{color:var(--ac)}
[data-st="falha"]{color:var(--er)}
[data-st="expirado"],[data-st="cancelado"]{color:var(--mu)}

.vazio{text-align:center;padding:44px 20px;color:var(--mu)}
.vazio-titulo{font-size:16px;color:var(--tx);margin-bottom:6px}
.vazio-txt{font-size:13px;margin-bottom:20px}

.alerta{border-radius:var(--r-p);padding:12px 13px;font-size:13px;margin-bottom:14px}
.alerta-erro{background:rgba(229,87,76,.1);border:1px solid rgba(229,87,76,.3);color:#F09088}
.alerta-aviso{background:rgba(232,163,61,.1);border:1px solid rgba(232,163,61,.3);color:#F0BE72}

.carregando{text-align:center;color:var(--mu);font-size:13px;padding:44px 0}

.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--bg);
  border-top:var(--seg);padding-bottom:env(safe-area-inset-bottom);z-index:10}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 0 8px;font-size:11px;color:var(--mu);text-decoration:none}
.tabs a[aria-current="page"]{color:var(--ac)}

.toast{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);background:var(--sf2);border:1px solid var(--bd-forte);
  border-radius:var(--r-p);padding:11px 17px;font-size:13px;opacity:0;
  pointer-events:none;transition:.2s;z-index:20;max-width:88vw;text-align:center}
.toast[data-on="1"]{opacity:1;transform:translate(-50%,0)}