/* poly_sports terminal — estética Bloomberg: fundo preto, âmbar nos cabeçalhos,
   monospace denso, painéis com barra de título invertida, verde/vermelho no PnL.
   Sem framework: é embarcado no binário Go (embed). */
:root{
  --bg:#000000; --bg2:#070809; --panel:#0a0c0f; --panel2:#10141a;
  --border:#222831; --border2:#2e3744;
  --amber:#ffa028; --amber-dim:#c07d22; --amber-soft:rgba(255,160,40,.12);
  --fg:#e9e6dd; --fg2:#c7c4ba; --dim:#6f7681; --dimmer:#474d57;
  --green:#27d07a; --red:#ff4d4d; --cyan:#3ec6e0; --blue:#5a9dff;
  --paper:#b58cff; --live:#54a0ff;
  --row:#0e1218; --rowh:#161c25;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:12px/1.45 ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1f2730;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#2c3743}

/* ── barra de comando (topo, fixa) ─────────────────────────────────────── */
.cmd{
  display:flex;align-items:center;gap:14px;height:34px;padding:0 12px;
  background:#000;border-bottom:1px solid var(--border2);
  position:sticky;top:0;z-index:20;
}
.cmd .brand{color:var(--amber);font-weight:700;letter-spacing:1.5px;font-size:12px}
.cmd .brand b{color:#000;background:var(--amber);padding:1px 6px;margin-right:7px;border-radius:1px}
.cmd .sep{width:1px;height:18px;background:var(--border2)}
.cmd .clock{color:var(--fg2);font-variant-numeric:tabular-nums}
.cmd .clock .z{color:var(--dim);font-size:10px}
.cmd .spacer{flex:1}
.live{display:flex;align-items:center;gap:6px;color:var(--dim);text-transform:uppercase;
  font-size:10px;letter-spacing:1px}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--red)}
.live.on{color:var(--green)}
.live.on .dot{background:var(--green);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(39,208,122,.5)}70%{box-shadow:0 0 0 6px rgba(39,208,122,0)}100%{box-shadow:0 0 0 0 rgba(39,208,122,0)}}

/* ── barra de filtros ──────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  padding:9px 12px;background:var(--bg2);border-bottom:1px solid var(--border)}
.fld{display:flex;flex-direction:column;gap:3px}
.fld>span{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
select,input,button{
  background:#000;color:var(--fg);border:1px solid var(--border2);
  border-radius:2px;padding:4px 7px;font:inherit;height:26px;
}
select:focus,input:focus{outline:none;border-color:var(--amber)}
input::placeholder{color:var(--dimmer)}
button{cursor:pointer;color:var(--amber);text-transform:uppercase;letter-spacing:.5px;font-size:11px}
button:hover{background:var(--amber-soft);border-color:var(--amber)}
kbd{font:inherit;background:#000;border:1px solid var(--border2);border-bottom-width:2px;
  border-radius:3px;padding:0 5px;color:var(--amber-dim);font-size:10px}

/* ── grade de painéis ──────────────────────────────────────────────────── */
main{padding:12px;display:grid;gap:12px;
  grid-template-columns:repeat(12,1fr);align-items:start}
.panel{background:var(--panel);border:1px solid var(--border2);border-radius:3px;
  display:flex;flex-direction:column;min-width:0;overflow:hidden}
.panel>.hd{display:flex;align-items:center;gap:8px;height:24px;padding:0 9px;
  background:linear-gradient(180deg,#1a1205,#120d04);
  border-bottom:1px solid var(--border2)}
.panel>.hd .t{color:var(--amber);font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;font-size:10px}
.panel>.hd .t .k{color:var(--dim);margin-right:6px}
.panel>.hd .meta{margin-left:auto;color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.panel>.bd{padding:9px;overflow:auto;max-height:62vh}
.panel.full{grid-column:span 12}
.panel.half{grid-column:span 6}
.panel.third{grid-column:span 4}
.panel.span7{grid-column:span 7}
.panel.span5{grid-column:span 5}
.panel.tape>.bd{max-height:46vh}
@media(max-width:1100px){.panel.half,.panel.third,.panel.span7,.panel.span5{grid-column:span 12}}

/* ── área de gráfico (canvas) ──────────────────────────────────────────── */
.chartbd{height:190px;padding:6px 9px;position:relative}
.chartbd canvas{width:100%;height:100%;display:block}
.chartbd .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px}
.winbtns{display:flex;gap:4px;margin-left:10px}
.winbtns button{height:18px;padding:0 7px;font-size:9px;color:var(--dim);
  border-color:var(--border);background:transparent}
.winbtns button.on{color:var(--amber);border-color:var(--amber)}

/* ── tiles de exposição (KPI) ──────────────────────────────────────────── */
.kpis{grid-column:span 12;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{background:var(--panel);border:1px solid var(--border2);border-radius:3px;
  padding:9px 12px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber)}
.kpi .lab{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim)}
.kpi .val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px;
  line-height:1.1}
