/* ==========================================================================
   HELIX JUMP MAX — Design System (laranja & branco)  [FONTE ÚNICA DE ESTILO]
   Importe em TODAS as páginas: <link rel="stylesheet" href="/theme.css">
   Tema claro (fintech/Pix), laranja + branco, mobile-first.
   Cor só entra por token (--brand*, --ink*, --ok*, --danger). Sem hex solto
   nas páginas: se faltar um tom, crie o token aqui.
   ========================================================================== */
:root{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* superfícies */
  --bg:#fff6ee; --card:#ffffff; --card2:#fff8f2; --line:#f0e6da; --line2:#e0d2c2;
  --track:#fdf1e6;                 /* trilho de abas/segmented */
  --text:#1a1613; --muted:#6b6259; --soft:#a89d91;

  /* marca (laranja) */
  --brand:#ff7a00; --brand-d:#e05f00; --brand-2:#ffa040;
  --brand-bg:rgba(255,122,0,.10); --brand-ink:#8a3d00; --on-brand:#ffffff;
  --brand-line:rgba(255,122,0,.35);
  --brand-glow:rgba(255,122,0,.42); --brand-glow-s:rgba(255,122,0,.22);

  /* semânticas */
  --ok:#12b76a; --ok-d:#0a9355; --ok-bg:rgba(18,183,106,.12); --ok-line:rgba(18,183,106,.4);
  --danger:#ef4444;
  /* destaque quente (promo/ativo) — proximo da marca, mas nao e a marca */
  --hot:#f59e0b; --hot-d:#d97706; --hot-bg:rgba(245,158,11,.12); --hot-ink:#b45309;

  /* profundidade — sombra quente, nunca azulada */
  --shadow:0 20px 46px rgba(120,62,10,.16); --shadow-s:0 8px 22px rgba(120,62,10,.10);
  --scrim:rgba(58,30,6,.45);       /* fundo de modal */

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{font-family:var(--font); color:var(--text); line-height:1.55; overflow-x:hidden; background:var(--bg);
  background-image:radial-gradient(72% 55% at 88% -10%,rgba(255,122,0,.14),transparent 60%),radial-gradient(55% 45% at -8% 10%,rgba(255,160,64,.10),transparent 55%),radial-gradient(60% 45% at 50% 112%,rgba(18,183,106,.06),transparent 60%);
  background-attachment:fixed;}
svg{display:block;} a{color:var(--brand); text-decoration:none;}
.wrap{max-width:520px; margin:0 auto; padding:0 16px;}

/* Botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:900; cursor:pointer; border:none; border-radius:15px; font-size:15px; padding:14px 22px; letter-spacing:.2px; transition:transform .08s,box-shadow .2s,filter .2s;}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-d)); color:var(--on-brand); box-shadow:0 0 0 1px var(--brand-line),0 12px 28px var(--brand-glow);}
.btn.primary:hover{filter:brightness(1.05);}
.btn.green{background:linear-gradient(135deg,var(--ok),var(--ok-d)); color:var(--on-brand); box-shadow:0 0 0 1px var(--ok-line),0 12px 26px var(--ok-line);}
.btn.purple{background:linear-gradient(135deg,var(--brand),var(--brand-d)); color:var(--on-brand); box-shadow:0 0 0 1px var(--brand-line),0 12px 26px var(--brand-glow);}
.btn.ghost{background:var(--card); color:var(--text); border:1.5px solid var(--line2);}
.btn.big{font-size:18px; padding:18px 28px; width:100%;}
.btn.block{width:100%;}
.btn:active{transform:translateY(1px);} .btn:disabled{opacity:.5; cursor:not-allowed; filter:grayscale(.3);}

/* Header */
header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding-top:var(--safe-t);}
.hd{display:flex; align-items:center; justify-content:space-between; height:60px;}
.logo{display:flex; align-items:center; gap:9px; font-weight:900; font-size:20px; letter-spacing:-.6px; color:var(--text);}
.logo .ball{width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff8a7a,var(--danger)); box-shadow:0 0 12px rgba(255,77,61,.55);}
.logo em{font-style:normal; background:linear-gradient(120deg,var(--brand),var(--brand-d)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hdRight{display:flex; align-items:center; gap:7px;}
.saldoPill{display:inline-flex; align-items:center; gap:4px; background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-d); font-weight:900; font-size:13.5px; padding:8px 12px; border-radius:99px; white-space:nowrap; cursor:pointer;}
.hdBtn{font-family:inherit; font-weight:800; font-size:13px; padding:9px 13px; border-radius:12px; cursor:pointer; border:1.5px solid var(--line2); background:var(--card); color:var(--text); white-space:nowrap;}
.hdBtn.y{background:linear-gradient(135deg,var(--brand),var(--brand-d)); color:var(--on-brand); border:none; box-shadow:0 6px 16px var(--brand-glow);}
.hdBack{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:14px;color:var(--muted);cursor:pointer;background:none;border:none;font-family:inherit;}

/* Cards / superfícies */
.card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow-s);}
.panel{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:var(--shadow-s);}
.badge{display:inline-flex; align-items:center; gap:7px; background:var(--brand-bg); color:var(--brand-d); border:1px solid var(--brand-line); font-weight:900; font-size:12px; letter-spacing:.4px; padding:7px 13px; border-radius:99px; text-transform:uppercase;}
.tpill{display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line2); padding:8px 13px; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--muted);} .tpill b{color:var(--text);} .tpill svg{color:var(--ok);}

