:root{
  --bg:#09090b;
  --panel:#121216;
  --panel-2:#17171d;
  --text:#f5f5f5;
  --muted:#9b9ba7;
  --line:#2a2a31;
  --accent:#e8e8ea;
  --live:#d93b3b;
  --shadow:0 16px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at top,#18181e 0,#09090b 42%,#050506 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
button{font:inherit}
.app-shell{max-width:1080px;margin:0 auto;padding:20px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;padding:10px 2px 14px}
.brand-lockup{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.brand-logo{width:108px;height:108px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 32px rgba(0,0,0,.32);flex:0 0 auto}
.brand-copy{min-width:0}
.brand{font-weight:900;letter-spacing:.12em;font-size:clamp(1.6rem,2.9vw,2.2rem);line-height:.95}
.tagline{color:#d0d0d8;margin-top:8px;font-size:clamp(1rem,1.65vw,1.35rem);font-weight:520;line-height:1.15}
.live-pill{background:var(--live);color:white;border-radius:999px;padding:10px 15px;font-size:.9rem;font-weight:900;letter-spacing:.14em;align-self:flex-start;margin-top:10px}
.card{background:linear-gradient(180deg,rgba(24,24,29,.97),rgba(14,14,18,.98));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.hero{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:34px;padding:28px}
.cover-wrap{aspect-ratio:1;border-radius:20px;overflow:hidden;background:#0c0c0f;border:1px solid var(--line)}
.cover{width:100%;height:100%;object-fit:cover;display:block}
.now{display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:800;color:var(--muted);margin-bottom:10px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(2rem,5vw,4.5rem);line-height:.98;margin-bottom:10px;overflow-wrap:anywhere}
.now>p{font-size:1.25rem;color:#d0d0d6;margin-bottom:22px}
.program-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.program-row strong{font-size:1rem}
.progress-bar{height:6px;background:#2a2a31;border-radius:999px;overflow:hidden}
.progress-bar span{display:block;width:0;height:100%;background:var(--accent);transition:width .8s linear}
.time-row{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-top:7px}
.player-row{display:flex;align-items:center;gap:14px;margin-top:28px}
.play-btn{width:58px;height:58px;border-radius:50%;border:1px solid #4a4a52;background:white;color:#0b0b0d;font-weight:900;font-size:1.2rem;cursor:pointer}
.play-btn:active{transform:scale(.98)}
.stream-label{font-weight:800;letter-spacing:.08em;font-size:.86rem}
.stream-sub{color:var(--muted);font-size:.83rem;margin-top:3px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.info-card{padding:24px}
.info-card h2{font-size:1.5rem;margin-bottom:6px}
.info-card p{color:var(--muted);margin-bottom:0}
.schedule-list{display:flex;flex-direction:column;gap:12px}
.schedule-item{display:flex;gap:14px;align-items:flex-start;padding:8px 10px;border-radius:12px;transition:background .2s ease,border-color .2s ease;border:1px solid transparent}
.schedule-time{width:92px;color:var(--muted);font-variant-numeric:tabular-nums}
.schedule-name{font-weight:750}
.schedule-item.is-current{background:rgba(255,255,255,.085);border-color:#4a4a55;position:relative}
.schedule-item.is-current::before{content:"";width:4px;align-self:stretch;border-radius:999px;background:#f3f3f4;margin-right:4px}
.schedule-item.is-current .schedule-name::after{content:"NOW";display:inline-block;margin-left:10px;padding:3px 7px;border-radius:999px;font-size:.58rem;letter-spacing:.12em;background:#f3f3f4;color:#0b0b0d;vertical-align:middle}
.schedule-item.is-current .schedule-time{color:#e9e9ec}
.schedule-item.is-current .schedule-name{color:#fff}
.about{padding:24px;margin-top:18px}
.about p{font-size:1.2rem;margin:0;line-height:1.5}
footer{padding:18px 4px 6px;color:var(--muted);font-size:.78rem;text-align:center}
.offline{opacity:.65}

@media (max-width:760px){
  .app-shell{padding:14px}
  .topbar{align-items:flex-start;gap:18px;padding-bottom:18px}
  .brand-logo{width:90px;height:90px;border-radius:16px}
  .brand{font-size:clamp(1.25rem,6vw,1.9rem)}
  .tagline{font-size:clamp(.92rem,3.2vw,1.12rem)}
  .live-pill{margin-top:6px;padding:9px 13px;font-size:.82rem}
  .hero{grid-template-columns:1fr;padding:18px;gap:22px}
  .cover-wrap{max-width:520px;width:100%;margin:0 auto}
  .grid{grid-template-columns:1fr}
  h1{font-size:clamp(2rem,12vw,3.5rem)}
}

@media (max-width:520px){
  .app-shell{padding:12px}
  .topbar{gap:12px}
  .brand-lockup{gap:12px}
  .brand-logo{width:72px;height:72px;border-radius:14px}
  .brand{font-size:1.15rem;letter-spacing:.09em}
  .tagline{font-size:.88rem;margin-top:5px}
  .live-pill{padding:8px 11px;font-size:.76rem;margin-top:4px}
}