.kpi .sub{font-size:10px;color:var(--dim);margin-top:2px}
.kpi.pos::before{background:var(--green)} .kpi.neg::before{background:var(--red)}

/* ── cards de bots ─────────────────────────────────────────────────────── */
.cards{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:3px;padding:9px 10px}
.card .top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.card .name{font-weight:700;color:var(--fg);letter-spacing:.5px}
.card .top .ago{margin-left:auto;color:var(--dim);font-size:10px}
.card .g{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11px}
.card .k{color:var(--dim)}
.card .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg2)}
.card .ago.pos{color:var(--green)} .card .ago.warn{color:var(--amber)}
.meter{position:relative;height:13px;margin-top:7px;background:#000;
  border:1px solid var(--border2);border-radius:2px;overflow:hidden}
.meter-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(39,208,122,.45);transition:width .3s}
.meter-fill.warn{background:rgba(255,160,40,.45)} .meter-fill.crit{background:rgba(255,77,77,.4)}
.meter-lab{position:absolute;left:6px;top:0;line-height:12px;font-size:9px;color:var(--fg2)}

/* ── tabelas ───────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:11px}
th,td{text-align:left;padding:4px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
thead th{color:var(--amber-dim);font-weight:600;text-transform:uppercase;font-size:9px;
  letter-spacing:1px;position:sticky;top:0;background:var(--panel);z-index:1}
tbody tr:nth-child(odd){background:var(--row)}
tbody tr:hover td{background:var(--rowh)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.t-clip{max-width:280px;overflow:hidden;text-overflow:ellipsis}

/* ── chips/cores ───────────────────────────────────────────────────────── */
.badge{font-size:9px;padding:1px 6px;border-radius:2px;text-transform:uppercase;
  letter-spacing:.8px;font-weight:700;border:1px solid}
