:root{
  --bg:#07101f;
  --panel:#0d1a2d;
  --panel2:#12233b;
  --text:#f5f8ff;
  --muted:#9eb0c8;
  --blue:#25a7ff;
  --blue2:#1677d2;
  --line:rgba(255,255,255,.09);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top right,#112b4d 0,#07101f 42%,#050b15 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select{font:inherit}
.container{width:min(1120px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,11,21,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:900;letter-spacing:.08em}
.brand-mark{font-size:24px;color:#fff}.brand-radio{font-size:14px;color:var(--blue)}
.main-nav{display:flex;gap:22px;color:var(--muted);font-weight:700}.main-nav a:hover{color:#fff}
.hero{padding:88px 0 70px;border-bottom:1px solid var(--line)}
.hero-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}
.live-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--blue)}
.live-badge span{width:9px;height:9px;border-radius:50%;background:#ff3d5a;box-shadow:0 0 14px rgba(255,61,90,.8)}
.eyebrow{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
h1{font-size:clamp(42px,7vw,78px);line-height:1.02;margin:12px 0}
h2{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:6px 0}
.hero-text{color:var(--muted);font-size:19px;margin:0 0 28px}
.hero-clock{font-size:clamp(60px,10vw,120px);font-weight:900;letter-spacing:-.06em;color:rgba(255,255,255,.08)}
.button{border:0;border-radius:999px;padding:13px 22px;cursor:pointer;font-weight:900}
.button-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 12px 30px rgba(37,167,255,.22)}
.section{padding:72px 0}.section-heading{margin-bottom:28px}.row-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}
.text-link{color:var(--blue);font-weight:800}
.now-card{display:flex;align-items:center;gap:28px;padding:24px;background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--radius)}
.now-cover,.player-cover{width:180px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#152944;flex:none}.now-cover img,.player-cover img{width:100%;height:100%;object-fit:cover}
.cover-placeholder{height:100%;display:grid;place-items:center;font-size:64px;color:var(--blue)}
.now-label{margin:0;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.15em}.now-details h3{font-size:30px;margin:8px 0 2px}.now-details p:last-child{margin:0;color:var(--muted);font-size:20px}
.history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.history-card{display:flex;gap:16px;align-items:center;padding:13px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px}
.history-cover{width:64px;height:64px;border-radius:10px;overflow:hidden;background:#152944;display:grid;place-items:center;color:var(--blue);font-size:26px;flex:none}.history-cover img{width:100%;height:100%;object-fit:cover}
.history-card strong,.history-card span,.history-card small{display:block}.history-card span{color:var(--muted)}.history-card small{color:#7186a2;margin-top:4px}
.site-footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);text-align:center}
.player-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);display:none;place-items:center;padding:20px}.player-overlay.is-open{display:grid}
.player-modal{width:min(420px,100%);background:linear-gradient(145deg,#0f2036,#07101f);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.5);overflow:hidden}
.player-top{display:flex;justify-content:space-between;align-items:center;padding:18px 20px}.player-close{border:0;background:transparent;color:#fff;font-size:28px;cursor:pointer}.player-content{text-align:center;padding:10px 34px 36px}.player-cover{width:230px;margin:0 auto 22px}.player-content h2{font-size:30px}.player-content>p:not(.now-label){color:var(--muted);font-size:18px;margin-top:0}.player-play{width:68px;height:68px;border-radius:50%;border:0;background:var(--blue);color:#fff;font-size:24px;cursor:pointer;margin-top:18px}
.playlist-filter{display:flex;align-items:end;gap:14px;padding:18px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:28px}
.playlist-filter label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-weight:800;flex:1}.playlist-filter input,.playlist-filter select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#091426;color:#fff}
.playlist-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:25px 0}.playlist-heading h2{font-size:28px}.playlist-heading span{color:var(--blue);font-weight:800}
.playlist-list{border-top:1px solid var(--line)}.playlist-item{display:flex;align-items:center;gap:16px;padding:13px 4px;border-bottom:1px solid var(--line)}.playlist-item:hover{background:rgba(255,255,255,.025)}
.playlist-cover{width:58px;height:58px;border-radius:10px;overflow:hidden;background:#152944;display:grid;place-items:center;color:var(--blue);font-size:24px;flex:none}.playlist-cover img{width:100%;height:100%;object-fit:cover}
.playlist-info{flex:1}.playlist-info strong,.playlist-info span{display:block}.playlist-info span{color:var(--muted)}.playlist-item time{color:#8295ad;font-variant-numeric:tabular-nums}
.empty-state{padding:45px;text-align:center;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}.empty-state h3{color:#fff}
.page-content{min-height:55vh}
@media(max-width:760px){
  .main-nav{display:none}.hero-inner{display:block}.hero-clock{margin-top:30px;font-size:58px}
  .history-grid{grid-template-columns:1fr}.now-card{gap:18px}.now-cover{width:120px}.now-details h3{font-size:24px}
  .playlist-filter{display:grid;grid-template-columns:1fr}.playlist-heading{display:block}.playlist-heading span{display:block;margin-top:5px}
}