:root {
  --bg: #131722;
  --panel: #171d29;
  --border: #303b4e;
  --text: #edf2fa;
  --muted: #aab7cb;
  --up: #4ad6b0;
  --down: #ff797f;
  --amber: #f7a600;
  --pred: #f5c542;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 20px 24px 40px;
  display: grid;
  gap: 20px;
  max-width: 100%;
  overflow-x: hidden;
}

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }
.hit { color: var(--up); }
.miss { color: var(--down); }

/* ---- Header ---- */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}
header h1 { font-size: 16px; margin: 0; font-weight: 700; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border);
}
.badge.paper { color: var(--down); border-color: var(--down); background: rgba(255, 121, 127, .1); }
.badge.mock { color: var(--amber); border-color: var(--amber); background: rgba(247, 166, 0, .1); }
.badge.live { margin-left: auto; color: var(--muted); border-color: var(--border); }
.badge.live.ok { color: var(--up); border-color: var(--up); }
.badge.live.down { color: var(--down); border-color: var(--down); }
header .hdr-item { font-size: 13px; color: var(--muted); }
header .hdr-item b { color: var(--text); font-weight: 600; }

/* ---- Layout ---- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 0;
}
.card-label {
  display: block;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin: 0 0 14px;
}

/* ---- Current window ---- */
.win-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.win-slug { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.win-countdown { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.win-countdown.low { color: var(--down); }

.ptb { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.ptb b { color: var(--text); font-weight: 600; }

.odds { display: flex; gap: 12px; margin: 8px 0 14px; }
.odds > div { flex: 1; padding: 10px 12px; border-radius: 10px; min-width: 0; }
.odds .u { background: #193e39; color: var(--up); }
.odds .dn { background: #442b37; color: var(--down); }
.odds .side-lbl { font-weight: 700; font-size: 14px; }
.odds .side-vals { margin-top: 4px; font-size: 12px; line-height: 1.6; opacity: .92; }
.odds .side-vals b { font-weight: 700; }

.tip-line { font-size: 14px; margin: 4px 0 12px; }
.tip-line b { font-weight: 700; }

.jev-row { margin: 10px 0 14px; }
.jev-row .lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.jev-row .lbl b { color: var(--text); }
/* Grey track (0–100%); the fill reaches Jev's confidence in its own call, coloured by that side. */
.jevbar { position: relative; height: 10px; background: var(--border); border-radius: 5px; overflow: visible; }
.jevbar i { display: block; height: 100%; background: var(--muted); border-radius: 5px; transition: width .3s; }
.jevbar i.up { background: var(--up); } .jevbar i.down { background: var(--down); }
.jevbar .thresh {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text);
}

.edge-line { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.edge-line b { color: var(--text); }
.edge-line b.pos { color: var(--up); } .edge-line b.neg { color: var(--down); }

.decision-box {
  margin-top: 4px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); font-size: 15px; font-weight: 700;
}
.decision-box.trade { border-color: var(--up); background: rgba(74, 214, 176, .08); color: var(--up); }
.decision-box.hold { border-color: var(--border); background: rgba(255, 255, 255, .02); color: var(--text); }
.decision-box.hold small, .decision-box.trade small { display: block; font-weight: 500; color: var(--muted); margin-top: 4px; font-size: 13px; }
.decision-box.none { border-color: var(--border); color: var(--muted); font-weight: 500; }

/* ---- KV rows ---- */
.kv { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; gap: 12px; }
.kv:last-child { border-bottom: 0; padding-bottom: 0; }
.kv > span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 150px; }
.kv b { flex: 0 1 auto; font-weight: 600; text-align: right; white-space: nowrap; }
.kv b.pos { color: var(--up); } .kv b.neg { color: var(--down); }

/* ---- Tables ---- */
.table-scroll { overflow-x: auto; margin-top: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-size: 12px; font-weight: normal; }
tbody tr:last-child td { border-bottom: 0; }
.hold-reasons { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }

footer { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 0 0; }

@media (max-width: 900px) {
  body { padding: 12px 14px 32px; }
  .grid-2 { grid-template-columns: 1fr; }
  .odds { flex-direction: column; }
  header .badge.live { margin-left: 0; }
}