:root{
  --ground:#F2F4F7;
  --surface:#FFFFFF;
  --surface-2:#E9EDF2;
  --line:#D4DBE4;
  --line-soft:#E4E9EF;
  --ink:#141C26;
  --ink-2:#44536A;
  --ink-3:#6E7F96;
  --accent:#B06D0C;
  --accent-ink:#FFFFFF;
  --accent-soft:#FBEEDA;
  --green:#157A58;
  --green-soft:#DFF2EA;
  --red:#B3332C;
  --red-soft:#FBE4E2;
  --wait:#5B5FA8;
  --wait-soft:#E6E7F7;
  --shadow:0 1px 2px rgba(20,28,38,.07), 0 8px 24px -16px rgba(20,28,38,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1620;
    --surface:#16202C;
    --surface-2:#1D2937;
    --line:#2B3949;
    --line-soft:#223040;
    --ink:#EAF0F7;
    --ink-2:#A3B2C5;
    --ink-3:#74879D;
    --accent:#E8A33D;
    --accent-ink:#1A1206;
    --accent-soft:#33260F;
    --green:#3FBF92;
    --green-soft:#11322A;
    --red:#EC6A61;
    --red-soft:#37191A;
    --wait:#9B9FE8;
    --wait-soft:#1F2140;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1620;
  --surface:#16202C;
  --surface-2:#1D2937;
  --line:#2B3949;
  --line-soft:#223040;
  --ink:#EAF0F7;
  --ink-2:#A3B2C5;
  --ink-3:#74879D;
  --accent:#E8A33D;
  --accent-ink:#1A1206;
  --accent-soft:#33260F;
  --green:#3FBF92;
  --green-soft:#11322A;
  --red:#EC6A61;
  --red-soft:#37191A;
  --wait:#9B9FE8;
  --wait-soft:#1F2140;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  background:var(--ground);
  color:var(--ink);
  font:400 15px/1.55 "Public Sans", ui-sans-serif, system-ui, sans-serif;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Barlow Condensed", "Public Sans", sans-serif;margin:0;text-wrap:balance;letter-spacing:.01em}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace;font-variant-numeric:tabular-nums}

/* ---------- topo ---------- */
.topo{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.topo-in{
  max-width:1280px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.marca{display:flex;align-items:baseline;gap:10px}
.marca h1{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.marca .sub{font-size:12px;color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase}
.topo .espaco{flex:1}

.sel-cliente{display:flex;align-items:center;gap:8px}
.sel-cliente label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
select,input,textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:7px 10px;
}
select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.estado{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.ponto.off{background:var(--ink-3)}

/* ---------- grade ---------- */
.palco{max-width:1280px;margin:0 auto;padding:24px;display:grid;gap:20px;grid-template-columns:minmax(0,420px) minmax(0,1fr)}
@media (max-width:980px){.palco{grid-template-columns:minmax(0,1fr)}}
.coluna{display:flex;flex-direction:column;gap:20px;min-width:0}

.bloco{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.bloco > header{
  padding:13px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;
}
.bloco > header h2{font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.bloco > header .nota{font-size:12px;color:var(--ink-3);margin-left:auto}
.corpo{padding:18px;display:flex;flex-direction:column;gap:16px}

.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.campo .dica{font-size:12px;color:var(--ink-3);line-height:1.45}
.campo input,.campo textarea,.campo select{width:100%}
.campo textarea{min-height:132px;resize:vertical;line-height:1.5}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:420px){.dupla{grid-template-columns:1fr}}

/* odd mínima em destaque: é a regra central do produto */
.regra{
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px;
}
.regra .linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.regra .frase{font-size:14px;color:var(--ink);line-height:1.5}
.regra input{width:96px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;padding:5px 8px;background:var(--surface)}

.estrats{display:flex;flex-direction:column;gap:8px}
.estrat{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
  border:1px solid var(--line-soft);border-radius:7px;background:var(--surface-2);
}
.estrat input{margin-top:3px;flex:none;width:auto}
.estrat .txt{min-width:0}
.estrat .nome{font-size:13px;font-weight:600;line-height:1.3}
.estrat .meta{font-size:11px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;margin-top:2px}

.fichas{display:flex;flex-wrap:wrap;gap:6px}
.ficha{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border-radius:999px;border:1px solid transparent;
}
.f-green{background:var(--green-soft);color:var(--green);border-color:var(--green)}
.f-red{background:var(--red-soft);color:var(--red);border-color:var(--red)}
.f-wait{background:var(--wait-soft);color:var(--wait);border-color:var(--wait)}
.f-off{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
.f-sent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ---------- prévia ---------- */
.previa{
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:8px;
  padding:14px;white-space:pre-wrap;word-break:break-word;
  font-size:14px;line-height:1.6;
}
.previa .lk{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.aviso-img{
  display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px dashed var(--line);
  border-radius:7px;color:var(--ink-3);font-size:12px;
}

/* ---------- fila ---------- */
.rolagem{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px}
th{
  text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:9px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:13px}
tbody tr:last-child td{border-bottom:none}
.jogo{font-weight:600;line-height:1.3}
.liga{font-size:11px;color:var(--ink-3);margin-top:2px}
.odd{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.odd.sobe{color:var(--green)}
.odd.cai{color:var(--red)}
.alvo{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3)}
.lnk{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);word-break:break-all}

.rodape{max-width:1280px;margin:0 auto;padding:6px 24px 36px;color:var(--ink-3);font-size:12px;line-height:1.6}
.salvo{font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.tira{
  padding:10px 18px;background:var(--wait-soft);border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);font-size:12.5px;line-height:1.5;
}
.botao-op{
  font:600 11px/1 "Public Sans",sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;cursor:pointer;
}
.botao-op:hover{color:var(--ink);border-color:var(--ink-3)}
.botao-op[aria-pressed="true"]{
  background:var(--ink);color:var(--ground);border-color:var(--ink);
}
.so-op > header{border-bottom-color:var(--line)}
.so-op{border-style:dashed}
@media (prefers-reduced-motion: no-preference){
  .odd{transition:color .4s ease}
}