:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,sans-serif;background:#09090b;color:#fafafa}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 80% -10%,#203f39 0,#111315 34%,#09090b 70%)}
button,input,select{font:inherit}
button{cursor:pointer}
header{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px 30px;border-bottom:1px solid #27272a;background:#09090bea;backdrop-filter:blur(16px)}
header div{text-align:center}
header small,.player-head small{color:#5ee3b6;font-weight:900;letter-spacing:.13em}
header h1{margin:2px 0;font-size:clamp(27px,3vw,42px)}
header>span{justify-self:end;color:#75e8bd;font-weight:750}
button,#groups button{min-height:50px;padding:0 18px;border:1px solid #3f3f46;border-radius:10px;background:#222326;color:#fff;font-weight:750}
#back{justify-self:start}
main{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(560px,1.45fr);gap:24px;max-width:1720px;margin:auto;padding:26px 30px 60px}
.catalog,#player-panel{min-height:430px;padding:22px;border:1px solid #2d3033;border-radius:18px;background:#111214e0}
.tools{display:grid;grid-template-columns:1fr auto;gap:10px}
.tools input{min-height:54px;padding:0 18px;border:1px solid #3f3f46;border-radius:11px;background:#18181b;color:#fff;font-size:17px}
#groups{display:flex;gap:8px;overflow-x:auto;padding:16px 0 8px}
#groups button{flex:0 0 auto;min-height:42px}
#groups button.active{border-color:#3ca67f;background:#175642}
#status,#play-status{color:#a1a1aa}
#channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.channel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:74px;padding:12px;border:1px solid #303236;border-radius:12px;background:#191a1d;color:#fff;text-align:left}
.channel:hover{border-color:#5ee3b6}
.channel strong,.channel small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel small{margin-top:5px;color:#929298}
.star{color:#facc15;font-size:21px}
.empty{grid-column:1/-1;padding:60px 24px;border:1px dashed #3f3f46;border-radius:14px;text-align:center;color:#a1a1aa}
.empty strong{display:block;margin-bottom:10px;color:#fff;font-size:22px}
#player-panel{position:sticky;top:112px;height:fit-content}
#player-panel[hidden]{display:none}
.player-head{display:flex;justify-content:space-between;align-items:center}
.player-head h2{margin:4px 0 16px;font-size:clamp(25px,3vw,40px)}
video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.player-tools{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
#play-toggle{min-width:138px;border-color:#3ca67f;background:#175642}
#play-toggle:disabled{cursor:wait;opacity:.65}
.player-tools label{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 14px;border:1px solid #3f3f46;border-radius:10px}
.player-tools select{border:0;background:transparent;color:#fff;font-weight:750}
@media(max-width:1000px){main{grid-template-columns:1fr}#player-panel{position:static;order:-1}}
@media(max-width:650px){header{padding:12px;grid-template-columns:auto 1fr}header div{text-align:right}header>span{display:none}main{padding:14px}.tools{grid-template-columns:1fr}#channels{grid-template-columns:1fr}.player-tools>*{flex:1 1 auto}}