/* =====================================================================
   Simulador de Loterias — estilos
   Linguagem visual: volante de papel sobre o balcão da lotérica.
   Mobile-first; a partir de 760px o volante e os controles ficam lado a lado.
   ===================================================================== */

:root{
  --desk:#15161A;
  --desk-2:#1E2027;
  --paper:#F6F5F1;
  --rule:#CBCAC3;
  --rule-soft:#E4E3DD;
  --graphite:#2A2C33;
  --muted:#7A7A73;
  --danger:#A61324;
  --ink:#209869;            /* trocado por JS conforme a loteria */
  --ink-soft:rgba(32,152,105,.12);
  --tabbar-h:60px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--desk);
  background-image:radial-gradient(ellipse 120% 80% at 50% -10%,var(--desk-2),var(--desk) 70%);
  background-attachment:fixed;
  color:var(--paper);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
button{font-family:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------------------------------------------------- carregando */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--desk);
  font-family:'Courier Prime',monospace;font-size:13px;color:#8D8F98;z-index:60}

/* ------------------------------------------------------------- entrar */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:400px;background:var(--paper);color:var(--graphite);
  border-radius:3px 14px 3px 3px;padding:28px 24px 22px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.brand{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:32px;line-height:.95;
  text-transform:uppercase;margin:0 0 8px}
.brand-sub{font-size:13px;color:var(--muted);margin:0 0 22px;line-height:1.5}

.tabs-auth{display:flex;gap:6px;margin-bottom:18px}
.tabs-auth button{flex:1;border:1px solid var(--rule);background:#fff;padding:10px;border-radius:6px;
  cursor:pointer;font-size:13px;font-weight:600;color:var(--graphite)}
.tabs-auth button.on{background:var(--graphite);color:#fff;border-color:var(--graphite)}

.auth-form label{display:block;font-size:12px;font-weight:700;margin-bottom:13px}
.auth-form input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--rule);
  border-radius:6px;font-size:16px;font-family:inherit;background:#fff;color:var(--graphite)}
.auth-form input:focus{border-color:var(--ink);outline:none}
.auth-form small{display:block;margin-top:5px;font-weight:400;color:var(--muted);font-size:11px}

.or{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule-soft)}
#google-btn{display:flex;justify-content:center;min-height:44px}

