@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('./setup.css');
:root{color-scheme:dark;--bg:#080c14;--panel:#111925;--panel2:#151f2d;--line:#263243;--soft:#8595ab;--text:#edf5ff;--lime:#b9fa53;--green:#4bed9d;--red:#ff627a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% -20%,#17283c 0,transparent 47%),var(--bg);font-family:'DM Sans',sans-serif;color:var(--text)}.shell{display:flex;min-height:100vh}.sidebar{width:250px;flex-shrink:0;background:#0b111b;border-right:1px solid #1f2a38;padding:30px 19px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.logo{display:flex;align-items:center;gap:13px;padding:0 8px;margin-bottom:66px;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:-1px}.brand-symbol{color:var(--lime);font-size:42px;line-height:1;text-shadow:0 0 22px #b9fa5355}.logo small{display:block;font:600 9px 'DM Sans';letter-spacing:2.3px;color:#66778f;margin-top:5px}.accent{color:var(--lime)}.nav-label,.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#71839b}.nav-label{padding:0 16px;margin-bottom:14px}.nav{padding:14px 16px;margin-bottom:7px;color:#91a0b5;text-decoration:none;font-size:13px;font-weight:700;border-radius:12px;display:flex;gap:16px;align-items:center}.nav:hover,.nav.active{background:#1c2b32;color:var(--lime)}.sidebar-bottom{margin-top:auto;padding:19px 14px 0;border-top:1px solid #223044;font-size:12px;line-height:1.8;color:#c4d2e3}.sidebar-bottom small{color:#7b8da3;margin-left:13px}.green-dot{display:inline-block;background:var(--green);height:7px;width:7px;border-radius:50%;margin-right:7px}.logout{display:block;color:#91a0b5;margin-top:20px;text-decoration:none}.content{min-width:0;width:100%;max-width:1800px;padding:43px clamp(20px,4vw,65px) 25px;margin:auto}.topbar{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:34px}.topbar h1{font:700 clamp(29px,3vw,43px) 'Space Grotesk';letter-spacing:-1.6px;margin:9px 0}.topbar p{color:#8799b0;font-size:14px;margin:0}.header-right{text-align:right}#clock{font:600 24px 'Space Grotesk';letter-spacing:1px;margin-bottom:11px}.status-pill,.live-badge,.mini-badge{display:inline-block;border:1px solid #2b6851;background:#153b30;color:#6cf3ad;padding:9px 13px;border-radius:9px;font-size:10px;font-weight:800;letter-spacing:1.2px}.status-pill.offline{border-color:#75313d;color:var(--red);background:#351c29}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:18px}.metric,.panel{background:linear-gradient(140deg,#151f2d,#101722);border:1px solid #273243;box-shadow:0 10px 32px #0002;border-radius:18px}.metric{padding:23px;min-height:157px;position:relative;overflow:hidden}.metric-label{color:#8d9db1;font-size:10px;font-weight:800;letter-spacing:1.3px}.metric strong{display:block;font:700 clamp(22px,2.2vw,32px) 'Space Grotesk';margin:20px 0 7px;letter-spacing:-.8px}.metric strong.good{color:var(--green)}.metric strong.bad{color:var(--red)}.metric strong small{font-size:14px;color:#8595ab}.metric-foot{color:#75869b;font-size:11px}.metric-icon{position:absolute;right:18px;top:18px;font-size:26px;color:#496078}.main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:18px;margin-bottom:18px}.panel{padding:26px}.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:25px}.panel h2{font:700 23px 'Space Grotesk';letter-spacing:-.6px;margin:6px 0 0}.mini-badge{background:#202d3d;border-color:#344357;color:#a7b9cf;white-space:nowrap}.live-badge{white-space:nowrap}.track{display:flex;align-items:center;gap:25px;margin:10px 0 30px}.cover{height:125px;width:125px;flex-shrink:0;border-radius:18px;background:radial-gradient(circle at 20% 20%,#d4ff6d55,transparent 50%),linear-gradient(135deg,#365a5a,#19243e 65%,#493565);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 15px 40px #0005}.cover span{font-size:54px;color:var(--lime);z-index:1}.cover-glow{height:140px;width:140px;background:radial-gradient(circle,#aafa4366,transparent 67%);position:absolute;top:45px;left:45px}.track-info{min-width:0}.track-info h3{font:700 clamp(23px,2.5vw,35px) 'Space Grotesk';letter-spacing:-1px;margin:13px 0 8px;overflow-wrap:anywhere}.track-info p{color:#93a4bb;margin:0;font-size:15px}.player{background:#0b121d;border:1px solid #243246;border-radius:13px;padding:13px;display:flex;align-items:center;gap:14px}#play{border:0;cursor:pointer;border-radius:12px;background:var(--lime);color:#102012;width:45px;height:45px;flex-shrink:0;font-size:21px;font-weight:700}.player-text{display:flex;flex-direction:column;gap:4px}.player-text strong{font-size:13px}.player-text small{color:#758da5;font-size:11px}.player-right{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--lime);font-size:10px;font-weight:800}.player-right input{accent-color:var(--lime);width:75px}.health-line{display:flex;justify-content:space-between;gap:15px;padding:19px 0;border-bottom:1px solid #273244;font-size:12px;color:#b4c1d2}.health-line b{color:#e9f1fc;font-size:11px;text-align:right}.health-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#718093;margin-right:9px}.health-dot.healthy{background:var(--green);box-shadow:0 0 12px #4bed9d66}.health-note{color:#73869c;line-height:1.7;font-size:11px;margin-top:18px}.meter-panel{margin-bottom:18px;background:linear-gradient(135deg,#172334,#0d1622)}.muted{color:#65798f}.meter-content{background:#080f18;border:1px solid #2a3b4b;border-radius:16px;padding:30px 25px 22px;display:flex;gap:34px;align-items:center}.meter-grid{flex:1;min-width:0}.meter-row{display:flex;align-items:center;gap:17px;margin-bottom:15px}.channel-label{width:45px;flex-shrink:0;color:#869cb1;font-size:9px;font-weight:800;letter-spacing:1px}.channel-label span{display:block;font:700 20px 'Space Grotesk';color:#edf5ff;margin-top:2px}.meter{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));gap:3px;height:32px;flex:1;min-width:0}.segment{border-radius:2px;opacity:.14;background:#3cea92;box-shadow:none}.segment.yellow{background:#f9cc45}.segment.red{background:#ff5d77}.segment.lit{opacity:1;box-shadow:0 0 9px currentColor}.segment.green.lit{color:#4bed9d}.segment.yellow.lit{color:#f9cc45}.segment.red.lit{color:#ff5d77}.db-readout{width:104px;flex-shrink:0;text-align:right;color:var(--lime);font:700 20px 'Space Grotesk';font-variant-numeric:tabular-nums}.db-readout small{display:block;color:#6d8399;font:700 9px 'DM Sans';letter-spacing:1px}.meter-scale{margin-left:62px;margin-right:104px;display:flex;justify-content:space-between;color:#72879b;font-size:10px}.meter-stats{width:160px;border-left:1px solid #253749;padding-left:25px;display:grid;gap:25px}.meter-stats span{display:block;color:#72879b;font-size:9px;font-weight:800;letter-spacing:1px;margin-bottom:7px}.meter-stats strong{font:700 18px 'Space Grotesk';color:#f3f8ff}.panel-note{color:#708399;font-size:11px;line-height:1.7;margin:15px 0 0}.event-list{display:grid;gap:0}.event{display:flex;align-items:center;gap:15px;border-top:1px solid #263244;padding:15px 3px;color:#cbd6e4;font-size:12px}.event time{font:600 12px 'Space Grotesk';color:#7f92a8;width:75px}.event-dot{height:8px;width:8px;border-radius:50%;background:var(--green)}.event-dot.error{background:var(--red)}.empty{color:#788ba2;font-size:13px;padding:15px 0}footer{display:flex;justify-content:space-between;gap:12px;color:#60758c;font-size:10px;font-weight:800;letter-spacing:1.3px;padding:30px 2px}footer span:last-child{font-weight:400;letter-spacing:0}.alert{background:#3b1e2a;border:1px solid #b94c5d;padding:15px 18px;color:#ffacb7;border-radius:12px;margin-bottom:18px;font-size:13px}.alert[hidden]{display:none}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{max-width:460px;width:100%;background:var(--panel);border:1px solid var(--line);padding:40px;border-radius:22px;box-shadow:0 30px 80px #0007}.login-card h1{font:700 36px 'Space Grotesk';margin:14px 0}.login-card p{font-size:14px;color:#9fb0c4;line-height:1.7}.login-card form{display:grid;gap:12px;margin-top:25px}.login-card input{background:#09111c;color:#fff;border:1px solid #354358;padding:16px;border-radius:10px;font:inherit}.primary{background:var(--lime);border:none;border-radius:10px;padding:16px;color:#0f1c17;font-weight:800;cursor:pointer}.error{color:var(--red)!important}
@media(max-width:1200px){.metrics{grid-template-columns:repeat(2,1fr)}.main-grid{grid-template-columns:1fr}.sidebar{width:210px}.content{padding:35px 23px}.meter-content{flex-direction:column;align-items:stretch}.meter-stats{width:auto;border-left:0;border-top:1px solid #253749;padding:20px 0 0;display:flex;justify-content:space-between}}@media(max-width:760px){.shell{display:block}.sidebar{width:auto;height:auto;position:relative;padding:14px 16px;border-right:0;border-bottom:1px solid #273243;display:flex;flex-direction:row;align-items:center;gap:8px;overflow:auto}.logo{font-size:18px;margin:0 auto 0 0;padding:0;white-space:nowrap}.logo small,.nav-label,.sidebar-bottom{display:none}.nav{font-size:18px;padding:8px;margin:0;white-space:nowrap}.nav span{display:none}.content{padding:27px 15px}.topbar{align-items:flex-start}.header-right{max-width:145px}#clock{font-size:18px}.status-pill{font-size:8px;padding:8px}.metrics{gap:10px}.metric{padding:15px;min-height:135px}.metric strong{font-size:23px}.metric-label{font-size:9px}.metric-foot{font-size:10px}.panel{padding:18px}.panel h2{font-size:20px}.track{gap:15px}.cover{width:90px;height:90px}.track-info h3{font-size:24px}.meter-content{padding:17px 10px}.meter-row{gap:8px}.channel-label{width:19px;font-size:0}.channel-label span{font-size:16px}.meter{gap:1.4px;height:27px}.db-readout{width:69px;font-size:13px}.meter-scale{margin-left:27px;margin-right:68px;font-size:8px}.player-right input{width:45px}footer{flex-direction:column}}@media(max-width:420px){.topbar h1{font-size:27px}.topbar p{font-size:12px}.live-badge,.mini-badge{font-size:8px;padding:7px}.track-info h3{font-size:20px}.metric strong{font-size:20px}.metric-icon{font-size:18px}.meter-scale span:nth-child(even){display:none}}