:root{
  --bg:#0b1220; --panel:#0d1525cc; --muted:#9fb1c7; --fg:#e9f2ff;
  --blue1:#1fb6ff; --blue2:#4f46e5; --blueGlow:#00d1ff;
  --glass:#131c2b99; --line:#1f2d45; --off:#233048;
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(1200px 600px at 20% -20%, #1b2a48 0%, #0b1220 60%); color:var(--fg); font-family: ui-rounded, system-ui, -apple-system, 'Helvetica Neue', Arial}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; backdrop-filter: blur(12px); background:#0b1220cc; position:sticky; top:0; z-index:10; border-bottom: 1px solid #ffffff14}
.brand{font-weight:900; letter-spacing:.5px; text-shadow:0 0 12px rgba(0,209,255,.4)}
.date{opacity:.8}
.container{max-width:1100px; margin:22px auto; padding:0 14px}

.section-head{display:flex; justify-content:space-between; align-items:center; margin:8px 2px}
.actions{display:flex; gap:8px}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:14px}
.tile{border:none; border-radius:16px; padding:16px; text-align:left; cursor:pointer; background:var(--glass); color:var(--fg); box-shadow:0 10px 22px #00000055, inset 0 0 0 1px #ffffff10; transition:transform .08s ease, box-shadow .2s ease}
.tile:hover{transform: translateY(-2px); box-shadow:0 12px 24px #00000077, 0 0 24px rgba(0,209,255,.18)}
.tile .name{font-weight:800; font-size:18px}
.tile .sub{font-size:12px; opacity:.85}
.on{background: linear-gradient(135deg, #0f2746, #0a1c33); color:white; box-shadow:0 8px 22px rgba(0,209,255,.25), inset 0 0 0 1px #1b80ff44}
.off{background: #10192a; color:#aac1da88; border:1px solid #1f2d45}

.panel{margin-top:22px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 24px #0009}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.panel-actions{display:flex; gap:8px}
.hidden{display:none}

.race-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:10px}
.ritem{padding:12px; border-radius:12px; background:#0c1422; border:1px solid #1f2d45; cursor:pointer}
.ritem strong{display:block}

.rdetail-head{display:flex; gap:10px; align-items:center; justify-content:space-between}
.table{width:100%; border-collapse:collapse; margin-top:10px; font-size:14px}
.table th,.table td{border-bottom:1px solid #1f2d45; padding:8px}
.table th{color:#9fb1c7; font-weight:600}

.btn{padding:8px 12px; border-radius:10px; border:1px solid #294264; background:#10203a; color:#cfe4ff; cursor:pointer; box-shadow:0 0 0 rgba(0,209,255,0); transition: box-shadow .2s ease}
.btn.ghost{background:transparent}
.btn:hover{box-shadow:0 0 18px rgba(0,209,255,.25)}

.tag{display:inline-block; padding:3px 8px; font-size:12px; border-radius:999px; background:#1f2d45; color:#a7c0df}
.badge{display:inline-block; padding:2px 6px; font-size:11px; border-radius:6px; color:#fff; background:linear-gradient(135deg, var(--blue1), var(--blue2)); box-shadow:0 0 10px rgba(0,209,255,.28)}

.stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.stat{padding:14px; border-radius:14px; background:#0c1422; border:1px solid #1f2d45}
.stat strong{font-size:20px}

.foot{padding:24px; text-align:center; opacity:.6}