:root{--bg:#0c1022;--ink:#eaf0ff;--muted:#a4b0ca;--card:#111a36;--line:#21345f;--accent:#58c4ff;--ok:#19d197;--warn:#ffd166}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f1733 0,#0a1124 100%)}
.brand h1{margin:0;font-size:20px}
.brand small{color:var(--muted)}
.controls{display:flex;gap:10px;align-items:center}
.controls input,.controls select{background:#0f1832;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 10px}
.controls button{background:var(--accent);color:#031227;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer}
.controls #status{color:var(--muted)}
.tabs{display:flex;gap:6px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);background:#0e162f;position:sticky;top:0;z-index:5}
.tabs .divider{width:2px;height:22px;background:var(--line);margin:0 4px}
.tabs button{background:#0f1832;color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:6px 12px;cursor:pointer}
.tabs button.active{background:var(--accent);color:#05122c;border-color:#5fbfff}
main{padding:16px 20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:16px;padding:16px}
.panel h2{margin:0 0 12px 0}
#overallTitle{ text-align:center; }
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px; align-items: stretch;}
.card{background:#0f1832;border:1px solid var(--line);border-radius:10px;padding:12px}
#ntTitle{ text-align:center; }
/* Center tracker columns and distribute evenly */
#numberTracker{ table-layout: fixed; width:100%; }
#numberTracker th, #numberTracker td { text-align:center; }
.kpi, .kpi .kpi-val, .kpi .kpi-label { text-align:center; }
.kpi-val { font-size:42px; font-weight:800; line-height:1; }
#gameSummaryTitle, #financeSummaryTitle { text-align:center; margin-top:4px; margin-bottom:4px; }
.compact{width:100%;border-collapse:collapse}
.compact th,.compact td{border-bottom:1px solid var(--line);padding:6px 8px}
.kpis{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.kpi{flex:1;background:#0f1832;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.kpi-label{color:var(--muted);font-size:13px}
.money{margin-top:4px}
.money .row{display:flex;justify-content:space-between;margin-top:6px;padding:8px 4px;font-size:16px}
.money .row strong{ font-size:18px; }
.payouts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.payout{background:#0f1832;border:1px solid var(--line);border-radius:10px;padding:10px}
.payout h4{margin:0 0 6px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:right}
.table th:first-child,.table td:first-child{text-align:left}
.tab{display:none}
.tab.active{display:block}
footer{padding:20px;color:var(--muted)}
@media(max-width:960px){.overview-grid{grid-template-columns:1fr}}
.overview-grid > .card{ display:flex; flex-direction:column; }
.summary-box{ display:flex; flex-direction:column; justify-content:space-evenly; gap:16px; min-height: 100%; }