/* ============================================================
   Bola de Neve — sistema de design
   Uma só fonte de verdade para as duas telas.
   O laranja vem do próprio logo (#E94E1A), não é escolha avulsa.
   ============================================================ */

:root{
  /* marca */
  --laranja:#E94E1A;
  --laranja-escuro:#CF4315;
  --laranja-claro:#FF8B5E;
  --laranja-fundo:rgba(233,78,26,.09);

  /* superfícies */
  --papel:#FCFCFB;
  --papel-2:#FFFFFF;
  --tinta:#0E1D26;
  --painel:#0E1D26;
  --campo:#16303D;
  --campo-2:#193644;

  /* semântica de dados */
  --verde:#0F7B63;         /* caixa */
  --verde-claro:#5FBFA6;
  --vermelho:#96241A;      /* prejuízo — luminância bem abaixo do laranja, não confunde */
  --vermelho-claro:#FF8A65;

  /* neutros */
  --pedra:#6E8593;
  --pedra-2:#41606F;
  --linha:rgba(14,29,38,.13);
  --linha-forte:rgba(14,29,38,.24);
  --linha-clara:rgba(255,255,255,.13);

  --sans:'Roboto',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --raio:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,3.2vw,40px)}

/* números sempre alinhados em coluna */
.num{font-variant-numeric:tabular-nums}

/* ---------- campo de entrada (usado nas duas telas) ---------- */
.entrada,.moeda{
  display:flex;align-items:center;
  background:var(--campo);
  border:1px solid var(--linha-clara);
  border-radius:var(--raio);
  transition:border-color .14s,box-shadow .14s;
}
.entrada:focus-within,.moeda:focus-within{
  border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(233,78,26,.24);
}
.entrada input,.moeda input{
  flex:1;min-width:0;width:100%;
  background:none;border:0;color:#fff;
  font-family:var(--sans);font-size:15.5px;font-weight:400;
  padding:12px 14px;
}
.entrada input::placeholder,.moeda input::placeholder{color:#5D7A88}
.entrada input:focus,.moeda input:focus{outline:none}
.entrada input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 60px var(--campo) inset;
}

/* prefixo R$ */
.moeda>span,.entrada .prefixo{
  padding-left:14px;color:#8FA8B5;font-size:15px;font-weight:500;flex:none;
}

/* ---------- foco visível padrão ---------- */
:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}