.msg{margin:14px 0 0;padding:10px 12px;border-radius:6px;font-size:12.5px;line-height:1.45;
  background:#FBE9EB;color:#7C0E1B;border:1px solid #F0C6CC}
.msg.good{background:#E7F5EE;color:#12603F;border-color:#BFE3D2}
.legal{font-size:11px;color:var(--muted);line-height:1.6;margin:18px 0 0}

/* ------------------------------------------------------------ estrutura */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;background:rgba(21,22,26,.9);backdrop-filter:blur(8px)}
.logo{font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
.avatar{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:#3A3D46 center/cover;
  color:#fff;font-weight:700;font-size:13px}

#main{max-width:1000px;margin:0 auto;padding:8px 14px calc(var(--tabbar-h) + 28px)}
@media (min-width:760px){ #main{padding-bottom:32px} }

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tabbar-h);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(21,22,26,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{border:0;background:none;color:#8D8F98;font-size:11.5px;font-weight:600;cursor:pointer;
  padding:0 2px}
.tabbar button.on{color:#fff}
.tabbar button.on span{border-bottom:2px solid var(--ink);padding-bottom:3px}
@media (min-width:760px){
  .tabbar{position:sticky;top:58px;bottom:auto;height:auto;max-width:1000px;margin:0 auto 14px;
    border-top:0;background:none;backdrop-filter:none;grid-template-columns:repeat(5,max-content);gap:4px}
  .tabbar button{padding:8px 16px;border-radius:6px}
  .tabbar button.on{background:rgba(255,255,255,.1)}
}

/* --------------------------------------------------- seletor de loteria */
.lottery-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lottery-strip::-webkit-scrollbar{display:none}
@media (min-width:900px){ .lottery-strip{flex-wrap:wrap;overflow:visible} }
.lottery-strip button{flex:none;border:0;cursor:pointer;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.09);border-radius:6px;padding:10px 14px;
  font-family:'Anton',sans-serif;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.lottery-strip button[aria-selected="true"]{background:var(--ink)}

/* ----------------------------------------------------------- o volante */
.sheet{background:var(--paper);color:var(--graphite);border-radius:3px 12px 3px 3px;overflow:hidden;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.75);display:grid;grid-template-columns:1fr}
@media (min-width:760px){ .sheet{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }

.banner{grid-column:1/-1;background:var(--ink);color:#fff;padding:9px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.banner b{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:16px}
.banner span{font-family:'Courier Prime',monospace;font-size:11px;opacity:.92}

.pane{padding:18px;min-width:0}
@media (min-width:760px){ .pane+.pane{border-left:1px solid var(--rule-soft)} }
@media (max-width:759px){ .pane+.pane{border-top:1px solid var(--rule-soft)} }

.eyebrow{font-family:'Courier Prime',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}

.grid{display:grid;gap:4px}
.cell{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--rule);border-radius:4px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:clamp(9px,2.4vw,13px);
  color:#6E6E68;background:#fff;position:relative}
.cell.marked{background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cell.marked::after{content:"";position:absolute;inset:1px;border-radius:3px;
  background:repeating-linear-gradient(58deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px)}
.grid.anim .cell.marked{animation:ink .26s cubic-bezier(.2,1.5,.4,1) both}
@keyframes ink{from{transform:scale(.55) rotate(-9deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

.col-grid{display:grid;gap:6px;grid-auto-flow:column;grid-auto-columns:1fr}
.col{display:grid;gap:4px}
.col-head{font-family:'Courier Prime',monospace;font-size:9.5px;color:var(--muted);text-align:center}

.extras{margin-top:14px;border-top:1px dashed var(--rule);padding-top:12px}
.extras .eyebrow{margin-bottom:7px}
.chip{display:inline-block;background:var(--ink);color:#fff;border-radius:14px;padding:4px 11px;
  font-family:'Courier Prime',monospace;font-size:12px;font-weight:700;margin:0 5px 5px 0}
.chip.todo{background:#EDECE6;color:var(--muted);font-weight:400}

/* --------------------------------------------------------- controles */
.field{margin-bottom:15px}
.field>label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}
.stepper{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;width:fit-content}
.stepper button{width:44px;height:44px;border:0;background:#fff;font-size:20px;line-height:1;cursor:pointer;color:var(--graphite)}
.stepper button:hover:not(:disabled){background:var(--ink);color:#fff}
.stepper button:disabled{opacity:.28;cursor:not-allowed}
.stepper output{min-width:58px;display:grid;place-items:center;background:#fff;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:16px}
.hint{font-size:11.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}

.seg{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;background:#fff;padding:11px 8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--graphite)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed;background:#F1F0EB}
.seg.small button{padding:7px 12px;font-size:11.5px}

.btn-go{width:100%;border:0;background:var(--graphite);color:#fff;padding:16px;border-radius:6px;cursor:pointer;
  font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.07em;text-transform:uppercase}
.btn-go:hover{background:var(--ink)}
.btn-go:disabled{opacity:.55;cursor:wait}
.odds{margin-top:12px;border-top:1px dashed var(--rule);padding-top:11px;
  font-family:'Courier Prime',monospace;font-size:11.5px;color:var(--muted);line-height:1.6}
.odds b{color:var(--graphite);font-size:13px}

.fine{grid-column:1/-1;border-top:1px solid var(--rule-soft);background:#EDECE6;padding:12px 18px;
  font-family:'Courier Prime',monospace;font-size:10.5px;line-height:1.7;color:#5F5F58;
  text-transform:uppercase;letter-spacing:.02em}

/* --------------------------------------------------------- comprovante */
.receipt{margin-top:18px;background:var(--paper);color:var(--graphite);border-radius:3px;padding:16px 16px 20px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid var(--graphite);padding-bottom:8px;margin-bottom:2px}
.rhead h2{font-family:'Anton',sans-serif;font-weight:400;font-size:16px;letter-spacing:.05em;
  text-transform:uppercase;margin:0}
.rhead-actions{display:flex;gap:6px}
.btn-ghost{border:1px solid var(--rule);background:#fff;border-radius:5px;padding:7px 12px;font-size:11.5px;
  font-weight:600;cursor:pointer;color:var(--graphite)}
.btn-ghost:hover{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.btn-ghost.danger{color:var(--danger);border-color:#E8C4CA;margin-top:14px}
.btn-ghost.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-primary{width:100%;border:0;background:var(--graphite);color:#fff;padding:14px;border-radius:6px;
  cursor:pointer;font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.btn-primary:hover{background:var(--ink)}
.btn-primary:disabled{opacity:.55;cursor:wait}

.row{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px dashed var(--rule);
  font-family:'Courier Prime',monospace}
.row .pick{width:22px;height:22px;flex:none;border:1.5px solid var(--rule);border-radius:4px;
  display:grid;place-items:center;cursor:pointer;background:#fff;padding:0;color:#fff;font-size:13px;line-height:1}
.row .pick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.row .nums{flex:1;min-width:0;font-size:14px;font-weight:700;letter-spacing:.08em;word-spacing:.15em}
.row .meta{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.row .star{border:0;background:none;cursor:pointer;font-size:17px;line-height:1;color:var(--rule);padding:2px 4px}
.row .star[aria-pressed="true"]{color:var(--ink)}
.empty{padding:24px 2px;color:var(--muted);font-size:13px;line-height:1.55}

.cart{position:sticky;bottom:0;margin:14px -16px -20px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:2px solid var(--graphite);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cart span{flex:1;min-width:130px;font-family:'Courier Prime',monospace;font-size:12px}
.cart .btn-primary{width:auto;flex:none;padding:13px 20px}

.order{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 2px;
  border-bottom:1px dashed var(--rule);cursor:pointer}
.order:hover{background:rgba(0,0,0,.03)}
.order .ref{font-family:'Courier Prime',monospace;font-weight:700;font-size:13px}
.order .when{font-size:11px;color:var(--muted)}
.badge{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:4px 9px;border-radius:11px;background:#EDECE6;color:var(--muted);white-space:nowrap}
.badge.paid{background:#E7F5EE;color:#12603F}
.badge.wait{background:#FDF1DC;color:#8A5B00}
.badge.dead{background:#F2E7E9;color:var(--danger)}

.account{margin:14px 0 0;font-size:13.5px}
.account dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:12px}
.account dd{margin:3px 0 0;font-weight:600}

/* -------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(10,11,14,.72);
  display:grid;place-items:end center;padding:0}
@media (min-width:620px){ .modal{place-items:center;padding:20px} }
.modal-card{position:relative;width:100%;max-width:460px;max-height:88dvh;overflow-y:auto;
  background:var(--paper);color:var(--graphite);padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius:14px 14px 0 0}
@media (min-width:620px){ .modal-card{border-radius:10px} }
.modal-card h2{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;text-transform:uppercase;
  letter-spacing:.05em;margin:0 0 14px}
.modal-x{position:absolute;right:12px;top:10px;border:0;background:none;font-size:26px;line-height:1;
  cursor:pointer;color:var(--muted);padding:4px 8px}
.pix-key{font-family:'Courier Prime',monospace;font-size:12.5px;word-break:break-all;background:#fff;
  border:1px dashed var(--rule);border-radius:6px;padding:12px;margin:10px 0}
.pix-qr{display:block;width:200px;max-width:100%;margin:12px auto;image-rendering:pixelated}
.total{display:flex;justify-content:space-between;font-family:'Courier Prime',monospace;font-size:13px;
  padding:5px 0}
.total.big{border-top:2px solid var(--graphite);margin-top:8px;padding-top:10px;font-size:16px;font-weight:700}

/* -------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + 16px);z-index:70;
  background:var(--graphite);color:#fff;padding:11px 18px;border-radius:20px;font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw;text-align:center}
.toast.bad{background:var(--danger)}

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

/* =====================================================================
   ANÁLISE
   ===================================================================== */

.an-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;
  margin:4px 2px 12px}
.an-title{font-family:'Anton',sans-serif;font-weight:400;font-size:20px;letter-spacing:.04em;
  text-transform:uppercase;margin:0;color:var(--paper)}
.an-head .eyebrow{color:#8D8F98;margin:0 0 3px}

.windows{display:flex;gap:4px;flex-wrap:wrap}
.windows button{border:0;cursor:pointer;background:rgba(255,255,255,.09);color:#C9CBD3;
  border-radius:5px;padding:7px 11px;font-size:11.5px;font-weight:600;white-space:nowrap}
.windows button[aria-pressed="true"]{background:var(--ink);color:#fff}

.loading{color:#8D8F98;font-size:13px;padding:26px 2px;font-family:'Courier Prime',monospace}

/* grade de cartões: 1 coluna no celular, 2 no desktop */
.an-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){
  .an-grid{grid-template-columns:1fr 1fr}
  .an-grid .wide{grid-column:1/-1}
}

.card{background:var(--paper);color:var(--graphite);border-radius:3px 10px 3px 3px;padding:16px;
  box-shadow:0 18px 36px -20px rgba(0,0,0,.7);min-width:0}
.card h3{font-family:'Anton',sans-serif;font-weight:400;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 3px}
.card .sub{font-size:11.5px;color:var(--muted);margin:0 0 13px;line-height:1.5}
.card .foot-note{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.5;
  border-top:1px dashed var(--rule);padding-top:9px}

/* mapa de calor no volante */
.heat{display:grid;gap:3px;margin:0 auto}
.heat .cell{aspect-ratio:1;display:grid;place-items:center;border-radius:4px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:clamp(8px,2.2vw,12px);
  border:1px solid var(--rule-soft)}
.heat-legend{max-width:640px;margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:8px;margin-top:10px;font-size:10.5px;color:var(--muted);
  font-family:'Courier Prime',monospace}
.heat-bar{flex:1;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#fff,var(--ink))}

/* barras horizontais */
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:9px;
  font-family:'Courier Prime',monospace;font-size:12px}
.bar .lbl{color:var(--graphite);font-weight:700;text-align:right;white-space:nowrap}
.bar .track{display:block;background:#E9E8E2;border-radius:4px;height:16px;overflow:hidden;min-width:0}
.bar .fill{display:block;height:100%;background:var(--ink);border-radius:4px;min-width:3px;
  transition:width .45s cubic-bezier(.2,.8,.3,1)}
.bar .val{color:var(--muted);font-size:11px;white-space:nowrap;min-width:38px;text-align:right}
.bar.dim .fill{background:#B9B8B1}
.bar.mark .fill{background:var(--danger)}

/* pares de dezena com destaque */
.numlist{display:flex;flex-wrap:wrap;gap:6px}
.numlist .n{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border:1px solid var(--rule);border-radius:6px;padding:7px 9px;min-width:46px}
.numlist .n b{font-family:'Courier Prime',monospace;font-size:15px}
.numlist .n span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.numlist .n.hot{background:var(--ink);border-color:var(--ink);color:#fff}
.numlist .n.hot span{color:rgba(255,255,255,.8)}
.numlist .n.late{border-color:var(--danger);color:var(--danger)}
.numlist .n.late span{color:var(--danger);opacity:.75}

/* números resumo */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--rule-soft);border-radius:6px;padding:9px 10px}
.stat b{display:block;font-family:'Courier Prime',monospace;font-size:17px;line-height:1.2}
.stat span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* últimos concursos */
.draws{font-family:'Courier Prime',monospace;font-size:12.5px}
.draw{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--rule);
  flex-wrap:wrap}
.draw .c{color:var(--muted);font-size:11px;min-width:78px}
.draw .d{font-weight:700;letter-spacing:.08em}

.an-note{background:#EDECE6;color:#5F5F58;border-radius:3px;padding:13px 16px;margin-top:14px;
  font-family:'Courier Prime',monospace;font-size:10.5px;line-height:1.75;text-transform:uppercase;
  letter-spacing:.02em}
.an-empty{background:var(--paper);color:var(--graphite);border-radius:3px;padding:22px 18px;
  font-size:13.5px;line-height:1.6}