/* ============================================================================
   LOTOCALC — folha de estilo
   Visual limpo: uma família tipográfica, superfícies claras, a cor da
   modalidade só onde há ação ou dado. --brand / --brand-rgb vêm do JS.
   ==========================================================================*/

/* ---------- tokens: tema claro ------------------------------------------- */
:root {
  --ground:      #F4F5F7;
  --surface:     #FFFFFF;
  --surface-2:   #F6F7F9;
  --surface-3:   #ECEEF2;
  --ink:         #111418;
  --ink-2:       #4A515C;
  --ink-3:       #858C97;
  --line:        #E4E7EB;
  --line-forte:  #CDD2D9;
  --sombra:      0 1px 2px rgb(16 20 26 / .04), 0 2px 8px -2px rgb(16 20 26 / .06);
  --sombra-media:0 4px 16px -6px rgb(16 20 26 / .14);
  --sombra-alta: 0 24px 64px -20px rgb(16 20 26 / .32);
  --ok:          #0F7A4F;
  --ok-fundo:    #E4F5EC;
  --alerta:      #8A5700;
  --alerta-fundo:#FCF1DA;
  --erro:        #B42318;
  --erro-fundo:  #FDECEA;
  --sobre-brand: #FFFFFF;

  /* a modalidade sobrescreve via JS */
  --brand:        #209869;
  --brand-rgb:    32 152 105;
  --brand-claro:  #4FCB96;
  --brand-escuro: #15774F;
  --brand-texto:  var(--brand-escuro);

  --f-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r-p: 8px;
  --r-m: 12px;
  --r-g: 16px;
  --limite: 1320px;
  --gutter: clamp(16px, 3vw, 28px);
  color-scheme: light;
}

/* ---------- tokens: tema escuro ------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0C0E12;
    --surface:     #15181E;
    --surface-2:   #1B1F26;
    --surface-3:   #252A33;
    --ink:         #EEF0F3;
    --ink-2:       #AEB4BE;
    --ink-3:       #767D89;
    --line:        #252A32;
    --line-forte:  #363C47;
    --sombra:      0 1px 2px rgb(0 0 0 / .4);
    --sombra-media:0 6px 20px -8px rgb(0 0 0 / .6);
    --sombra-alta: 0 28px 70px -24px rgb(0 0 0 / .8);
    --ok:          #5FD8A4;
    --ok-fundo:    #11281E;
    --alerta:      #F0C36B;
    --alerta-fundo:#2A2214;
    --erro:        #F59A93;
    --erro-fundo:  #2E1917;
    --brand-texto: var(--brand-claro);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:      #0C0E12;
  --surface:     #15181E;
  --surface-2:   #1B1F26;
  --surface-3:   #252A33;
  --ink:         #EEF0F3;
  --ink-2:       #AEB4BE;
  --ink-3:       #767D89;
  --line:        #252A32;
  --line-forte:  #363C47;
  --sombra:      0 1px 2px rgb(0 0 0 / .4);
  --sombra-media:0 6px 20px -8px rgb(0 0 0 / .6);
  --sombra-alta: 0 28px 70px -24px rgb(0 0 0 / .8);
  --ok:          #5FD8A4;
  --ok-fundo:    #11281E;
  --alerta:      #F0C36B;
  --alerta-fundo:#2A2214;
  --erro:        #F59A93;
  --erro-fundo:  #2E1917;
  --brand-texto: var(--brand-claro);
  color-scheme: dark;
}

/* ---------- base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-corpo);
  font-size: 14.5px;
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01';
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:where(a) { color: var(--brand-texto); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-p); }

.num, .tab { font-variant-numeric: tabular-nums; }

.pular {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: var(--r-m);
}
.pular:focus { left: 12px; }

/* ---------- topo ----------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topo__in {
  max-width: var(--limite); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 10px var(--gutter);
}

.logo {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 0; cursor: pointer; flex: none;
}
.logo__marca {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--brand);
  position: relative;
  transition: background-color .3s ease;
}
.logo__marca::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--sobre-brand); opacity: .9;
}
.logo__nome { font-weight: 750; font-size: 16px; letter-spacing: -.02em; }

.nav {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
  overflow-x: auto; scrollbar-width: none;
  min-width: 0;
}
.nav::-webkit-scrollbar { display: none; }
.nav__item {
  flex: none;
  background: none; border: 0; cursor: pointer;
  padding: 6px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.nav__item:hover { color: var(--ink); }
.nav__item.is-ativa { background: var(--surface); color: var(--ink); box-shadow: var(--sombra); }

.topo__acoes { display: flex; gap: 6px; margin-left: auto; flex: none; }

@media (max-width: 720px) {
  .topo__in { flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; width: 100%; }
  .nav__item { flex: 1; }
  #btnAjuda { display: none; }
}

/* ---------- botões --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line-forte);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px; font-weight: 550;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, filter .15s ease;
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }

.btn--fantasma { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--fantasma:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn--fino { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn--icone { padding: 7px; }
.btn--perigo:hover { border-color: var(--erro); color: var(--erro); }

.btn--principal { background: var(--brand); border-color: var(--brand); color: var(--sobre-brand); }
.btn--principal:hover { border-color: var(--brand); filter: brightness(1.07); }

.btn--escuro { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn--escuro:hover { border-color: var(--ink); filter: brightness(1.15); }

.btn--gerar {
  background: var(--brand); border-color: var(--brand); color: var(--sobre-brand);
  padding: 12px 22px; font-size: 15px; font-weight: 650; border-radius: 12px;
  box-shadow: 0 8px 20px -10px rgb(var(--brand-rgb) / .9);
  flex: none;
}
.btn--gerar:hover { border-color: var(--brand); filter: brightness(1.07); }
.btn--gerar kbd {
  font-family: var(--f-mono); font-size: 10px;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; opacity: .6;
}
.btn--gerar[disabled] { cursor: progress; }

/* ---------- faixa de modalidades ----------------------------------------- */
.faixa { max-width: var(--limite); margin: 0 auto; padding: 16px var(--gutter) 0; }