.badge.paper{color:var(--paper);border-color:var(--paper);background:rgba(181,140,255,.12)}
.badge.live{color:var(--live);border-color:var(--live);background:rgba(84,160,255,.12)}
.pill{font-size:9px;padding:1px 6px;border:1px solid var(--border2);border-radius:2px;color:var(--dim)}
.tag-open{color:var(--cyan);border-color:#1d5563;background:rgba(62,198,224,.1)}
.tag-redeem{color:var(--amber);border-color:var(--amber-dim);background:var(--amber-soft)}
.buy,.yes{color:var(--green)} .sell{color:var(--red)} .no{color:var(--dim)}
.pos{color:var(--green)} .neg{color:var(--red)} .warn{color:var(--amber)}
.mono{color:var(--dim)}
.empty{color:var(--dim);padding:22px;text-align:center;font-style:italic}
tfoot td{border-top:1px solid var(--border2);color:var(--fg2);font-weight:600;
  background:var(--panel2)}
a.mlink{color:var(--fg);text-decoration:none;border-bottom:1px dotted var(--dim)}
a.mlink:hover{color:var(--amber);border-color:var(--amber)}

/* chip de latência do tape (verde <200ms, âmbar <1s, vermelho 1s+) */
.latchip{font-size:10px;padding:0 5px;border-radius:2px;border:1px solid var(--border2);
  font-variant-numeric:tabular-nums}
.latchip.ok{color:var(--green);border-color:#1d5b3c}
.latchip.warn{color:var(--amber);border-color:var(--amber-dim)}
.latchip.bad{color:var(--red);border-color:#7a2b2b}

/* fill recém-chegado pelo SSE: pisca âmbar e assenta */
tr.fresh td{animation:freshfl 2.2s ease-out}
@keyframes freshfl{0%{background:rgba(255,160,40,.35)}100%{background:transparent}}

/* ── barras de utilização de cap (painel RISCO) ───────────────────────────── */
.barline{display:flex;align-items:center;gap:8px}
.bar-wrap{position:relative;height:13px;min-width:90px;flex:1;max-width:160px;
  background:#000;border:1px solid var(--border2);border-radius:2px;overflow:hidden}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--green);transition:width .3s}
.bar-fill.warn{background:var(--amber)} .bar-fill.crit{background:var(--red)}
.kill-on{color:var(--red);font-weight:700} .kill-off{color:var(--green)}
.flash{animation:fl 1.1s ease-out}
@keyframes fl{from{background:var(--amber-soft)}to{background:transparent}}

/* ── pill de saúde de rede (barra de comando) ──────────────────────────── */
.netpill{display:flex;align-items:center;gap:6px;color:var(--dim);text-transform:uppercase;
  font-size:10px;letter-spacing:1px}
.netpill .dot{width:8px;height:8px;border-radius:50%;background:var(--dimmer)}
.netpill.ok{color:var(--green)} .netpill.ok .dot{background:var(--green)}
.netpill.warn{color:var(--amber)} .netpill.warn .dot{background:var(--amber)}
.netpill.bad{color:var(--red)} .netpill.bad .dot{background:var(--red);
  animation:pulse 1.8s ease-out infinite}

/* ── painel de LATÊNCIA (3 camadas: execução | rede | feed) ──────────────── */
.lat-grid{display:grid;gap:14px;grid-template-columns:1.2fr 1fr .7fr;align-items:start}
@media(max-width:1100px){.lat-grid{grid-template-columns:1fr}}
.lat-col{min-width:0}
.lat-h{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--amber-dim);
  font-weight:700;border-bottom:1px solid var(--border);padding-bottom:5px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:2px}
.lat-h .lat-sub{font-size:9px;color:var(--dim);text-transform:none;letter-spacing:0;font-weight:400}

/* camada 1: execução por estágio */
.latrow{margin-bottom:11px}
.latrow-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.latrow-top .name{font-weight:700;color:var(--fg);letter-spacing:.3px}
.latrow-p{margin-left:auto;color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.latrow-p b{color:var(--fg2);font-weight:600}
.latrow-p b.warn{color:var(--amber)} .latrow-p b.crit{color:var(--red)}
.stagebar{display:flex;height:14px;border:1px solid var(--border2);border-radius:2px;
  overflow:hidden;background:#000}
.stagebar .seg{height:100%}
.seg.s-eng{background:var(--blue)} .seg.s-sig{background:var(--amber)} .seg.s-net{background:var(--cyan)}
.stagelab{display:flex;gap:12px;margin-top:3px;font-size:9px;color:var(--dim)}
.stagelab .s-eng{color:var(--blue)} .stagelab .s-sig{color:var(--amber)} .stagelab .s-net{color:var(--cyan)}

/* camada 2: baseline de rede por categoria */
.netcat{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:var(--amber);
  font-weight:700;margin:9px 0 3px}
.netcat:first-child{margin-top:0}
table.nettab{width:100%;border-collapse:collapse;font-size:10px}
.nettab td{padding:2px 6px;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.nettab .neth{color:var(--fg2)}
.nettab .netv{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.nettab .netv b{color:var(--fg2);font-weight:600}
.nettab .netv b.warn{color:var(--amber)}
.nettab .netage{text-align:right;width:34px}
.neterr{color:var(--red)}
.hdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--dimmer)}
.hdot.ok{background:var(--green)} .hdot.warn{background:var(--amber)} .hdot.bad{background:var(--red)}

/* ── status bar (rodapé) ───────────────────────────────────────────────── */
.status{position:sticky;bottom:0;display:flex;align-items:center;gap:16px;
  height:24px;padding:0 12px;background:#000;border-top:1px solid var(--border2);
  color:var(--dim);font-size:10px;z-index:20}
.status b{color:var(--fg2);font-weight:600}
.status .spacer{flex:1}
.status .fk{color:var(--amber-dim)}
.status .fk kbd{margin-right:3px}