:root {
  color-scheme: dark;
  --bg: #050711;
  --panel: rgba(13, 18, 38, .9);
  --line: rgba(111, 167, 255, .18);
  --cyan: #45e5ff;
  --violet: #9b6cff;
  --text: #eff6ff;
  --muted: #8b97af;
  --danger: #ff7888;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--text); background: radial-gradient(circle at 10% 0, #073042 0, transparent 30%), radial-gradient(circle at 95% 10%, #211348 0, transparent 30%), var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1500px, calc(100% - 32px)); min-height: 100vh; margin: auto; padding: 28px 0 40px; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: .7rem; font-weight: 850; letter-spacing: .18em; }
.login-card { width: min(480px, 100%); margin: 9vh auto; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.42); }
.brand-mark { color: white; font-size: 1.15rem; font-weight: 900; letter-spacing: .13em; }.brand-mark span { color: var(--cyan); }
.login-card h1, .topbar h1 { margin: 6px 0 10px; letter-spacing: -.04em; }.login-card p { color: var(--muted); line-height: 1.6; }
.login-card form { display: grid; gap: 12px; margin-top: 25px; }.login-card label { color: var(--muted); font-size: .8rem; font-weight: 700; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--text); background: #0a0f22; }
input { padding: 12px 13px; } select { padding: 10px; }.login-card input:focus, input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(69,229,255,.11); }
.login-card button, .top-actions button { border: 0; border-radius: 11px; padding: 12px 16px; font-weight: 800; }.login-card button { color: #061018; background: linear-gradient(135deg, var(--cyan), #68a4ff); }
.error { min-height: 1.2em; margin: 0!important; color: var(--danger)!important; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; }.topbar h1 { font-size: clamp(1.8rem, 4vw, 3rem); }.privacy-note { margin: 0; color: var(--muted); }
.top-actions { display: flex; flex-wrap: wrap; gap: 9px; }.secondary { border: 1px solid var(--line)!important; color: var(--text); background: rgba(17,25,52,.75); }
.station-strip { display: grid; grid-template-columns: 160px minmax(240px,1fr) 160px; gap: 12px; margin: 24px 0 14px; }.station-strip>div { padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(7,12,27,.83); }.station-strip span { display: block; color: var(--muted); font-size: .63rem; letter-spacing: .14em; }.station-strip strong { display: block; margin-top: 5px; overflow-wrap: anywhere; }.track strong { color: var(--cyan); }
.summary-grid { display: grid; grid-template-columns: repeat(7, minmax(125px,1fr)); gap: 12px; }.summary-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(14,24,51,.92), rgba(13,11,35,.9)); }.summary-card strong { display: block; font-size: 1.8rem; }.summary-card span { display: block; margin-top: 6px; color: var(--muted); font-size: .7rem; line-height: 1.35; text-transform: uppercase; }
.panel { border: 1px solid var(--line); border-radius: 19px; background: var(--panel); }.filters-panel { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-top: 14px; padding: 20px; }.filters-panel h2 { margin: 4px 0 0; }.filters { display: grid; grid-template-columns: repeat(4, minmax(120px,180px)); gap: 10px; }.filters label { color: var(--muted); font-size: .68rem; }.filters input,.filters select { margin-top: 5px; }
.table-panel { margin-top: 14px; overflow: hidden; }.table-wrap { overflow: auto; }table { width: 100%; min-width: 1350px; border-collapse: collapse; }th,td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .72rem; }th { position: sticky; top: 0; z-index: 1; color: var(--cyan); background: #0a1023; letter-spacing: .08em; text-transform: uppercase; }td { color: #dce7f7; }td small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }.status { display: inline-flex; padding: 4px 7px; border-radius: 99px; background: rgba(69,229,255,.1); color: var(--cyan); font-weight: 850; }.status.ended { color: var(--muted); background: rgba(139,151,175,.1); }.classify { min-width: 130px; padding: 7px; font-size: .68rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 14px; }.stats-grid .panel { padding: 20px; }.bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-top: 11px; }.bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.bar i { grid-column: 1/-1; height: 4px; border-radius: 4px; background: linear-gradient(90deg,var(--cyan) var(--w),rgba(255,255,255,.07) var(--w)); }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 4px; color: var(--muted); font-size: .68rem; }
@media(max-width:1400px){.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%}.summary-grid{grid-template-columns:repeat(4,1fr)}.filters-panel{align-items:stretch;flex-direction:column}.filters{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.shell{width:min(100% - 18px,620px);padding-top:14px}.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%}.top-actions button{flex:1}.station-strip{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:1fr}.login-card{margin-top:4vh;padding:24px}footer{flex-direction:column}}