:root{color-scheme:dark;--bg:#05080c;--panel:rgba(8,14,20,.98);--line:rgba(255,255,255,.12);--text:#f5f8fb;--muted:#aeb8c6;--accent:#27d9b1;font-family:Inter,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)}
button{font:inherit}
.app{position:relative;width:100vw;height:100vh;background:radial-gradient(circle at 70% 30%,#17202c 0,#090c12 38%,#05070a 100%);isolation:isolate}
.video,.ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.ambient{display:grid;place-items:center;z-index:-1}
.ambient-mark{font-weight:900;font-size:clamp(5rem,14vw,13rem);letter-spacing:-.09em;color:rgba(255,255,255,.055)}
.ambient-mark span{color:rgba(39,217,177,.14)}
.chrome{transition:opacity .25s}
.topbar{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:2.5rem 3rem;background:linear-gradient(rgba(0,0,0,.8),transparent)}
.brand{font-size:1.6rem;font-weight:800;letter-spacing:.05em}
.brand span,.brand i{font-style:normal;color:var(--accent)}
.clock{font-size:1.35rem;font-variant-numeric:tabular-nums}
.status{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;background:rgba(0,0,0,.28);padding:2rem}
.status[hidden]{display:none}
.status p{margin:0;color:var(--muted);font-size:clamp(1.2rem,2.2vw,2rem);max-width:50rem;white-space:pre-line;line-height:1.55}
.spinner{width:3.2rem;height:3.2rem;border:.35rem solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.status.fallback .spinner{display:none}
.channel-info{position:absolute;z-index:4;left:3rem;bottom:3.5rem;display:flex;align-items:center;gap:1.3rem;min-width:32rem;padding:1.35rem 1.6rem;border:1px solid var(--line);border-radius:1rem;background:linear-gradient(135deg,rgba(9,13,19,.96),rgba(18,26,36,.91));box-shadow:0 1rem 3rem rgba(0,0,0,.45);opacity:1;transition:.3s}
.channel-info.hidden{transform:translateY(1rem);opacity:0;pointer-events:none}
.channel-logo{width:7rem;height:7rem;border-radius:1rem;display:grid;place-items:center;text-align:center;padding:.7rem;background:#fff;color:#071018;font-size:1.1rem;line-height:1.05;font-weight:900}
.channel-number{font-size:1.2rem;color:var(--accent);font-weight:800;letter-spacing:.08em}
.channel-info h1{font-size:2.25rem;margin:.15rem 0 .25rem;line-height:1}
.channel-info p{margin:0;color:var(--muted)}
.guide{position:absolute;z-index:8;inset:0 auto 0 0;width:min(46rem,70vw);display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);box-shadow:1rem 0 4rem rgba(0,0,0,.5);transform:translateX(-102%);transition:transform .22s}
.guide.open{transform:translateX(0)}
.guide-head{display:flex;justify-content:space-between;align-items:end;padding:2rem 2.25rem 1.25rem;border-bottom:1px solid var(--line)}
.guide-head strong{font-size:2rem}
.guide-head span{display:block;color:var(--accent);font-size:.8rem;letter-spacing:.22em;margin-top:.3rem}
.guide-head small{color:var(--muted)}
.guide-list{overflow:auto;padding:1rem;scrollbar-width:none}
.guide-list::-webkit-scrollbar{display:none}
.guide-credit{padding:1rem 2.25rem 1.4rem;border-top:1px solid var(--line);color:#748392;font-size:.9rem}
.section-label{padding:1.4rem 1.25rem .7rem;color:var(--accent);font-size:.85rem;font-weight:800;letter-spacing:.16em}
.channel-row{width:100%;height:5.5rem;border:2px solid transparent;border-radius:.8rem;background:transparent;color:var(--text);display:grid;grid-template-columns:4rem 4.8rem 1fr auto;align-items:center;gap:1rem;text-align:left;padding:.45rem 1rem}
.channel-row .n{font-size:1.4rem;color:var(--muted)}
.mini-logo{width:4.4rem;height:3.5rem;border-radius:.55rem;display:grid;place-items:center;text-align:center;padding:.3rem;background:#fff;color:#071018;font-size:.65rem;line-height:1;font-weight:900}
.channel-row .name{font-size:1.35rem;font-weight:700}
.channel-row .kind{font-size:.72rem;color:var(--muted)}
.channel-row.selected{background:rgba(39,217,177,.11)}
.channel-row:focus{outline:none;border-color:#fff;background:var(--accent);color:#03110d;transform:scale(1.01)}
.channel-row:focus .n,.channel-row:focus .kind{color:#062218}
.number-entry{position:absolute;z-index:10;right:3rem;top:7rem;min-width:8rem;padding:.8rem 1.25rem;border:2px solid var(--accent);border-radius:.8rem;background:rgba(5,8,12,.94);font-size:3.4rem;line-height:1;font-weight:900;text-align:center}
.remote-hint{position:absolute;right:3rem;bottom:2rem;color:var(--muted);font-size:.95rem}
.app.idle .topbar,.app.idle .remote-hint{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.topbar{padding:1.3rem}.guide{width:86vw}.guide-head small,.remote-hint{display:none}.channel-info{left:1rem;bottom:1rem;min-width:0;right:1rem}.channel-logo{width:5.5rem;height:5.5rem}.channel-info h1{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}