:root {
  color-scheme: light;
  --bg: #f3f7fc; --surface:#fff; --surface-alt:#f0f6fd; --text:#0c2947;
  --muted:#64778a; --brand:#2f76ba; --brand-dark:#195a9a; --border:#d9e5f2;
  --pill:#e5f0fb; --shadow: 0 18px 46px rgba(26, 68, 113, .085);
  --success:#159977; --danger:#da4f56; --visual:#cde7ff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#061625; --surface:#0d263d; --surface-alt:#102e49; --text:#f2f7ff;
  --muted:#b2c4d6; --brand:#409af0; --brand-dark:#257bcf; --border:#214363;
  --pill:#183d60; --shadow: 0 18px 50px rgba(0,0,0,.22);
  --success:#42d1a1; --danger:#ff787f; --visual:#165d96;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); margin:0; font-family:Inter, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
button:focus-visible, a:focus-visible,input:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
a { color:inherit; }
.site-shell { min-height:100vh; max-width:1160px; margin:0 auto; padding:0 28px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0 28px; }
.brand { display:flex; align-items:center; min-width:0; }
.brand img { width:min(282px,100%); height:auto; display:block; }
:root[data-theme="dark"] .brand img { filter:brightness(0) invert(1); }
.header-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.icon-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:25px; }
.install-button { border:0; color:#fff; background:var(--brand-dark); border-radius:12px; min-height:44px; padding:0 17px; font-weight:680; display:flex; align-items:center; gap:7px; }
.main-grid { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(270px, 1fr); align-items:start; gap:24px; }
.player-card,.info-card { background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:24px; }
.player-card { padding:36px; min-width:0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:6px; background:var(--surface-alt); border-radius:15px; margin-bottom:30px; }
.mode-tab { background:transparent; color:var(--text); border:0; border-radius:11px; padding:15px 8px; font-size:15px; font-weight:750; white-space:nowrap; }
.mode-tab span { font-size:20px; vertical-align:-1px; margin-right:7px; }
.mode-tab.selected { color:#fff; background:linear-gradient(125deg,#297fda,#2263a9); box-shadow:0 4px 12px rgba(18,91,169,.18); }
.status-line { display:flex; align-items:center; justify-content:center; gap:8px; font-weight:650; font-size:14px; color:var(--muted); }
.status-dot { background:#a7b9c9; height:8px; width:8px; border-radius:50%; }
.status-dot.live { background:var(--success); box-shadow:0 0 0 4px rgba(16,160,116,.12); }
.audio-visual { display:flex; align-items:center; justify-content:center; gap:18px; min-height:205px; }
.primary-play { appearance:none; width:134px; height:134px; border:8px solid var(--visual); border-radius:50%; color:#fff; background:linear-gradient(145deg,#449ff1,#1767b5); box-shadow:0 10px 26px rgba(31,103,176,.28),inset 0 0 0 1px rgba(255,255,255,.18); font-size:46px; display:grid; place-items:center; flex-shrink:0; transition:transform .16s; }
.primary-play:hover { transform:scale(1.035); }
.primary-play span { transform:translateX(3px); }
.primary-play.is-playing span { transform:none; }
.wave { display:flex; align-items:center; gap:4px; height:70px; opacity:.65; }
.wave i { width:4px; height:var(--h); border-radius:6px; background:var(--brand); transform-origin:center; }
.wave i:nth-child(1) { --h:17px; } .wave i:nth-child(2) { --h:34px; } .wave i:nth-child(3) { --h:55px; } .wave i:nth-child(4) { --h:31px; } .wave i:nth-child(5) { --h:21px; }
:root.is-playing .wave i { animation:wave .86s ease-in-out infinite alternate; }
:root.is-playing .wave i:nth-child(2) {animation-delay:-.24s} :root.is-playing .wave i:nth-child(3) {animation-delay:-.4s} :root.is-playing .wave i:nth-child(4) {animation-delay:-.62s}
@keyframes wave { from {transform:scaleY(.55)} to {transform:scaleY(1.16)} }
.player-instruction { text-align:center; font-size:14px; margin:-7px 0 26px; color:var(--muted); }
.volume-control { display:flex; align-items:center; gap:13px; margin:0 auto 24px; max-width:390px; font-size:13px; color:var(--muted); }
.volume-control label { min-width:61px; }
.volume-control input { flex:1; min-width:0; accent-color:var(--brand); cursor:pointer; }
.volume-control span { min-width:36px; font-variant-numeric:tabular-nums; text-align:right; }
.video-stage { margin:0 0 20px; }
.video-frame { aspect-ratio:16/9; background:#06101c; border-radius:16px; overflow:hidden; position:relative; isolation:isolate; }
.video-frame video { width:100%;height:100%; display:block;object-fit:contain;background:#000;position:relative;z-index:1; }
.video-fullscreen { position:absolute; top:12px; right:12px; z-index:3; display:flex; gap:7px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:9px; background:rgba(4,20,36,.78); color:#fff; padding:9px 10px; font-weight:680; font-size:12px; line-height:1.2; backdrop-filter:blur(6px); }
.video-fullscreen:hover {background:rgba(21,81,140,.95)}
.video-fullscreen svg {flex:none}
.video-frame:fullscreen, .video-frame:-webkit-full-screen { border-radius:0; width:100%; height:100%; aspect-ratio:auto; }
.video-frame:fullscreen video, .video-frame:-webkit-full-screen video { width:100%;height:100%;object-fit:contain; }
.video-placeholder { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#d3e6f8; pointer-events:none; background:radial-gradient(circle at center,#173e5f,#06101c); text-align:center; }
.camera-symbol { font-size:56px; opacity:.7; line-height:1.1; }
.video-placeholder span {font-size:13px;opacity:.8}
.video-play-button,.retry-button,.button-solid { width:100%; border:0; border-radius:12px; padding:14px; font-weight:760; color:#fff; background:linear-gradient(115deg,#308ada,#2165aa); margin-top:14px; }
.video-note { text-align:center; color:var(--muted); font-size:12px; margin:13px 0 0; }
.connection-state { display:flex; align-items:center; gap:13px; padding:16px 17px; border-radius:15px; background:var(--surface-alt); border:1px solid var(--border); }
.connection-icon { font-size:28px; color:var(--brand); line-height:1; }
.connection-state div { flex:1; min-width:0; }
.connection-state strong { display:block; font-size:14px; }
.connection-state p { font-size:12px; color:var(--muted); margin:2px 0 0; overflow-wrap:anywhere; }
.retry-button { background:transparent; color:var(--brand); border:1px solid var(--border); margin-top:8px; }
.side-panel { display:grid; gap:18px; }
.info-card { padding:26px; }
.card-heading { display:flex; justify-content:space-between; gap:6px; align-items:center; margin-bottom:18px; }
.card-heading h2 { font-size:19px; margin:0; }
.card-heading span {font-size:10px;color:var(--muted); white-space:nowrap;}
.program-item { display:grid; grid-template-columns:70px 1fr; align-items:baseline; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); }
.program-item.next {border-bottom:0}
.program-tag {font-size:10px;color:var(--brand);font-weight:800;letter-spacing:.06em}
.program-item strong {font-size:14px;line-height:1.25;display:block}
.program-item div span {display:block;margin-top:5px;color:var(--muted);font-size:12px}
.schedule-card small { display:block;color:var(--muted);font-size:11px;margin-top:12px; }
.social-links { display:grid;gap:10px; }
.social-link { text-decoration:none; display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-alt);transition:border-color .15s,transform .15s; }
.social-link:hover { border-color:var(--brand); transform:translateY(-1px); }
.social-icon { flex:0 0 42px;height:42px;display:grid;place-items:center;background:var(--pill);color:var(--brand);border-radius:12px; }
.social-copy {display:grid;gap:2px;flex:1;min-width:0}
.social-copy strong {font-size:14px;color:var(--text)}
.social-copy small {font-size:12px;color:var(--muted);line-height:1.3}
.social-arrow {font-size:20px;color:var(--brand);margin-left:auto;align-self:center}

.small-print { text-align:center; color:var(--muted); font-size:12px;padding:8px; }
.footer {border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;padding:21px 4px;margin:28px 0 0;font-size:12px;color:var(--muted)}
.update-dialog { max-width:min(430px,calc(100% - 32px)); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:22px; padding:0; box-shadow:0 25px 75px rgba(0,0,0,.28); }
.update-dialog::backdrop {background:rgba(4,17,31,.62)}
.dialog-content { padding:31px;text-align:center; }
.dialog-content h2 {font-size:22px;line-height:1.2;margin:12px 0}
.dialog-content p {color:var(--muted);font-size:14px;margin:0 0 23px}
.update-symbol {background:var(--pill);color:var(--brand);display:grid;place-items:center;border-radius:100%;width:58px;height:58px;font-size:34px;margin:0 auto}
.dialog-actions {display:grid;gap:9px}
.dialog-actions button { min-height:45px; margin:0; }
.button-outline {background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;font-weight:700}
@media (max-width:880px) { .main-grid {grid-template-columns:minmax(0,1fr)} .side-panel {grid-template-columns:1fr 1fr;align-items:start} .small-print {grid-column:1/-1} }
@media (max-width:620px) {
 .site-shell {padding:0 15px} .header {padding:15px 0 22px;gap:12px} .brand img {width:min(200px,100%)}
 .icon-button {width:40px;height:40px}.install-button {min-height:40px;padding:0 10px;font-size:12px}
 .player-card {padding:23px 18px;border-radius:20px}
 .mode-tab {font-size:13px; padding:13px 5px}.mode-tab span{font-size:17px;margin-right:4px}
 .mode-tabs {margin-bottom:23px} .primary-play {width:120px;height:120px;font-size:42px}.wave{gap:3px}.wave i{width:3px}
 .audio-visual {gap:12px;min-height:188px}.volume-control {gap:8px}
 .video-fullscreen span {display:none} .video-fullscreen {padding:9px} .side-panel {grid-template-columns:1fr;gap:13px}.info-card{padding:22px;border-radius:20px}
 .footer{margin-top:20px;flex-direction:column;gap:3px}.small-print{padding:3px}
}
@media (max-width:360px) { .brand img{width:150px}.mode-tab {font-size:11px}.wave{display:none}.header-actions{gap:5px}.install-button{font-size:11px;padding:0 8px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {animation:none!important; transition:none!important;scroll-behavior:auto!important} }