:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#05070b;color:#f2f5fa;font:16px 'Microsoft YaHei',system-ui;overflow:hidden}#video{position:fixed;inset:0;width:100vw;height:100vh;background:#030405;object-fit:contain}header{position:fixed;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:18px;padding:16px 25px;background:linear-gradient(#000d,transparent)}header strong{font-size:24px;font-weight:600;letter-spacing:3px}header span{color:#a9b8ca;font-size:13px}#now{flex:1;text-align:right;color:white}button{font:inherit;cursor:pointer;color:inherit;background:#ffffff15;border:0;border-radius:5px;padding:9px 12px}button:hover{background:#ffffff2c}main{position:fixed;top:88px;bottom:135px;left:24px;display:flex;z-index:2;box-shadow:0 15px 65px #0007;border-radius:8px;overflow:hidden}nav{width:160px;padding:12px 0;overflow:auto;background:#101820df;border-right:1px solid #ffffff16}nav button{width:100%;border-radius:0;text-align:left;padding:14px 20px;color:#b8c3d0;letter-spacing:1px}nav button.active{color:white;background:#258de5}aside{display:flex;flex-direction:column;background:#101820d9;width:300px;padding:15px 12px}input,select{padding:9px;border:1px solid #ffffff21;border-radius:4px;background:#0003;color:inherit;font:inherit}aside>input,select{width:100%;margin-bottom:8px}select{font-size:13px}label{font-size:12px;color:#a9b8ca;margin:5px 0 12px}#list{overflow:auto;flex:1}.channel{width:100%;display:flex;align-items:center;text-align:left;gap:12px;padding:12px 10px;margin:2px 0;background:transparent;white-space:nowrap}.channel span{flex:1;overflow:hidden;text-overflow:ellipsis}.channel small{font-size:11px;color:#8799ad}.channel.active{background:#208ce8;color:white}.channel.active small{color:#d2eaff}footer{position:fixed;left:25px;right:25px;bottom:55px;z-index:2;display:flex;align-items:center;gap:16px;background:#080d13ba;border:1px solid #ffffff13;border-radius:7px;padding:12px 18px}h1{font-size:17px;margin:0}footer p{font-size:13px;color:#bcc9d7;flex:1;margin:0} .playback-controls{display:flex;align-items:center;gap:6px}.playback-controls button{font-size:13px}.playback-controls input{width:90px}.hide-menu main{display:none}dialog{border:1px solid #435671;border-radius:12px;max-width:480px;padding:28px;z-index:5}dialog::backdrop{background:#000b}dialog input{width:100%;margin:10px 0}dialog button{background:#245bbe}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#536474;border-radius:5px}@media(max-width:700px){main{left:10px;right:10px;top:72px;bottom:140px}nav{width:125px}aside{width:calc(100vw - 145px)}header{padding:12px;gap:7px}header strong{font-size:18px}header span{display:none}header button{font-size:12px}footer{left:10px;right:10px;gap:8px;padding:10px;flex-wrap:wrap}footer h1{font-size:14px}footer p{font-size:12px}}
dialog:not([open]){display:none}dialog[open]{position:fixed;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);background:#101820;z-index:10}

/* Keep touch controls visible when the channel menu is hidden. */
#video{touch-action:manipulation;cursor:pointer}
footer{flex-wrap:wrap;bottom:14px}
.playback-controls{display:flex;flex-wrap:wrap;align-items:center}
.playback-controls>*{margin:3px}
.playback-controls input{padding:0;width:80px}
@media(max-width:700px){footer{bottom:8px}footer p{flex-basis:100%}.playback-controls{width:100%}.playback-controls button{padding:8px}.playback-controls input{width:60px}main{bottom:185px}}