:root{--bg:#f6f6f9;--bg-elev:#fff;--bg-inset:#eceaf1;--border:#e0dee6;--text:#5f5b6b;--text-h:#0e0c14;--accent:#8b3dff;--accent-strong:#772ce8;--accent-soft:#8b3dff1f;--danger:#d93636;--live:#eb0400;--shadow:0 8px 24px #0e0c141f;--mark-shadow:#2c2318;--sans:system-ui, "Segoe UI", Roboto, sans-serif;font:16px/145% var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0e0e13;--bg-elev:#17171e;--bg-inset:#21212b;--border:#2a2a36;--text:#a3a1ad;--text-h:#f2f1f5;--accent:#a970ff;--accent-strong:#9147ff;--accent-soft:#a970ff29;--danger:#ff5c5c;--live:#eb0400;--shadow:0 8px 24px #00000073;--mark-shadow:#a99a82}}:root[data-theme=light]{--bg:#f6f6f9;--bg-elev:#fff;--bg-inset:#eceaf1;--border:#e0dee6;--text:#5f5b6b;--text-h:#0e0c14;--accent:#8b3dff;--accent-strong:#772ce8;--accent-soft:#8b3dff1f;--danger:#d93636;--live:#eb0400;--shadow:0 8px 24px #0e0c141f;--mark-shadow:#2c2318}:root[data-theme=dark]{--bg:#0e0e13;--bg-elev:#17171e;--bg-inset:#21212b;--border:#2a2a36;--text:#a3a1ad;--text-h:#f2f1f5;--accent:#a970ff;--accent-strong:#9147ff;--accent-soft:#a970ff29;--danger:#ff5c5c;--live:#eb0400;--shadow:0 8px 24px #00000073;--mark-shadow:#a99a82}*{box-sizing:border-box}body{margin:0}#root{flex-direction:column;height:100svh;display:flex;overflow:hidden}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:8px}::-webkit-scrollbar-thumb:hover{background-color:var(--text)}::-webkit-scrollbar-button{width:0;height:0;display:none}::-webkit-scrollbar-corner{background:0 0}.logo-mark{flex-shrink:0}button{font:inherit;cursor:pointer}button:disabled{cursor:default}input{font:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn{color:var(--text-h);background:var(--bg-inset);border:1px solid #0000;border-radius:8px;align-items:center;gap:7px;padding:7px 14px;font-size:14px;font-weight:600;transition:background-color .15s,border-color .15s,color .15s,filter .15s;display:inline-flex}.btn:hover{filter:brightness(1.08)}.btn-primary{background:var(--accent-strong);color:#fff}.btn-primary:disabled{opacity:.5;filter:none}.btn-twitch{color:#fff;background:#772ce8}.btn-ghost{border-color:var(--border);color:var(--text);background:0 0}.btn-ghost:hover{background:var(--bg-inset);color:var(--text-h);filter:none}.btn-ghost:disabled{opacity:.5;filter:none}.btn-ghost:disabled:hover{background:0 0}.btn-quiet{border-color:var(--border);color:var(--accent);background:0 0}.btn-quiet:hover{background:var(--accent-soft);border-color:var(--accent);filter:none}.btn-quiet:disabled{opacity:.5;filter:none}.app-shell{flex-direction:column;flex:1;min-height:0;display:flex}.app-topbar{background:var(--bg-elev);border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:10px 16px;transition:padding .15s;display:flex}.app-topbar.collapsed{gap:8px;padding-top:4px;padding-bottom:4px}.app-topbar.collapsed .brand-name{display:none}.topbar-toggle{width:26px;height:26px;color:var(--text);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex}.topbar-toggle svg{transition:transform .15s}.topbar-toggle:hover{background:var(--bg-inset);color:var(--text-h)}.brand{color:var(--text-h);align-items:center;gap:10px;display:flex}.brand-name{letter-spacing:-.01em;font-size:17px;font-weight:700}.topbar-controls{align-items:center;gap:12px;min-width:0;display:flex}.auth-bar{align-items:center;gap:10px;margin-left:auto;display:flex}.auth-avatar{border-radius:50%}.auth-name{color:var(--text-h);font-size:14px;font-weight:600}.account-trigger{padding-left:6px}.account-panel{width:200px;padding:6px}.menu-item{width:100%;color:var(--text);text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s;display:flex}.menu-item:hover{background:var(--bg-inset);color:var(--text-h)}.menu-item-external{opacity:.6;margin-left:auto}.menu-divider{background:var(--border);height:1px;margin:6px 4px}.menu-item-danger:hover{color:var(--danger);background:#d936361f}.add-channel-form{align-items:center;gap:8px;display:flex}.add-channel-form input{border:1px solid var(--border);background:var(--bg-inset);width:220px;color:var(--text-h);border-radius:8px;padding:7px 12px;font-size:14px;transition:border-color .15s,background-color .15s}.add-channel-form input::placeholder{color:var(--text)}.add-channel-form input:focus{border-color:var(--accent);outline:none}.add-channel-form input:disabled{opacity:.5;cursor:default}.segmented{background:var(--bg-inset);border-radius:9px;gap:2px;padding:3px;display:inline-flex}.segmented button{color:var(--text);background:0 0;border:none;border-radius:7px;padding:5px 14px;font-size:13px;font-weight:600;transition:background-color .15s,color .15s}.segmented button:hover{color:var(--text-h)}.segmented button.active{background:var(--bg-elev);color:var(--accent);box-shadow:0 1px 3px #00000040}.app-main{flex:1;min-height:0;display:flex}.stage{flex-direction:column;flex:1;min-width:0;display:flex}.empty-state{color:var(--text);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;display:flex}.empty-state-mark{opacity:.7;color:var(--text);margin-bottom:8px}.empty-state-title{color:var(--text-h);margin:0;font-size:18px;font-weight:700}.empty-state p{margin:0}.video-grid{flex:1;min-height:0;padding:12px}.video-grid-symmetric{grid-auto-rows:1fr;gap:12px;display:grid}.video-grid-symmetric.count-2{grid-template-columns:repeat(2,1fr)}.video-grid-symmetric.count-3{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.video-grid-symmetric.count-3 .video-panel:nth-child(3){grid-column:1/-1}.video-grid-symmetric.count-4{grid-template-columns:repeat(2,1fr)}.video-grid-symmetric.count-5{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(6,1fr)}.video-grid-symmetric.count-5 .video-panel:first-child{grid-column:1/span 3}.video-grid-symmetric.count-5 .video-panel:nth-child(2){grid-column:4/span 3}.video-grid-symmetric.count-5 .video-panel:nth-child(3){grid-column:1/span 2}.video-grid-symmetric.count-5 .video-panel:nth-child(4){grid-column:3/span 2}.video-grid-symmetric.count-5 .video-panel:nth-child(5){grid-column:5/span 2}.video-grid-symmetric.count-6{grid-template-columns:repeat(3,1fr)}.video-grid-focus{grid-template-columns:3fr 1fr;gap:12px;height:100%;display:grid}.video-grid-focus .video-panel:not(.focused){min-height:160px}.video-panel{border:1px solid var(--border);background:#000;border-radius:10px;flex-direction:column;height:100%;transition:border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.video-panel.focused{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), var(--shadow)}.video-panel-embed{flex:1;min-height:0}.video-panel-overlay{color:#cac8d2;background:#08080cd1;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:14px;animation:.25s fade-in;display:flex;position:absolute;inset:0 0 40px}.video-panel-overlay-name{color:#fff;font-size:16px;font-weight:700}.video-panel-bar{background:var(--bg-elev);border-top:1px solid var(--border);align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:flex}.live-dot{background:var(--live);border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 6px 1px #eb04008c}.video-panel-name{color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.panel-btn{color:var(--text);background:0 0;border:none;border-radius:6px;align-items:center;gap:5px;padding:4px 8px;font-size:13px;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s;display:inline-flex}.panel-btn:hover{background:var(--bg-inset);color:var(--text-h)}.panel-btn.icon-only{padding:5px}.listen-btn.listening{color:var(--accent)}.listen-btn:disabled:hover{background:0 0}.remove-btn:hover{color:var(--danger)}.video-panel-actions{align-items:center;gap:2px;margin-left:auto;display:flex}.video-panel-volume{width:90px;accent-color:var(--accent)}.chat-bar{background:var(--bg-elev);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:340px;transition:width .25s;display:flex;position:relative;overflow:hidden}.chat-bar.collapsed{width:48px}.chat-bar-toggle{z-index:2;width:32px;height:32px;color:var(--text);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:inline-flex;position:absolute;top:8px;left:8px}.chat-bar-toggle:hover{background:var(--bg-inset);color:var(--text-h)}.chat-bar-body{flex-direction:column;flex:1;align-self:flex-end;width:340px;min-height:0;display:flex}.chat-bar.collapsed .chat-bar-body,.chat-bar.collapsed .chat-panel{visibility:hidden}.chat-tabs{border-bottom:1px solid var(--border);scrollbar-width:thin;align-items:center;gap:4px;padding:8px 8px 8px 46px;display:flex;overflow-x:auto}.chat-tabs::-webkit-scrollbar{height:5px}.chat-tab{max-width:130px;color:var(--text);background:0 0;border:none;border-radius:7px;align-items:center;gap:5px;padding:5px 10px;font-size:13px;font-weight:600;transition:background-color .15s,color .15s;display:inline-flex}.chat-tab:hover{background:var(--bg-inset);color:var(--text-h)}.chat-tab.active{background:var(--accent-soft);color:var(--accent)}.chat-tab-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-tab-audio{flex-shrink:0}.chat-panels{flex:1;min-height:0;position:relative}.chat-panel{visibility:hidden;position:absolute;inset:0}.chat-panel.visible{visibility:visible}.chat-panel iframe{border:0;width:100%;height:100%}.dropdown{position:relative}.dropdown-backdrop{z-index:5;position:fixed;inset:0}.dropdown-panel{z-index:6;border:1px solid var(--border);background:var(--bg-elev);width:320px;max-height:420px;box-shadow:var(--shadow);border-radius:10px;padding:10px;animation:.15s pop-in;position:absolute;top:calc(100% + 6px);right:0;overflow-y:auto}.online-now-panel{width:340px}.dropdown-panel-left{left:0;right:auto}.online-section+.online-section{margin-top:12px}.online-section h2{color:var(--text-h);letter-spacing:.06em;text-transform:uppercase;margin:2px 4px 6px;font-size:12px;font-weight:700}.dropdown-empty{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:10px 6px;display:flex}.dropdown-empty p{margin:0;font-size:14px}.btn-small{padding:4px 10px;font-size:13px}.template-save{gap:8px;margin-bottom:8px;display:flex}.template-save input{border:1px solid var(--border);background:var(--bg-inset);min-width:0;color:var(--text-h);border-radius:8px;flex:1;padding:6px 10px;font-size:14px}.template-save input:focus{border-color:var(--accent);outline:none}.template-status{margin:4px 2px 8px;font-size:13px}.template-status.ok{color:var(--accent)}.template-status.err{color:var(--danger)}.template-list{flex-direction:column;display:flex}.template-row,.followed-row{border-top:1px solid var(--border);align-items:center;gap:8px;padding:7px 4px;display:flex}.template-row-info,.followed-row-info{flex-direction:column;flex:1;min-width:0;display:flex}.template-row-name,.followed-row-name{color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;font-size:14px;font-weight:600;display:flex;overflow:hidden}.template-row-meta,.followed-row-meta{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.video-panel.notfound{background:var(--bg-elev);border-style:dashed}.video-panel-notfound{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:14px;display:flex}.video-panel.notfound .video-panel-overlay-name{color:var(--text-h)}.modal-backdrop{z-index:10;background:#08080c99;justify-content:center;align-items:center;animation:.15s fade-in;display:flex;position:fixed;inset:0}.modal{border:1px solid var(--border);background:var(--bg-elev);width:min(92vw,380px);box-shadow:var(--shadow);border-radius:12px;padding:20px;animation:.18s pop-in}.modal p{color:var(--text-h);margin:0 0 16px;font-weight:600}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.settings-modal{width:min(92vw,420px)}.settings-modal h2{color:var(--text-h);margin:0 0 16px;font-size:17px}.settings-row{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;padding:10px 0;display:flex}.settings-row:first-of-type{border-top:none}.settings-label{color:var(--text-h);font-size:14px;font-weight:600;display:block}.settings-hint{color:var(--text);font-size:12px;display:block}.settings-links{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.96)}}@media (width<=900px){.app-topbar{flex-wrap:wrap}.topbar-controls{order:3;width:100%}.chat-bar,.chat-bar-body{width:280px}.add-channel-form input{width:170px}.video-grid-symmetric.count-3,.video-grid-symmetric.count-5,.video-grid-symmetric.count-6{grid-template-columns:repeat(2,1fr)}.video-grid-symmetric.count-3 .video-panel:nth-child(3),.video-grid-symmetric.count-5 .video-panel:first-child,.video-grid-symmetric.count-5 .video-panel:nth-child(2),.video-grid-symmetric.count-5 .video-panel:nth-child(3),.video-grid-symmetric.count-5 .video-panel:nth-child(4),.video-grid-symmetric.count-5 .video-panel:nth-child(5){grid-column:auto}}