:root {
  --bg-base: #0a0a0a;
  --bg-surface: #141414;
  --bg-elevated: #1e1e1e;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --text: #f3f4f6;
  --muted: #9ca3af;
  --accent: #10b981;
  --accent-soft: rgba(16, 185, 129, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg-base); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 50% 0, #1a1a1a, var(--bg-base) 52%); font-family: "DM Sans", sans-serif; line-height: 1.6; }
button { font: inherit; cursor: pointer; }
.site-shell { max-width: 1100px; margin: auto; padding: 0 24px 70px; }
.topbar { position: sticky; top: 0; z-index: 10; width: 100vw; margin-left: calc(50% - 50vw); padding: 16px 24px; background: rgba(10, 10, 10, .78); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; color: var(--text); font: 700 1.25rem "Space Grotesk", sans-serif; text-decoration: none; letter-spacing: -.03em; }
.brand-icon { width: 30px; height: 30px; margin-right: 10px; object-fit: contain; border-radius: 6px; }
.brand-dot, .summary-title.is-today { color: var(--accent); }
.seo-intro { max-width: 640px; margin: 0 auto 48px; padding-top: 42px; text-align: center; }
.seo-intro h1 { margin: 0 0 16px; font: 700 2.5rem/1.1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.seo-intro p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.content-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: start; }
.section-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--muted); font: 700 .8rem "Space Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.section-kicker::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.content-head { display: flex; align-items: center; justify-content: space-between; }
.content-head .section-kicker { margin-bottom: 20px; }
.live-meta { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--accent); font-size: .75rem; letter-spacing: .08em; }
.live-meta.is-empty { color: var(--muted); }
.pulse, .channel-status { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 0%, 100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); } }
.status-message { padding: 30px 0; color: var(--muted); }.status-message:empty { display: none; }
.loading-state { display: flex; min-height: 260px; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: .9rem; }.loading-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .14); border-top-color: var(--accent); border-radius: 50%; animation: loading-spin .8s linear infinite; }@keyframes loading-spin { to { transform: rotate(360deg); } }
.channel-grid { max-height: 560px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; scrollbar-color: #4b5563 transparent; scrollbar-width: thin; }
.channel-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border); transition: border-color .15s, background .15s; }.channel-row:last-child { border-bottom: 0; }.channel-row:hover { background: rgba(255, 255, 255, .025); }.channel-row.is-playing { background: var(--bg-elevated); }
.play-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; background: transparent; transition: all .15s; }.play-toggle:hover, .channel-row.is-playing .play-toggle { color: var(--accent); border-color: rgba(16, 185, 129, .5); background: var(--accent-soft); }.play-toggle .icon-play { margin-left: 1px; }.play-toggle .icon-pause { display: none; }.channel-row.is-playing .play-toggle .icon-play { display: none; }.channel-row.is-playing .play-toggle .icon-pause { display: block; }
.channel-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }.channel-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }.channel-name { overflow: hidden; color: var(--text); font-size: .94rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }.channel-row.is-playing .channel-name { color: var(--accent); }.channel-meta { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { display: none; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }.channel-row.is-playing .live-dot { display: block; animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .65); } 65% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.volume-group { display: none; align-items: center; gap: 6px; flex-shrink: 0; }.channel-row.is-playing .volume-group { display: flex; }.volume-button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--muted); border: 0; border-radius: 3px; background: transparent; }.volume-button:hover { color: var(--text); }.volume-button .volume-off { display: none; }.channel-row.is-muted .volume-button .volume-on { display: none; }.channel-row.is-muted .volume-button .volume-off { display: block; }.volume-slider { width: 82px; height: 4px; appearance: none; border-radius: 99px; outline: none; background: linear-gradient(to right, var(--accent) 0 var(--volume-level, 100%), rgba(255, 255, 255, .16) var(--volume-level, 100%) 100%); cursor: pointer; }.volume-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: transparent; }.volume-slider::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; appearance: none; border: 2px solid var(--bg-surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(16, 185, 129, .5); }.volume-slider::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .16); }.volume-slider::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }.volume-slider::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid var(--bg-surface); border-radius: 50%; background: var(--accent); }.channel-row audio { display: none; }
.schedule { min-width: 0; }.schedule-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.schedule-heading .section-kicker { flex: 1; }.schedule-count { color: var(--muted); font-size: .8rem; }.schedule-days { display: grid; gap: 8px; }
.schedule-day { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; transition: border-color .2s, background .2s; }.schedule-day:hover { border-color: var(--border-strong); }.schedule-day[open] { background: var(--bg-elevated); border-color: rgba(16, 185, 129, .3); }
.schedule-day summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; cursor: pointer; list-style: none; }.schedule-day summary::-webkit-details-marker { display: none; }.summary-title { font-size: 1.05rem; font-weight: 600; text-transform: capitalize; }.schedule-day-count { color: var(--muted); font-size: .8rem; }
.schedule-day-events { max-height: 340px; overflow-y: auto; border-top: 1px solid var(--border); scrollbar-color: #4b5563 transparent; scrollbar-width: thin; }.schedule-event { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--border); }.schedule-event:last-child { border-bottom: 0; }.schedule-event > div { min-width: 0; }.schedule-event.is-active { background: var(--accent-soft); }.schedule-event.is-active time, .schedule-event.is-active .schedule-name { color: var(--accent); }.schedule-event time { min-width: 0; color: var(--muted); font: 500 .95rem "Space Grotesk", sans-serif; white-space: nowrap; }.schedule-name { display: block; min-width: 0; margin-bottom: 4px; font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; }.schedule-details { display: block; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.footer { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 22px; color: var(--muted); border-top: 1px solid var(--border); font-size: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 800px) { .content-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) { .site-shell { padding-inline: 16px; }.seo-intro { padding-top: 32px; margin-bottom: 34px; }.seo-intro h1 { font-size: 2.1rem; }.seo-intro p { font-size: .95rem; }.schedule-event { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding-inline: 14px; }.schedule-event time { font-size: .8rem; white-space: normal; }.schedule-day summary { padding-inline: 14px; }.volume-group { display: none !important; }.channel-row.is-playing .channel-info { padding-right: 20px; }.channel-row.is-playing .live-dot { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }.footer { font-size: .8rem; } }