:root{--bg: #0e1116;--panel: #171b22;--line: #262c36;--text: #e6e9ee;--muted: #8b94a3;--accent: #4f9cff;--on-accent: #06101f;--warn: #ffb454;color-scheme:dark}*{box-sizing:border-box}html{font-size:15px;height:100%}html.tv{font-size:1.5625vw}body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:0;border-radius:.5rem;background:var(--accent);color:var(--on-accent);padding:.65rem .9rem;font-weight:600}button.ghost{background:transparent;color:var(--muted);font-weight:500;padding:.4rem .65rem}button.ghost:hover{color:var(--text)}button.ghost.danger:hover{color:var(--warn)}input,select{display:block;width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg)}:focus{outline:2px solid var(--accent);outline-offset:1px}:focus:not(:focus-visible){outline:none}input:focus,select:focus{outline:2px solid var(--accent)}.error{color:var(--warn);margin:0}.notice{color:#7bd88f;margin:0}.empty{color:var(--muted);margin:0;padding:.5rem .25rem}.hint{color:var(--muted);margin:0;font-size:.8rem;text-align:center}.login{width:21rem;max-width:92%;margin:18vh auto 0;padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:.75rem}.login h1{margin:0 0 1rem;font-size:1.3rem}.login>*+*{margin-top:.75rem}.login button{display:block;width:100%}.app{height:100%;display:flex;flex-direction:column}header{display:flex;align-items:center;flex:none;padding:.5rem 1rem;border-bottom:1px solid var(--line)}header>*+*{margin-left:.75rem}header .now{flex:1;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main{flex:1;min-height:0;display:flex;position:relative}.player{flex:1;min-width:0;position:relative;background:#000}.player video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;outline:none}.player-msg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:.65rem 1rem;border-radius:.5rem;background:rgba(0,0,0,.7);color:var(--muted);text-align:center;pointer-events:none}.player-msg.error{color:var(--warn)}aside{flex:none;width:24rem;display:flex;flex-direction:column;padding:.75rem;min-height:0;background:var(--panel);border-left:1px solid var(--line)}aside>*{flex:none}aside>*+*{margin-top:.5rem}.channels{list-style:none;margin-bottom:0;padding:0;flex:1 1 0;min-height:0;overflow-y:auto}.channels li{display:flex;align-items:center;border-radius:.5rem}.channels li:hover{background:var(--line)}.channels li.active{background:#1d2a40}.channel{flex:1;min-width:0;display:flex;align-items:center;padding:.5rem;background:none;color:var(--text);font-weight:500;text-align:left}.channel img,.nologo{width:2.7rem;height:1.9rem;flex:none;margin-right:.65rem;object-fit:contain;border-radius:.25rem;background:var(--bg)}.channel .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.posters .channel img,.posters .nologo{width:2.7rem;height:4rem;object-fit:cover}.posters .channel .name{white-space:normal}.sections{display:flex}.sections button{flex:1;border:1px solid var(--line);border-radius:0}.sections button+button{border-left:0}.sections button:first-child{border-radius:.5rem 0 0 .5rem}.sections button:last-child{border-radius:0 .5rem .5rem 0}.sections button.on{background:#1d2a40;color:var(--text);font-weight:600}.series-title{display:block;padding:0 .25rem}.progress{position:absolute;left:4vw;right:4vw;bottom:2.5vh;pointer-events:none}.progress .bar{height:.3rem;border-radius:.15rem;background:rgba(255,255,255,.25);overflow:hidden}.progress .bar div{height:100%;background:var(--accent)}.progress span{display:block;margin-top:.3rem;color:var(--text);font-size:.85rem;text-shadow:0 0 .3rem #000}.fav{flex:none;background:none;color:var(--line);padding:.5rem .65rem;font-size:1.2rem}.channels li:hover .fav{color:var(--muted)}.fav.on,.channels li:hover .fav.on{color:#ffd166}.more{background:var(--line);color:var(--text)}dialog.users{width:34rem;max-width:94%;padding:1.25rem;border:1px solid var(--line);border-radius:.75rem;background:var(--panel);color:var(--text)}dialog.users::backdrop{background:rgba(0,0,0,.6)}dialog.users h2{margin:0 0 .75rem;font-size:1.2rem}dialog.users ul{list-style:none;margin:0 0 1rem;padding:0;max-height:40vh;overflow-y:auto}dialog.users li{display:flex;align-items:center;padding:.25rem 0;border-bottom:1px solid var(--line)}dialog.users li .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}dialog.users form{margin-bottom:.75rem}dialog.users form>*+*{margin-top:.5rem}dialog.users form button{display:block;width:100%}dialog.users .close{display:block;margin:.75rem 0 0 auto}@media (max-width: 800px){html:not(.tv) main{flex-direction:column}html:not(.tv) .player{flex:none;height:56.25vw}html:not(.tv) aside{width:auto;flex:1 1 0;border-left:0;border-top:1px solid var(--line)}html:not(.tv) header strong{display:none}}html.tv .app{padding:2vh 2.5vw}html.tv .app.watching{padding:0}html.tv :focus,html.tv :focus:not(:focus-visible){outline:.2rem solid var(--accent);outline-offset:0}html.tv .channel:focus,html.tv .fav:focus,html.tv button.ghost:focus,html.tv .sections button.on:focus,html.tv .more:focus{outline:none;background:var(--accent);color:var(--on-accent)}html.tv .fav.on:focus{color:#7a4b00}html.tv .channels li:hover{background:none}html.tv .channels li.active:hover{background:#1d2a40}.app.watching header,.app.watching aside{display:none}.osd{position:absolute;left:4vw;bottom:6vh;max-width:80%;padding:.8rem 1.2rem;border-radius:.6rem;background:rgba(0,0,0,.75);pointer-events:none;animation:osd 5s forwards}.osd strong{display:block;font-size:1.5rem}.osd span{color:var(--muted);font-size:.85rem}@keyframes osd{0%,80%{opacity:1}to{opacity:0}}
