:root{
  --bg:#f5f7fb;--paper:#fff;--ink:#12213a;--muted:#65758a;--line:#e2e8f0;
  --red:#ef233c;--red2:#ff5263;--navy:#0b2345;--navy2:#123965;
  --soft:#f7f9fc;--ok:#1f9d62;--warn:#c97900;--shadow:0 18px 48px rgba(11,35,69,.09);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:
  radial-gradient(circle at 86% 0%,rgba(239,35,60,.08),transparent 22%),
  linear-gradient(180deg,#fff 0%,var(--bg) 100%);-webkit-font-smoothing:antialiased}
body.large-text{font-size:118%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img{max-width:100%}
.wrap{width:min(1220px,calc(100% - 34px));margin:auto}
.skip{position:absolute;left:-9999px;top:10px;background:#fff;color:#000;padding:10px 14px;border-radius:10px;z-index:999}
.skip:focus{left:10px}
:focus-visible{outline:3px solid #2f72d6;outline-offset:3px}

.topbar{background:var(--navy);color:#fff}
.topbar .row{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.topbar .muted{color:#c7d3e1}

header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.91);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head{min-height:88px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.brand img{width:280px;height:76px;object-fit:contain;object-position:left center;display:block}
nav{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
nav a{padding:10px 12px;border-radius:12px;color:#59697d;font-size:14px;font-weight:800}
nav a:hover,nav a[aria-current=page]{background:#f0f4f8;color:var(--ink)}
.actions{display:flex;gap:9px;align-items:center}
.btn{border:0;border-radius:14px;padding:12px 16px;font-weight:900;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;box-shadow:0 10px 24px rgba(239,35,60,.2)}
.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.iconbtn{width:44px;height:44px;border-radius:13px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:#fff1f3;color:#b71f31;font-size:12px;font-weight:900}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(239,35,60,.5);animation:pulse 1.7s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(239,35,60,0)}100%{box-shadow:0 0 0 0 rgba(239,35,60,0)}}

.hero{padding:26px 0 14px}
.heroGrid{display:grid;grid-template-columns:1.06fr .94fr;gap:18px}
.heroMain{min-height:480px;border-radius:30px;overflow:hidden;position:relative;background:linear-gradient(145deg,#102b50,#07172d);color:#fff;box-shadow:var(--shadow)}
.heroMain:before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 78% 17%,rgba(239,35,60,.22),transparent 17%),
  radial-gradient(circle at 10% 80%,rgba(255,255,255,.06),transparent 18%)}
.heroMain:after{content:"";position:absolute;right:-5%;bottom:-24px;width:58%;height:210px;border-top:5px solid rgba(255,255,255,.78);border-radius:210px 210px 0 0;transform:rotate(-8deg);opacity:.7}
.heroContent{position:relative;z-index:2;padding:42px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:900;color:#ffd2d8}
.hero h1{font-size:clamp(48px,6vw,76px);letter-spacing:-3px;line-height:.94;margin:18px 0 14px}
.hero p{max-width:650px;color:#d2dbe8;line-height:1.72;font-size:17px;margin:0}
.heroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.stat{padding:14px 15px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);border-radius:17px}
.stat b{display:block;font-size:20px}.stat span{display:block;margin-top:4px;font-size:12px;color:#c8d5e4}

.player{background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.playerHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.playerHead small{color:var(--muted)}
.art{min-height:230px;margin:16px 0;border-radius:22px;border:1px solid var(--line);position:relative;overflow:hidden;background:
  radial-gradient(circle at 50% 30%,rgba(11,35,69,.08),transparent 25%),
  radial-gradient(circle at 62% 60%,rgba(239,35,60,.12),transparent 23%),
  linear-gradient(180deg,#fbfcfe,#f4f7fb);display:grid;place-items:center}
.art img{width:88%;max-width:390px;filter:drop-shadow(0 14px 22px rgba(11,35,69,.14));z-index:2}
.wave{position:absolute;left:0;right:0;bottom:14px;height:78px;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.wave i{width:4px;height:10px;border-radius:999px;background:linear-gradient(to top,var(--red),var(--navy));animation:eq .95s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:.13s}.wave i:nth-child(3n){animation-delay:.26s}
@keyframes eq{0%,100%{height:8px;opacity:.35}50%{height:54px;opacity:1}}
.wave.paused i{animation-play-state:paused;height:12px}
.track{font-size:23px;font-weight:900}.artist{color:var(--muted);margin-top:4px}
.controls{display:flex;align-items:center;gap:12px;margin-top:16px}
.play{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;font-size:20px;font-weight:900;box-shadow:0 10px 22px rgba(239,35,60,.2)}
.range{accent-color:var(--red);flex:1}
.playerNote{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px}

.nowstrip{padding:8px 0 30px}
.nowbox{display:grid;grid-template-columns:1fr 1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 9px 28px rgba(11,35,69,.05)}
.nowcell{padding:17px 19px;border-right:1px solid var(--line)}
.nowcell:last-child{border-right:0}
.label{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#8b99a9;font-weight:900}
.nowcell b{display:block;margin-top:5px;font-size:17px}.nowcell span{display:block;color:var(--muted);font-size:12px;margin-top:4px}

section{padding:14px 0 46px}
.sectionTop{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}
.sectionTop h2{font-size:32px;letter-spacing:-1px;margin:0}.sectionTop p{max-width:560px;margin:0;color:var(--muted);line-height:1.6}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:21px;box-shadow:0 8px 24px rgba(11,35,69,.04);position:relative;overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(11,35,69,.08)}
.card:before{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(239,35,60,.08),rgba(239,35,60,0))}
.card h3{font-size:21px;margin:10px 0 8px;position:relative}.card p{color:var(--muted);line-height:1.6;margin:0;position:relative}.small{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:900;color:#8b98a8;position:relative}

.programGrid,.lowerGrid{display:grid;grid-template-columns:1.04fr .96fr;gap:16px}
.list{display:grid;gap:9px}
.item{display:grid;grid-template-columns:78px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border-radius:15px;background:#f7f9fc;border:1px solid #edf1f5}
.item strong{font-size:13px;color:#8d1f2e}.item b{font-size:14px}.item small{display:block;margin-top:3px;color:#8895a5}
.badge{font-size:10px;font-weight:900;padding:5px 8px;border-radius:8px}.badge.live{background:#ffe5e9;color:#ad2030}.badge.ok{background:#e6f7ee;color:#177948}

.emptyRoad{padding:28px;border-radius:18px;background:#f7f9fc;border:1px dashed #cfd8e4;text-align:center}
.emptyRoad b{display:block;font-size:18px}.emptyRoad p{color:var(--muted);margin:8px auto 0;max-width:460px;line-height:1.6}

.rankList{display:grid;gap:8px}.rank{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:#fbfcfd}
.rankNo{font-size:20px;font-weight:900;color:#bdc7d2}.rank:first-child .rankNo{color:var(--red)}.rank span{font-size:11px;color:var(--muted);display:block;margin-top:3px}.rankPlay{width:36px;height:36px;border-radius:50%;background:#eef3f8;color:var(--navy);font-weight:900}

.greeting{background:linear-gradient(145deg,#0d2a50,#123b69);color:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.greeting:after{content:"";position:absolute;right:18px;bottom:-8px;width:180px;height:70px;border-top:4px solid rgba(255,82,99,.8);border-radius:120px 120px 0 0;transform:rotate(-6deg)}
.greeting h3{font-size:29px;margin:8px 0 10px;position:relative}.greeting p{color:#d7e2ee;line-height:1.6;position:relative}
.form{display:grid;gap:10px;margin-top:17px;position:relative;z-index:2}
.form input,.form textarea,.form select{width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff;outline:none}
.form select option{color:#111}.form input::placeholder,.form textarea::placeholder{color:#d9e4ef}.form textarea{min-height:100px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:9px;color:#dce5ef;font-size:12px;line-height:1.5}.check input{width:auto;margin-top:3px;accent-color:var(--red)}

.content{padding:34px 0 70px}
.legal{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.legal h1{font-size:36px;margin:0 0 10px;letter-spacing:-1px}.legal h2{font-size:22px;margin-top:28px}.legal p,.legal li{line-height:1.72;color:#4f6074}.legal ul{padding-left:22px}
.notice{padding:14px 16px;border-radius:14px;background:#fff8e8;border:1px solid #f2dfb2;color:#72510b;margin:18px 0}
.good{padding:14px 16px;border-radius:14px;background:#eefaf4;border:1px solid #cfeedd;color:#205c3e;margin:18px 0}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:12px 8px;vertical-align:top}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#748397}

footer{padding:30px 0 110px}.footer{border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;color:var(--muted)}
.footer img{height:62px;width:auto}.footlinks{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}.footlinks a{text-decoration:underline;text-underline-offset:3px}

.dock{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:90;width:min(1000px,calc(100% - 20px));background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 44px rgba(11,35,69,.16);padding:10px 12px;display:flex;align-items:center;gap:12px}
.dock img{height:44px;width:auto}.dockInfo{flex:1;min-width:0}.dockInfo b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dockInfo span{display:block;font-size:11px;color:var(--muted);margin-top:3px}.dockPlay{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;font-weight:900}.dockCount{font-size:11px;color:var(--muted);white-space:nowrap}

.cookie{position:fixed;inset:auto 16px 16px 16px;z-index:150;display:none}
.cookie.open{display:block}.cookieBox{max-width:850px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 60px rgba(11,35,69,.22);padding:20px}
.cookieBox h3{margin:0 0 8px}.cookieBox p{color:var(--muted);line-height:1.6;margin:0}.cookieBtns{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.pref{display:grid;gap:10px;margin-top:14px}.prefRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}.prefRow p{font-size:12px}
.switch{width:48px;height:27px;border-radius:999px;background:#cbd5e1;position:relative;flex:0 0 auto}.switch:after{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}.switch.on{background:var(--red)}.switch.on:after{left:24px}.switch.locked{opacity:.6}

.toast{position:fixed;right:18px;top:96px;z-index:170;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 14px;border-radius:12px;opacity:0;transform:translateY(-8px);transition:.22s;pointer-events:none}.toast.show{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media(max-width:1020px){.head{grid-template-columns:auto 1fr auto}nav{display:none}.heroGrid,.programGrid,.lowerGrid{grid-template-columns:1fr}.stats,.grid3{grid-template-columns:1fr}.nowbox{grid-template-columns:1fr}.nowcell{border-right:0;border-bottom:1px solid var(--line)}.nowcell:last-child{border-bottom:0}}
@media(max-width:700px){.wrap{width:min(100% - 24px,1220px)}.head{min-height:76px;grid-template-columns:auto auto}.brand img{width:195px;height:60px}.actions .secondary,.live{display:none}.heroContent{padding:28px}.hero h1{font-size:43px;letter-spacing:-2px}.hero p{font-size:16px}.item{grid-template-columns:58px 1fr}.item>:last-child{display:none}.footer{grid-template-columns:1fr}.footlinks{justify-content:flex-start}.dockCount{display:none}}