.modalidades {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: thin;
  padding-bottom: 4px;
}
.modalidades::-webkit-scrollbar { height: 5px; }
.modalidades::-webkit-scrollbar-thumb { background: var(--line-forte); border-radius: 99px; }

.tile {
  --t: var(--brand);
  flex: none;
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center;
  padding: 8px 13px 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer; text-align: left;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tile::before {
  content: ''; grid-row: span 2;
  width: 9px; height: 9px; border-radius: 50%; background: var(--t);
}
.tile:hover { border-color: var(--line-forte); }
.tile__nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tile__meta { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile.is-ativa {
  border-color: var(--t);
  box-shadow: 0 0 0 1px var(--t) inset, var(--sombra);
}
.tile.is-ativa .tile__meta { color: var(--ink-2); }

/* ---------- vistas --------------------------------------------------------- */
main { max-width: var(--limite); margin: 0 auto; padding: 18px var(--gutter) 48px; }

.vista { display: grid; gap: 18px; }
.vista--estreita { max-width: 1000px; width: 100%; margin: 0 auto; }

.vista__cab { display: grid; gap: 4px; }
.vista__titulo { font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.vista__resumo { color: var(--ink-3); font-size: 14px; }

.empilha { display: grid; gap: 14px; }

/* ---------- cartões e blocos ---------------------------------------------- */
.cartao, .bloco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-g);
  box-shadow: var(--sombra);
}
.cartao { padding: 18px; display: grid; gap: 14px; align-content: start; }
.cartao__titulo { font-size: 15px; font-weight: 650; }
.cartao__texto { font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.cartao__texto b { color: var(--ink-2); font-weight: 600; }
.cartao__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cartao__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
  padding-top: 12px; border-top: 1px solid var(--line);
}
.cartao--destaque {
  border-color: rgb(var(--brand-rgb) / .35);
  background: linear-gradient(rgb(var(--brand-rgb) / .05), rgb(var(--brand-rgb) / .05)), var(--surface);
}

.bloco { padding: 16px; display: grid; gap: 14px; align-content: start; }
details.bloco { padding: 0; gap: 0; }
details.bloco > :not(summary) { margin: 0 16px; }
details.bloco > :not(summary):last-child { margin-bottom: 16px; }
details.bloco[open] > summary { margin-bottom: 12px; }
details.bloco > :not(summary) + :not(summary) { margin-top: 12px; }

.bloco__cab {
  display: flex; align-items: center; gap: 10px;
  list-style: none;
}
summary.bloco__cab { padding: 14px 16px; cursor: pointer; border-radius: var(--r-g); user-select: none; }
summary.bloco__cab::-webkit-details-marker { display: none; }
summary.bloco__cab::after {
  content: ''; width: 7px; height: 7px; flex: none; margin-left: 4px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
details[open] > summary.bloco__cab::after { transform: rotate(225deg) translateY(-1px); }
summary.bloco__cab:hover .bloco__titulo { color: var(--brand-texto); }

.bloco__titulo { font-size: 15px; font-weight: 650; transition: color .15s ease; }
.bloco__conta {
  margin-left: auto; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bloco__resumo { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.bloco__resumo b { color: var(--ink-2); font-weight: 600; }

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 550;
  padding: 2px 8px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.selo--semente { background: rgb(var(--brand-rgb) / .1); color: var(--brand-texto); border-color: transparent; font-family: var(--f-mono); font-size: 11px; }
.selo--ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.selo--alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: transparent; }
.selo--marca { background: var(--brand); color: var(--sobre-brand); border-color: transparent; }

/* ---------- campos --------------------------------------------------------- */
.campo { display: grid; gap: 7px; }
.campo__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.campo__rotulo { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.campo__valor {
  font-size: 17px; font-weight: 700; color: var(--brand-texto);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.campo__extremos { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; background: transparent; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 99px;
  background: linear-gradient(to right, var(--brand) var(--preenchido, 0%), var(--surface-3) var(--preenchido, 0%));
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--surface-3); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--brand); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6.5px;
  border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-forte);
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-forte); box-shadow: 0 1px 3px rgb(0 0 0 / .25);
}

input[type="text"], input[type="number"], textarea, select {
  background: var(--surface);
  border: 1px solid var(--line-forte);
  border-radius: 10px;
  padding: 8px 11px;
  width: 100%;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .16);
}