/* Títulos de seção */
.sec-h{display:flex; align-items:center; gap:9px; margin-bottom:4px;}
.sec-h .bar{width:5px; height:24px; border-radius:3px; background:linear-gradient(var(--brand),var(--brand-2));}
.sec-t{font-size:22px; font-weight:900; letter-spacing:-.6px;}
.sec-s{color:var(--muted); font-size:14px; margin:0 0 16px 14px;}

/* Formulários */
.field{margin-bottom:14px;} .field label{display:block; font-size:12.5px; font-weight:800; color:var(--muted); margin-bottom:6px; letter-spacing:.3px;}
.input{width:100%; font-family:inherit; font-size:16px; font-weight:600; color:var(--text); background:var(--card2); border:1.5px solid var(--line2); border-radius:14px; padding:14px 15px; transition:border-color .15s,box-shadow .15s; outline:none;}
.input::placeholder{color:var(--soft);} .input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow-s); background:var(--card);}
.formErr{color:var(--danger); font-size:13px; font-weight:700; margin-top:4px; min-height:1px;}

/* Abas */
.tabs{display:flex; gap:6px; background:var(--track); border:1px solid var(--line); border-radius:16px; padding:5px;}
.tabs button{flex:1; font-family:inherit; font-weight:900; font-size:14px; color:var(--muted); background:none; border:none; padding:11px; border-radius:12px; cursor:pointer;}
.tabs button.on{background:linear-gradient(135deg,var(--brand),var(--brand-d)); color:var(--on-brand); box-shadow:0 4px 14px var(--brand-glow);}

/* Bottom-sheet (modais que sobem de baixo, grudados, largura total) */
.sheetBack{position:fixed; inset:0; z-index:80; background:var(--scrim); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .28s,visibility .28s;}
.sheetBack.on{opacity:1; visibility:visible;}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:81; max-width:520px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-bottom:none;
  border-radius:26px 26px 0 0; padding:10px 20px calc(24px + var(--safe-b)); box-shadow:0 -18px 50px rgba(120,62,10,.28);
  transform:translateY(101%); transition:transform .34s cubic-bezier(.2,.9,.25,1); max-height:92vh; overflow-y:auto;}
.sheet.on{transform:translateY(0);}
.sheet .grip{width:42px; height:5px; border-radius:99px; background:var(--line2); margin:2px auto 14px;}
.sheet h2{font-size:21px; font-weight:900; letter-spacing:-.4px; margin-bottom:4px;}
.sheet .sub{color:var(--muted); font-size:13.5px; margin-bottom:16px;}

/* Utilidades */
.muted{color:var(--muted);} .green{color:var(--ok-d);} .row{display:flex; gap:10px;} .stack{display:flex; flex-direction:column; gap:12px;}
.spin{width:20px;height:20px;border:2.5px solid var(--brand-line);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg)}}
.chipRow{display:flex; gap:8px; flex-wrap:wrap;}
.valChip{flex:1; min-width:70px; text-align:center; font-weight:900; font-size:15px; padding:13px 8px; border-radius:14px; background:var(--card2); border:1.5px solid var(--line2); color:var(--text); cursor:pointer; transition:.12s;}
.valChip.on{border-color:var(--brand); background:var(--brand-bg); color:var(--brand-d); box-shadow:0 6px 16px var(--brand-glow-s);}

/* Menu inferior (bottom nav do app) */
.bnav{position:fixed; left:0; right:0; bottom:0; z-index:50; max-width:520px; margin:0 auto; display:flex; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:8px 6px calc(8px + var(--safe-b));}
.bnav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:var(--soft); padding:4px 0;}
.bnav a.on{color:var(--brand);} .bnav a.on svg{filter:drop-shadow(0 0 6px var(--brand-glow));}
.bnav svg{width:22px; height:22px;}

/* --------------------------------------------------------------------------
   Regras de plataforma — valem para toda página que carrega este arquivo.
   -------------------------------------------------------------------------- */

/* iOS: campo com fonte < 16px faz o Safari dar zoom e não desfaz. 16px literal
   (nunca 1rem) e !important porque o <style> inline das páginas vem depois. */
@media (max-width:768px), (pointer:coarse){
  input, select, textarea{ font-size:16px !important; }
}

/* Área de toque mínima: alvo pequeno demais é erro de toque no celular.
   O ::before cresce a área sem mexer no desenho — por isso o alvo não pode
   ser position:static (senão o ::before ancora no avô e cobre a tela). */
.hdBack, .tabs button, .bnav a{ position:relative; }
.hdBack::before{ content:""; position:absolute; inset:-15px -12px; }
.tabs button::before{ content:""; position:absolute; inset:-4px 0; }

/* Foco visível para quem navega por teclado (o outline padrão some com o reset) */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }