:root{--bg:#03040A;--panel:#0d1020;--line:#1c2140;--tx:#e8ebf7;--mut:#8a90b0;--ac:#3b82f6;--ac2:#22d3ee}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{display:flex;flex-direction:column;min-height:100%;padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.brand{font-size:18px;font-weight:600;letter-spacing:.3px}
.brand b{color:var(--ac2)}
.hdr-right{display:flex;align-items:center;gap:12px}
.badge{font-size:11px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--mut);white-space:nowrap}
.link{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px}
main{flex:1;display:flex;flex-direction:column;min-height:0}
#stage{background:#000}
#vwrap{position:relative;width:100%;aspect-ratio:16/9;max-height:60vh;background:#000;margin:0 auto}
#v{width:100%;height:100%;display:block;background:#000}
#overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(0,0,0,.55);pointer-events:none;font-size:15px}
#overlay.show{display:flex}
#overlay.err{background:rgba(40,0,0,.78);pointer-events:auto}
#omsg{white-space:pre-line;font-size:14px}
#bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
#now{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.qlabel{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px}
select,button{font:inherit}
select{background:var(--bg);color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
#reload{background:var(--bg);color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
#list{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
#search{margin:10px 12px 6px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font:inherit}
#groups{display:flex;gap:6px;overflow-x:auto;padding:4px 12px 8px;scrollbar-width:none}
#groups::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--panel);color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff}
#chs{list-style:none;margin:0;padding:0 8px 16px;overflow-y:auto;flex:1}
#chs li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer}
#chs li:hover{background:var(--panel)}
#chs li.on{background:var(--panel);outline:1px solid var(--ac)}
#chs img{width:44px;height:44px;object-fit:contain;background:#fff1;border-radius:8px;flex-shrink:0}
#chs .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chs .dr{margin-left:auto;font-size:10px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:1px 6px;flex-shrink:0}
#gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;z-index:10}
#gate[hidden]{display:none}
#gform{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}
#gform h1{margin:0;font-size:26px}
#gform p{margin:0;color:var(--mut)}
#gform input{padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--tx);font:inherit}
#gform button{padding:12px;border-radius:10px;border:0;background:var(--ac);color:#fff;font:inherit;font-weight:600;cursor:pointer}
#gerr{color:#f87171;min-height:1em}
@media (min-width:900px){
  main{flex-direction:row}
  #stage{flex:1;display:flex;flex-direction:column;min-width:0}
  #vwrap{max-height:none;height:auto;flex:0 0 auto}
  #list{flex:0 0 360px;border-left:1px solid var(--line)}
}