.atalhos { display: flex; gap: 5px; flex-wrap: wrap; }
.atalhos button {
  flex: 1 1 0; min-width: 40px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 0; cursor: pointer;
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.atalhos button:hover { border-color: var(--line-forte); color: var(--ink); }
.atalhos button.is-ativa { background: rgb(var(--brand-rgb) / .12); border-color: rgb(var(--brand-rgb) / .5); color: var(--brand-texto); }

.alternador { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.alternador input { accent-color: var(--brand); width: 16px; height: 16px; flex: none; cursor: pointer; margin: 0; }

.sub-campo { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 25px; font-size: 12.5px; color: var(--ink-3); }
.sub-campo input { width: 76px; }

.linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px; padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.segmentado button {
  background: transparent; border: none; cursor: pointer;
  padding: 7px 4px; border-radius: 8px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-3);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.segmentado button:hover { color: var(--ink); }
.segmentado button.is-ativa { background: var(--surface); color: var(--ink); box-shadow: var(--sombra), 0 0 0 1px var(--line); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  --t: var(--brand);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line-forte);
  font-size: 12.5px; font-weight: 550; color: var(--ink-3);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip::before {
  content: ''; width: 12px; height: 12px; border-radius: 4px;
  border: 1.5px solid var(--line-forte); background: transparent; flex: none;
}
.chip.is-ativa { color: var(--ink); border-color: var(--line-forte); background: var(--surface-2); }
.chip.is-ativa::before {
  background: var(--t); border-color: var(--t);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.chip--lot::before { border-radius: 50%; }
.chip--lot.is-ativa::before { background-image: none; }
.chip:hover { border-color: var(--ink-3); }

.dica { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ---------- sugestões: hero ----------------------------------------------- */
.hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.hero__texto { display: grid; gap: 6px; max-width: 720px; }
.hero__sobre { font-size: 13px; font-weight: 600; color: var(--brand-texto); }
.hero__titulo { font-size: clamp(26px, 3.4vw, 34px); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.hero__resumo { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.hero__resumo b { color: var(--ink); font-weight: 650; }
.hero__status { display: flex; align-items: center; gap: 10px; }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-forte); }
.status.is-ok i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.status.is-carregando i { background: var(--alerta); animation: pisca 1s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .3; } }

/* ---------- sugestões: panorama ------------------------------------------- */
.panorama {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(178px, 1fr);
  gap: 8px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 8px; margin: 0 -2px;
  scrollbar-width: thin;
}
.panorama::-webkit-scrollbar { height: 5px; }
.panorama::-webkit-scrollbar-thumb { background: var(--line-forte); border-radius: 99px; }

.sorteio {
  --t: var(--brand);
  display: grid; gap: 7px; align-content: start;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left; cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sorteio:hover { border-color: var(--line-forte); box-shadow: var(--sombra-media); }
.sorteio__cab { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sorteio__cab::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--t); flex: none; }
.sorteio__nome { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sorteio__quando { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.sorteio__quando.is-hoje { color: var(--ok); font-weight: 650; }
.sorteio__premio { font-size: 20px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sorteio__linha { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.sorteio__linha b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.sorteio__barra { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; min-width: 30px; }
.sorteio__barra i { display: block; height: 100%; border-radius: 99px; background: var(--t); }
.sorteio__selos { display: flex; gap: 4px; flex-wrap: wrap; min-height: 20px; }
.sorteio__selos .selo { font-size: 11px; padding: 1px 7px; }
.sorteio.is-fora { opacity: .5; }
.sorteio.is-fora:hover { opacity: .85; }
.sorteio.is-fantasma { pointer-events: none; }
.sorteio.is-fantasma .sorteio__premio,
.sorteio.is-fantasma .sorteio__linha { color: transparent; background: var(--surface-3); border-radius: 6px; }

/* ---------- sugestões: preferências e cestas ------------------------------- */
.sug {
  display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 18px; align-items: start;
}
.sug__prefs { position: sticky; top: 76px; }
.prefs { gap: 18px; }
.sug__cestas { display: grid; gap: 12px; min-width: 0; }

@media (max-width: 980px) {
  .sug { grid-template-columns: 1fr; }
  .sug__prefs { position: static; }
}

.ajustes-ev { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.ajustes-ev summary { font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.ajustes-ev[open] summary { margin-bottom: 10px; }
.ajustes-ev .alternador { font-size: 13px; margin-bottom: 8px; }

.cestas { display: grid; gap: 12px; }

.cesta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-g);
  box-shadow: var(--sombra);
  display: grid;
  overflow: hidden;
  animation: entra .3s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.cesta.is-recomendada { border-color: var(--ink); box-shadow: var(--sombra-media); }

.cesta__cab { padding: 16px 18px 12px; display: grid; gap: 6px; }
.cesta__titulo-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cesta__titulo { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.cesta__porque { font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 76ch; }

.cesta__itens { list-style: none; margin: 0; padding: 0 18px; display: grid; }
.item {
  --t: var(--brand);
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.item__cor { width: 10px; height: 10px; border-radius: 50%; background: var(--t); }
.item__texto { display: grid; gap: 1px; min-width: 0; }
.item__nome { font-size: 14px; font-weight: 600; }
.item__formato { font-weight: 450; color: var(--ink-2); }
.item__meta { font-size: 12px; color: var(--ink-3); }
.item__custo { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__acao { padding: 4px 9px; font-size: 12px; }

.cesta__numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4px 18px 0;
  border-top: 1px solid var(--line);
}
.cesta__num { padding: 12px 10px 12px 0; display: grid; gap: 2px; }
.cesta__num + .cesta__num { padding-left: 12px; border-left: 1px solid var(--line); }
.cesta__num span { font-size: 11.5px; color: var(--ink-3); }
.cesta__num strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cesta__num small { font-size: 11px; color: var(--ink-3); }

.cesta__pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.cesta__pe .dica { margin-left: auto; }

@media (max-width: 640px) {
  .cesta__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cesta__num:nth-child(3) { padding-left: 0; border-left: 0; }
  .cesta__num:nth-child(n+3) { border-top: 1px solid var(--line); }
  .item { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .item__acao { grid-column: 2 / -1; justify-self: start; }
}

/* jogos gerados de uma cesta */
.gerado { gap: 16px; }
.gerado__grupo { display: grid; gap: 10px; }
.gerado__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gerado__cab::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--t); }
.gerado__nome { font-size: 14.5px; font-weight: 650; }
.gerado__meta { font-size: 12.5px; color: var(--ink-3); }
.gerado__cab .btn { margin-left: auto; }

/* ---------- gerador: bancada ---------------------------------------------- */
.bancada {
  display: grid;
  grid-template-columns: minmax(310px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.coluna { display: grid; gap: 12px; min-width: 0; }

@media (max-width: 1040px) {
  .bancada { grid-template-columns: 1fr; }
}

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- volante ------------------------------------------------------- */
.volante {
  display: grid;
  grid-template-columns: repeat(var(--grade, 10), minmax(0, 1fr));
  gap: 4px;
}

.dez {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: clamp(10px, 1.4vw, 12.5px);
  font-weight: 550;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.dez:hover { border-color: var(--line-forte); color: var(--ink); background: var(--surface); }
.dez.is-fixa { background: var(--brand); border-color: var(--brand); color: var(--sobre-brand); font-weight: 700; }
.dez.is-fixa:hover { color: var(--sobre-brand); background: var(--brand); filter: brightness(1.08); }
.dez.is-exclui { background: transparent; color: var(--ink-3); border: 1px dashed var(--line-forte); }
.dez.is-exclui::after {
  content: ''; position: absolute; inset: 22%;
  background: linear-gradient(to top right, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px));
  opacity: .6;
}
.dez.is-exclui:hover { color: var(--erro); border-color: var(--erro); }

.legenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.marca-fixa, .marca-exclui { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.marca-fixa { background: var(--brand); }
.marca-exclui { border: 1px dashed var(--line-forte); position: relative; }
.marca-exclui::after {
  content: ''; position: absolute; inset: 1px;
  background: linear-gradient(to top right, transparent 45%, var(--ink-3) 45%, var(--ink-3) 55%, transparent 55%);
}

.extra-bloco { display: grid; gap: 8px; margin-top: 12px; }
.extra-bloco__titulo { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.trevos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-width: 250px; }
.trevos .dez { border-radius: 50%; }

.colunas-ss { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.coluna-ss { display: grid; gap: 3px; }
.coluna-ss__rot { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); padding-bottom: 3px; }
.coluna-ss .dez { font-size: 11px; }

.loteca-lista { display: grid; gap: 3px; }
.loteca-linha { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; }
.loteca-linha__n { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.loteca-marcas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.loteca-marcas .dez { aspect-ratio: auto; padding: 5px 0; }

/* ---------- estratégias ----------------------------------------------------- */
.estrategias { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.estrategia {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer; text-align: left;
  font-size: 13px; font-weight: 550; color: var(--ink-2);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.estrategia:hover { border-color: var(--line-forte); color: var(--ink); }
.estrategia.is-ativa { border-color: var(--brand); background: rgb(var(--brand-rgb) / .08); color: var(--ink); box-shadow: 0 0 0 1px var(--brand) inset; }
.estrategia__marca {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--line-forte); flex: none;
  display: grid; place-items: center;
}
.estrategia.is-ativa .estrategia__marca { border-color: var(--brand); }
.estrategia.is-ativa .estrategia__marca::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.estrategia__nome { line-height: 1.25; }
.estrategia-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.nota-estrategias { grid-column: 1 / -1; }

.opcoes-caixa {
  display: grid; gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.opcoes-caixa__titulo { font-size: 13px; font-weight: 650; }
.opcoes-caixa__nota { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.vies-escala { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }

/* ---------- filtros --------------------------------------------------------- */
.filtros { display: grid; gap: 5px; }
.filtro {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.filtro.is-ativo { border-color: rgb(var(--brand-rgb) / .45); background: rgb(var(--brand-rgb) / .05); }
.filtro__cabeca { display: flex; align-items: center; gap: 9px; padding: 8px 11px; cursor: pointer; }
.filtro__cabeca input { accent-color: var(--brand); width: 15px; height: 15px; flex: none; cursor: pointer; margin: 0; }
.filtro__nome { font-size: 13px; flex: 1; }
.filtro__valor { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.filtro.is-ativo .filtro__valor { color: var(--brand-texto); font-weight: 600; }
.filtro__corpo { padding: 0 11px 11px 35px; display: grid; gap: 8px; }
.filtro__dica { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.filtro__pares { display: flex; align-items: center; gap: 8px; }
.filtro__pares label { font-size: 12px; color: var(--ink-3); }
.filtro__pares input { width: 70px; padding: 5px 8px; font-size: 13px; }

/* ---------- disparo e semente ---------------------------------------------- */
.disparo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 14px 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-g);
  box-shadow: var(--sombra);
  position: sticky; top: 72px; z-index: 20;
}
.disparo__resumo { display: grid; gap: 1px; min-width: 0; }
.disparo__rotulo { font-size: 12px; color: var(--ink-3); }
.disparo__custo { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.15; }
.disparo__detalhe { font-size: 12px; color: var(--ink-3); }

.semente {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 2px;
  font-size: 12.5px; color: var(--ink-3);
}
.semente label { font-weight: 550; color: var(--ink-2); }
.semente input {
  width: 140px; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; padding: 5px 9px; border-radius: 8px;
}
.semente__nota { font-size: 12px; color: var(--ink-3); }
@media (max-width: 600px) { .semente__nota { display: none; } }

/* ---------- abas do gerador ------------------------------------------------- */
.abas {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  flex: none;
  background: none; border: none; cursor: pointer;
  padding: 9px 12px 11px;
  font-size: 13.5px; font-weight: 550; color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.aba:hover { color: var(--ink); }
.aba.is-ativa { color: var(--ink); border-bottom-color: var(--brand); }

.painel { display: none; }
.painel.is-ativo { display: grid; gap: 12px; }

.painel__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.painel__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.painel__info strong { font-size: 15px; font-weight: 650; color: var(--ink); }
.painel__acoes { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- jogos ------------------------------------------------------------- */
.jogos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}

.cupom {
  display: grid; grid-template-columns: 36px 1fr; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  animation: entra .3s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes entra { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.cupom__n {
  display: grid; place-items: center;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cupom__corpo { padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }

.bolas { display: flex; flex-wrap: wrap; gap: 5px; }
.bola {
  position: relative;
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(var(--brand-rgb) / .12);
  color: var(--brand-texto);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: bola-entra .28s cubic-bezier(.2, .9, .3, 1.2) backwards;
  animation-delay: calc((var(--i, 0) * 14ms) + (var(--j, 0) * 18ms));
}
@keyframes bola-entra { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

.bola--fixa { background: var(--brand); color: var(--sobre-brand); }
.bola--trevo { background: transparent; color: var(--brand-texto); box-shadow: inset 0 0 0 1.5px var(--brand); width: 27px; height: 27px; font-size: 12px; }
.bola--acerto { background: var(--ok); color: #fff; }
.bola--erro { background: var(--surface-2); color: var(--ink-3); }

.cupom__rodape {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cupom__tag { display: inline-flex; gap: 4px; align-items: center; }
.cupom__tag b { color: var(--ink-2); font-weight: 600; }
.cupom__custo { margin-left: auto; color: var(--ink-2); font-weight: 550; }
.cupom__extra { font-size: 12.5px; font-weight: 600; color: var(--brand-texto); }
.cupom__elo { font-family: var(--f-mono); font-size: 10.5px; color: var(--brand-texto); background: rgb(var(--brand-rgb) / .1); padding: 1px 6px; border-radius: 99px; }

.cupom.is-relaxado { border-style: dashed; }
.cupom.is-premiado { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }

.faixa-premio {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--ok-fundo); color: var(--ok);
  padding: 2px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 650;
}
.faixa-premio.is-nada { background: var(--surface-2); color: var(--ink-3); }

.cupom-colunas, .cupom-loteca { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cupom-coluna, .cupom-loteca__j {
  display: grid; gap: 2px; justify-items: center;
  padding: 5px 0; background: var(--surface-2); border-radius: 7px;
}
.cupom-coluna__d, .cupom-loteca__m { font-size: 13px; font-weight: 700; color: var(--brand-texto); font-variant-numeric: tabular-nums; }
.cupom-coluna__d.is-acerto, .cupom-loteca__m.is-acerto { color: var(--ok); }
.cupom-coluna__r, .cupom-loteca__n { font-size: 10px; color: var(--ink-3); }

.bilhete { font-size: 26px; font-weight: 750; letter-spacing: .14em; color: var(--brand-texto); font-variant-numeric: tabular-nums; }

/* ---------- vazio e avisos -------------------------------------------------- */
.vazio {
  display: grid; gap: 8px; place-items: center; text-align: center;
  padding: 56px 22px;
  border: 1px dashed var(--line-forte);
  border-radius: var(--r-g);
}
.vazio__glifo { display: flex; gap: 6px; margin-bottom: 6px; }
.vazio__glifo i { width: 26px; height: 26px; border-radius: 50%; background: rgb(var(--brand-rgb) / .14); }
.vazio__glifo i:nth-child(2) { background: rgb(var(--brand-rgb) / .3); }
.vazio__glifo i:nth-child(3) { background: rgb(var(--brand-rgb) / .5); }
.vazio__titulo { font-size: 16px; font-weight: 650; }
.vazio__texto { max-width: 48ch; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.vazio__texto b { color: var(--ink-2); }

.nota {
  padding: 10px 13px; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2);
}
.nota--alerta { background: var(--alerta-fundo); color: var(--alerta); border-color: transparent; }
.nota--ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.nota--erro { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }

/* ---------- métricas, tabelas, gráficos -------------------------------------- */
.metricas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.metrica {
  background: var(--surface-2);
  border-radius: var(--r-m); padding: 11px 13px;
  display: grid; gap: 2px; align-content: start; min-width: 0;
}
.metrica__rot { font-size: 12px; color: var(--ink-3); }
.metrica__val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.metrica__sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

.mapa-calor { display: grid; grid-template-columns: repeat(var(--grade, 10), minmax(0, 1fr)); gap: 3px; }
.calor {
  aspect-ratio: 1; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 550; font-variant-numeric: tabular-nums;
  background: rgb(var(--brand-rgb) / var(--a, 0));
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); cursor: default;
}
.calor.is-forte { color: var(--sobre-brand); box-shadow: none; }

.barras { display: grid; gap: 5px; }
.barra-linha { display: grid; grid-template-columns: 62px 1fr 36px; align-items: center; gap: 10px; }
.barra-linha__rot { font-size: 11.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.barra-linha__trilho { height: 14px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.barra-linha__preen { height: 100%; background: var(--brand); border-radius: 5px; transform-origin: left; animation: barra .5s cubic-bezier(.2, .8, .3, 1) backwards; }
.barra-linha__val { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.escala { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.escala__fita { flex: 1; height: 6px; border-radius: 99px; background: linear-gradient(to right, rgb(var(--brand-rgb) / .07), rgb(var(--brand-rgb) / 1)); }

.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.tabela th { font-size: 12px; font-weight: 550; color: var(--ink-3); white-space: nowrap; }
.tabela td { font-variant-numeric: tabular-nums; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela th:not(:first-child), .tabela td:not(:first-child) { text-align: right; }
.tabela td.num, .tabela th.num { white-space: nowrap; }
.tabela .fraco, .tabela tr.fraco td { color: var(--ink-3); }
.tabela__total td { font-weight: 700; border-top: 1px solid var(--line-forte); }
.tabela__total td.num:last-child { color: var(--brand-texto); }
.tabela-rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.lista-dezenas { display: flex; flex-wrap: wrap; gap: 5px; }
.pill {
  font-size: 12px; padding: 3px 9px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pill b { color: var(--brand-texto); font-weight: 650; }

.rosca-caixa { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.rosca { width: 128px; height: 128px; flex: none; }
.rosca-legenda { display: grid; gap: 6px; flex: 1; min-width: 150px; }
.rosca-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.rosca-item i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rosca-item b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- orçamento do gerador -------------------------------------------- */
.orcamento { display: grid; gap: 8px; }
.orcamento__trilho { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; display: flex; }
.orcamento__uso { height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s cubic-bezier(.2, .8, .3, 1); font-size: 0; }
.orcamento__sobra { display: none; }
.orcamento__linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
.orcamento__forte { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.orcamento__opcoes { display: grid; gap: 4px; }
.orcamento__opcao {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; text-align: left;
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, background-color .14s ease;
}
.orcamento__opcao:hover { border-color: var(--line-forte); }
.orcamento__opcao.is-ativa { border-color: var(--brand); background: rgb(var(--brand-rgb) / .07); }
.orcamento__opcao b { font-weight: 700; color: var(--brand-texto); }
.orcamento__opcao span:last-child { color: var(--ink-3); font-size: 12px; }

/* ---------- conferidor e resultados ----------------------------------------- */
.entrada-res { display: grid; gap: 10px; }
.entrada-res__campo { display: grid; gap: 5px; }
.entrada-res__rot { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.busca-oficial { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.busca-oficial input[type="number"] { width: 110px; }
.busca-oficial select { width: auto; }

.res-numeros { display: grid; gap: 8px; }
.res-numeros__linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.res-numeros__rot { font-size: 12px; color: var(--ink-3); min-width: 70px; }
.res-numeros .bola { background: var(--brand); color: var(--sobre-brand); }
.res-partidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); }
.res-partidas__item b { color: var(--brand-texto); font-variant-numeric: tabular-nums; }

/* ---------- valor esperado ---------------------------------------------------- */
.ev-ajustes {
  display: grid; gap: 10px;
  padding: 13px; border-radius: var(--r-m);
  background: var(--surface-2);
}
.ev-ajustes__linha { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
input.ev-input, select.ev-input { width: 150px; padding: 5px 9px; font-size: 13px; font-variant-numeric: tabular-nums; }
select.ev-input { width: auto; }
input.ev-input--premio { width: 130px; text-align: right; background: var(--surface-2); border-color: var(--line); }
.ev-nota { display: block; font-size: 11px; color: var(--ink-3); }

.ev-barra { display: grid; gap: 8px; }
.ev-barra__rot { font-size: 12.5px; font-weight: 550; color: var(--ink-2); order: -1; }
.ev-barra__trilho {
  display: flex; height: 14px; border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--surface-3) 5px 10px);
}
.ev-barra__seg { height: 100%; background: rgb(var(--brand-rgb) / var(--a, 1)); border-right: 2px solid var(--surface); transform-origin: left; animation: barra .5s cubic-bezier(.2, .8, .3, 1) backwards; }
.ev-barra__legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.ev-barra__item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ev-barra__item i { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--brand-rgb) / var(--a, 1)); flex: none; }
.ev-barra__item--resto { color: var(--ink-3); }
.ev-barra__item--resto i { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--line-forte) 3px 5px); }

/* ---------- modal ----------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.modal__fundo { position: absolute; inset: 0; background: rgb(8 10 14 / .55); backdrop-filter: blur(3px); }
.modal__caixa {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 800px);
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  animation: sobe .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sobe { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
.modal__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.modal__cabeca h2 { font-size: 16px; }
.modal__corpo { padding: 18px 20px; overflow: auto; display: grid; gap: 12px; align-content: start; }
.modal__corpo p { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; }
.modal__corpo h3 { font-size: 14px; font-weight: 650; margin-top: 6px; }
.modal__corpo ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.modal__corpo code { font-family: var(--f-mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.modal__pe { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal__pe:empty { display: none; }
.previa { width: 100%; min-height: 260px; resize: vertical; font-family: var(--f-mono); font-size: 12px; line-height: 1.6; }

/* ---------- toasts ---------------------------------------------------------- */
.avisos-flutuantes {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: grid; gap: 8px; justify-items: end; pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink); color: var(--surface);
  border-radius: 12px;
  padding: 11px 15px; font-size: 13.5px; line-height: 1.45;
  box-shadow: var(--sombra-alta);
  animation: toast-entra .24s cubic-bezier(.2, .8, .3, 1);
}
.toast::before { content: ''; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.toast--erro::before { background: #F87171; }
.toast--ok::before { background: #4ADE80; }
.toast--alerta::before { background: #FBBF24; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- rodapé ----------------------------------------------------------- */
.rodape {
  max-width: var(--limite); margin: 0 auto;
  padding: 22px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}
.rodape p { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; max-width: 90ch; }
.rodape b { color: var(--ink-2); }
.rodape__link { color: var(--brand-texto); }

/* ---------- forja / cadeia ------------------------------------------------------ */
.forja {
  display: grid; gap: 14px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-g); box-shadow: var(--sombra);
}
.forja__cabeca { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.forja__intro { display: grid; gap: 6px; max-width: 62ch; }
.forja__estado { display: grid; gap: 4px; justify-items: end; min-width: 0; }
.forja__rot { font-size: 11.5px; color: var(--ink-3); }
.forja__hex {
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.6;
  color: var(--brand-texto); text-align: right; max-width: 20ch;
  padding: 6px 10px; border-radius: 8px; background: rgb(var(--brand-rgb) / .08);
}
.forja__medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.medidor { display: grid; gap: 1px; align-content: start; padding: 10px 13px; background: var(--surface-2); border-radius: var(--r-m); transition: background-color .2s ease; }
.medidor__rot { font-size: 12px; color: var(--ink-3); }
.medidor__val { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.2; }
.medidor__de { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.medidor__sub { font-size: 11px; color: var(--ink-3); }
.medidor.is-bom { background: var(--ok-fundo); }
.medidor.is-bom .medidor__val { color: var(--ok); }
.viz { display: grid; gap: 8px; padding: 12px 13px 13px; background: var(--surface-2); border-radius: var(--r-m); }
.viz__rot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.viz__nota { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.viz__tela { display: block; width: 100%; border-radius: 6px; }
#cvBits { height: clamp(116px, 21vw, 176px); }
#cvAval { height: 96px; }
#cvDist { height: clamp(120px, 19vw, 160px); }
.forja__params { display: flex; flex-wrap: wrap; gap: 5px; }
.forja__controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; padding: 14px; border-radius: var(--r-m); border: 1px solid var(--line); }
.forja__botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.elos { display: flex; flex-wrap: wrap; gap: 5px; }
.elo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px; background: var(--surface-2);
  font-family: var(--f-mono); font-size: 11px; font-variant-numeric: tabular-nums;
  animation: entra .3s cubic-bezier(.2, .8, .3, 1) backwards;
}
.elo__n { color: var(--ink-3); }
.elo__hex { color: var(--brand-texto); font-weight: 700; }
.elo__dez { color: var(--ink-2); }
.elo.is-nova { box-shadow: 0 0 0 1.5px var(--brand) inset; }

/* ---------- semente: impressão digital e origem ---------------------------------- */
.impressao { width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--surface-2); }
.impressao--grande { width: 104px; height: 104px; border-radius: var(--r-m); }
.origem-abas { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.origem-abas button { flex: 1; background: transparent; border: none; cursor: pointer; padding: 7px; border-radius: 8px; font-size: 13px; font-weight: 550; color: var(--ink-3); }
.origem-abas button.is-ativa { background: var(--surface); color: var(--ink); box-shadow: var(--sombra), 0 0 0 1px var(--line); }
.zona-solta {
  display: grid; place-items: center; gap: 8px; text-align: center;
  padding: 30px 18px; border: 1.5px dashed var(--line-forte); border-radius: var(--r-g);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.zona-solta:hover, .zona-solta.is-sobre { border-color: var(--brand); background: rgb(var(--brand-rgb) / .06); }
.zona-solta__titulo { font-size: 15px; font-weight: 650; }
.zona-solta__texto { font-size: 13px; color: var(--ink-3); max-width: 42ch; }
.zona-solta__glifo { width: 40px; height: 40px; border-radius: 50%; background: rgb(var(--brand-rgb) / .1); display: grid; place-items: center; color: var(--brand-texto); font-size: 18px; }
.previa-arquivo { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-m); background: var(--surface-2); }
.previa-arquivo img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.previa-arquivo audio { width: 100%; margin-top: 6px; }
.previa-arquivo__nome { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.previa-arquivo__meta { font-size: 12px; color: var(--ink-3); }
.previa-arquivo__icone { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--brand-rgb) / .1); color: var(--brand-texto); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.gesto__tela { display: block; width: 100%; height: 190px; border-radius: var(--r-m); border: 1.5px dashed var(--line-forte); background: var(--surface-2); cursor: crosshair; touch-action: none; }
.resultado-semente { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-m); background: rgb(var(--brand-rgb) / .07); }
.resultado-semente__valor { font-family: var(--f-mono); font-size: 21px; font-weight: 700; color: var(--brand-texto); letter-spacing: .06em; }
.resultado-semente__rot { font-size: 12px; color: var(--ink-3); }
.resultado-semente__hex { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); word-break: break-all; margin-top: 3px; }

/* ---------- movimento reduzido --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- impressão ---------------------------------------------------------- */
@media print {
  .topo, .faixa, .coluna--controle, .disparo, .semente, .abas,
  .painel__acoes, .rodape, .avisos-flutuantes, .modal, .vazio, .pular,
  #vista-sugestoes .hero, #vista-sugestoes .panorama, #vista-sugestoes .sug,
  .gerado__cab .btn, .gerado > .cartao__topo .linha-acoes { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .bancada { display: block; }
  .painel { display: none; }
  .painel.is-ativo { display: block; }
  .painel__barra { border-bottom: 2px solid #000; padding: 0 0 6px; margin-bottom: 10px; }
  .jogos { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .cupom { border: 1px solid #999; box-shadow: none; animation: none; break-inside: avoid; }
  .bola { background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 1.5px #000; animation: none; width: 28px; height: 28px; font-size: 11px; }
  .cartao { box-shadow: none; border-color: #999; }
}