:root { --sidebar: 260px; --accent: #f684c4; --cyan: #84dfff; }
body { min-height: 100vh; background: radial-gradient(circle at 80% 10%, #28345f 0, #151326 38%, #0c0b15 100%); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 28px 20px; display: flex; flex-direction: column; gap: 10px; background: rgba(15,12,29,.96); border-right: 1px solid #352d50; }
.brand { color: var(--accent); font-weight: 900; font-size: 30px; line-height: .9; margin-bottom: 38px; letter-spacing: 2px; }
.brand span { color: #fff; font-size: 12px; letter-spacing: 3px; }
.nav-link { border: 0; border-radius: 10px; color: #afa7c4; background: transparent; padding: 13px 15px; text-align: left; font-weight: 700; }
.nav-link:hover,.nav-link.active { color: white; background: linear-gradient(90deg,#673f8d,#3c315e); box-shadow: inset 3px 0 var(--accent); }
.content { margin-left: var(--sidebar); padding: 42px; max-width: 1500px; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.eyebrow { color: var(--accent); letter-spacing: 3px; font-weight: 800; margin-bottom: 7px; }
h1 { font-weight: 900; }
.live-badge { color:#b8b0ca; font-size:12px; letter-spacing:1px; }
.live-badge span { display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%; background:#6fe7b7; box-shadow:0 0 12px #6fe7b7; }
.card { border: 1px solid #3e345c; background: rgba(30,25,52,.9); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
.filter-card { margin-bottom: 22px; }
.record-card .card-header { padding: 18px 22px; border-bottom-color:#3e345c; }
.table > :not(caption) > * > * { padding: 16px 20px; background: transparent; border-color:#332c49; }
.rank { color:var(--cyan); font-size:20px; font-weight:900; }
.time { color:#ffd96b; font-weight:800; font-variant-numeric:tabular-nums; }
.empty-state { padding:70px 20px; text-align:center; color:#8f87a3; }
[data-bs-theme="light"] body { background:#edf0f7; }
[data-bs-theme="light"] .content { color:#212529; }
[data-bs-theme="light"] .card { background:white; border-color:#dfe2eb; }
[data-bs-theme="light"] .table { --bs-table-color:#212529; --bs-table-bg:white; --bs-table-hover-bg:#f4eff8; }
@media (max-width: 850px) { .sidebar { position:static; width:100%; min-height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; } .brand { margin:0 auto 0 0; } .sidebar .mt-auto { margin-left:auto!important; } .content { margin-left:0; padding:24px 16px; } .page-header { align-items:flex-start; gap:20px; } }