*{box-sizing:border-box}
body{margin:0;font-family:system-ui,sans-serif;background:#0f1115;color:#e8e8e8;height:100vh;display:flex;flex-direction:column}
header{display:flex;gap:12px;align-items:center;padding:10px 16px;background:#181b22;flex-wrap:wrap}
h1{margin:0;font-size:1.2rem}
h1 small{color:#8a93a6;font-weight:400}
input,select{background:#0f1115;color:inherit;border:1px solid #2c313c;border-radius:6px;padding:8px}
input{flex:1;min-width:160px}
main{flex:1;display:flex;min-height:0}
#player{flex:1;display:flex;flex-direction:column;background:#000;min-width:0}
video{width:100%;flex:1;min-height:0;background:#000}
#status{padding:8px 12px;font-size:.9rem;color:#8a93a6}
#status.err{color:#ff7b7b}
#list{width:340px;overflow-y:auto;background:#12151b}
.ch{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;border-bottom:1px solid #1d212a}
.ch:hover{background:#1c212b}
.ch.active{background:#26324a}
.ch img{width:40px;height:40px;object-fit:contain;background:#fff1;border-radius:4px}
.ch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){main{flex-direction:column}#list{width:100%;height:45%}}
#summary{font-size:.85rem;color:#8a93a6}
header label{font-size:.85rem;display:flex;gap:6px;align-items:center}
header label input{flex:none;min-width:0}
.ch{position:relative}
.ch::after{content:"";position:absolute;right:12px;width:10px;height:10px;border-radius:50%;background:#555}
.ch.up::after{background:#3ecf6e}
.ch.down::after{background:#e5484d}
.ch.down{opacity:.5}