:root{--bg:#0a0f14;--bg-elevated:#121a22;--bg-tile:#0f161d;--line:#b4d2e61f;--text:#e8f1f7;--text-dim:#8aa0b2;--accent:#3dffa8;--accent-dim:#3dffa829;--warn:#ffb020;--danger:#ff5c6c;--twitch:#bf94ff;--vk:#4a9fff;--radius:14px;--btn-r:999px;--font:"Sora", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);font-family:var(--font);margin:0}body{min-height:100vh;overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}#app{flex-direction:column;min-height:100vh;display:flex;position:relative}.atmosphere{pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 50% at 10% -10%, #3dffa824, transparent 55%), radial-gradient(ellipse 60% 40% at 100% 0%, #4a9fff1f, transparent 50%), linear-gradient(180deg, #0c141c 0%, var(--bg) 40%, #070b10 100%);position:fixed;inset:0}.atmosphere:after{content:"";opacity:.35;background-image:linear-gradient(#8cb4c80a 1px,#0000 1px),linear-gradient(90deg,#8cb4c80a 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 20%,#0000 75%);mask-image:radial-gradient(#000 20%,#0000 75%)}.topbar,.stage{z-index:1;position:relative}.topbar{--bar-h:44px;--bar-r:var(--btn-r);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0a0f14c7;align-items:center;gap:1rem;padding:.85rem 1.25rem;display:flex}.brand{flex-shrink:0;align-items:center;gap:.7rem;min-width:0;display:flex}.brand-mark{width:var(--bar-h);height:var(--bar-h);background:linear-gradient(145deg, var(--accent), #1ecf8a 55%, #4a9fff);border-radius:12px;flex-shrink:0;position:relative;box-shadow:0 0 0 1px #3dffa859,0 8px 24px #3dffa829}.brand-mark:before,.brand-mark:after{content:"";background:#071018;border-radius:2px;width:5px;position:absolute;top:12px;bottom:12px}.brand-mark:before{left:12px}.brand-mark:after{top:15px;bottom:15px;right:12px}.brand-text h1{letter-spacing:-.03em;margin:0;font-size:1.15rem;font-weight:700;line-height:1.15}.brand-text p{color:var(--text-dim);letter-spacing:.02em;margin:.15rem 0 0;font-size:.72rem}.add-form{min-width:0;max-width:640px;height:var(--bar-h);flex:1;align-items:center;gap:.5rem;margin-inline:auto;display:flex}.platform-switch{border-radius:var(--bar-r);border:1px solid var(--line);background:#ffffff0a;flex-shrink:0;height:100%;padding:3px;display:inline-flex}.platform-btn{color:var(--text-dim);border-radius:var(--btn-r);background:0 0;border:0;height:100%;padding:0 .85rem;font-size:.8rem;font-weight:500;transition:background .2s,color .2s}.platform-btn.is-active{background:var(--accent-dim);color:var(--accent)}.platform-btn:hover{color:var(--text)}.add-input{border:1px solid var(--line);border-radius:var(--bar-r);background:#ffffff08;outline:none;flex:1;min-width:0;height:100%;padding:0 .95rem;transition:border-color .2s,box-shadow .2s}.add-input:focus{box-shadow:0 0 0 3px var(--accent-dim);border-color:#3dffa88c}.add-input.shake{animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.add-btn,.ghost-btn{height:var(--bar-h);border-radius:var(--btn-r);white-space:nowrap;letter-spacing:.01em;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:0 1.05rem;font-weight:600;transition:transform .15s,background .2s,border-color .2s,color .2s,filter .15s;display:inline-flex}.add-btn{background:var(--accent);color:#071018;flex-shrink:0}.add-btn svg{width:16px;height:16px}.add-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}.ghost-btn{color:var(--text-dim);background:#ffffff0a;border-color:#8aa0b247;font-size:.82rem}.ghost-btn svg{width:15px;height:15px}.ghost-btn:hover{color:var(--text);background:var(--accent-dim);border-color:#3dffa859;transform:translateY(-1px)}.ghost-btn.is-token-on{color:var(--accent);border-color:#3dffa866}.twitch-btn{--bar-h:42px;height:var(--bar-h);border-radius:var(--btn-r);color:#fff;letter-spacing:.01em;cursor:pointer;background:#9146ff;border:0;justify-content:center;align-items:center;gap:.5rem;padding:0 .95rem;font-size:.84rem;font-weight:600;text-decoration:none;transition:transform .15s,filter .15s,box-shadow .15s;display:inline-flex;box-shadow:0 8px 24px #9146ff47}.twitch-btn-icon{flex-shrink:0;width:18px;height:18px}.twitch-btn:hover{filter:brightness(1.08);box-shadow:0 10px 28px #9146ff66}.twitch-btn:active{transform:translateY(1px)}.twitch-btn.is-logged-in{color:#e4d4ff;box-shadow:none;background:#9146ff2e;border:1px solid #9146ff73}.twitch-btn.is-logged-in:hover{filter:none;background:#9146ff47}.token-dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-elevated);width:min(440px,100vw - 2rem);color:var(--text);margin:auto;padding:0;box-shadow:0 24px 80px #0000008c}.token-dialog:has(.follows-panel){width:min(520px,100vw - 2rem)}.token-dialog:has(.access-settings){width:min(760px,100vw - 1.25rem);max-height:min(92vh,900px);overflow:hidden}.token-dialog.terms-dialog{width:min(560px,100vw - 2rem);max-height:min(88vh,720px)}.terms-panel{max-height:min(88vh,720px)}.terms-body{max-height:min(58vh,480px);color:var(--text-dim);flex-direction:column;gap:.75rem;padding-right:.25rem;font-size:.84rem;line-height:1.5;display:flex;overflow:auto}.terms-body h3{color:var(--text);margin:.25rem 0 0;font-size:.9rem;font-weight:600}.terms-body p,.terms-body ul{margin:0}.terms-body ul{flex-direction:column;gap:.35rem;padding-left:1.15rem;display:flex}.terms-body a{color:var(--accent)}.terms-body code{font-family:var(--mono);color:var(--accent);font-size:.78rem}.terms-body strong{color:var(--text);font-weight:600}.terms-updated{color:var(--text);font-size:.82rem;margin-top:.15rem!important}.text-link-btn{color:var(--text-dim);border-radius:var(--btn-r);background:#ffffff08;border:1px solid #8aa0b238;height:34px;padding:0 .9rem;font-size:.78rem;font-weight:600;text-decoration:none;transition:color .15s,border-color .15s,background .15s,transform .12s}.text-link-btn:hover{color:var(--text);background:var(--accent-dim);border-color:#3dffa859;transform:translateY(-1px)}.access-gate{z-index:1;place-items:center;min-height:100vh;padding:1.5rem 1.5rem 3.5rem;display:grid;position:relative}.access-card{border:1px solid var(--line);border-radius:var(--radius);background:#121a22eb;flex-direction:column;gap:.9rem;width:min(420px,100%);padding:1.5rem 1.4rem 1.25rem;display:flex;box-shadow:0 24px 80px #00000080}.access-brand{margin-bottom:.15rem}.access-lead,.access-note,.access-settings-lead{color:var(--text-dim);margin:0;font-size:.84rem;line-height:1.45}.access-settings{overscroll-behavior:contain;gap:1rem;max-height:min(92vh,860px);overflow:hidden auto}.access-mgmt-header h2{letter-spacing:-.02em}.access-stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;display:grid}.access-stat{border:1px solid var(--line);background:linear-gradient(160deg,#3dffa80f,#0000 55%),#00000038;border-radius:12px;flex-direction:column;gap:.25rem;min-width:0;padding:.7rem .75rem;display:flex}.access-stat-wide{grid-column:1/-1}.access-stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-size:.68rem;font-weight:600}.access-stat-value{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.98rem;font-weight:600;overflow:hidden}.access-stat-value.is-locked{color:var(--accent)}.access-stat-value.is-open{color:#8ec8ff}.access-stat-admins{font-family:var(--font-mono,"IBM Plex Mono", monospace);white-space:normal;font-size:.82rem;font-weight:500}.access-mode-card{border:1px solid var(--line);background:#121a22bf;border-radius:14px;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1rem;display:flex}.access-mode-copy{flex:1;min-width:0}.access-mode-copy h3{margin:0 0 .3rem;font-size:.95rem;font-weight:600}.access-mode-copy p{color:var(--text-dim);margin:0;font-size:.8rem;line-height:1.4}.access-switch-panel{border:1px solid var(--line);background:#00000040;border-radius:999px;flex-shrink:0;gap:.55rem;padding:.35rem .55rem .35rem .4rem;position:relative}.access-switch-panel input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.access-switch-track{background:#8aa0b247;border-radius:999px;flex-shrink:0;width:2.4rem;height:1.35rem;transition:background .18s;position:relative}.access-switch-track:after{content:"";background:#fff;border-radius:50%;width:.98rem;height:.98rem;transition:transform .18s;position:absolute;top:.18rem;left:.18rem}.access-switch-panel input:checked+.access-switch-track{background:#3dffa88c}.access-switch-panel input:checked+.access-switch-track:after{transform:translate(1.05rem)}.access-switch-text{white-space:nowrap;font-size:.78rem;font-weight:600}.access-mgmt-stack{flex-direction:column;gap:.85rem;width:100%;display:flex}.access-mgmt-split{grid-template-columns:1fr 1fr;align-items:start;gap:.85rem;display:grid}.access-card-block{border:1px solid var(--line);background:linear-gradient(165deg,#3dffa80d,#0000 42%),#101820;border-radius:16px;flex-direction:column;gap:.7rem;min-width:0;padding:.95rem 1rem;display:flex;position:relative;box-shadow:inset 0 1px #ffffff08}.access-card-allowed{background:linear-gradient(165deg,#4a9fff14,#0000 45%),#101820}.access-card-head h3{letter-spacing:-.01em;margin:0 0 .2rem;font-size:.92rem;font-weight:650}.access-card-head p{color:var(--text-dim);margin:0;font-size:.76rem;line-height:1.4}.access-inline-form{grid-template-columns:1fr auto;align-items:center;gap:.45rem;display:grid}.access-inline-form .add-input{border-radius:999px;width:100%;min-width:0;height:40px;padding-inline:1rem}.access-inline-form .add-btn,.access-pill-submit{white-space:nowrap;border-radius:999px;height:40px;padding:0 1.1rem;font-size:.82rem}.access-list-user{align-items:center;gap:.55rem;min-width:0;display:flex}.access-list-user>div{flex-direction:column;gap:.1rem;min-width:0;display:flex}.access-avatar{color:#061018;object-fit:cover;background:#3dffa8d9;border:1px solid #ffffff1f;border-radius:50%;flex-shrink:0;place-items:center;width:1.75rem;height:1.75rem;font-size:.72rem;font-weight:700;display:grid}img.access-avatar{background:#00000059}.access-avatar-ok{box-shadow:0 0 0 1.5px #74b4ff8c}.access-avatar-lg{width:2.5rem;height:2.5rem}.access-avatar-fallback{background:#3dffa8d9}.access-pill-btn{height:30px;color:var(--text);letter-spacing:.01em;white-space:nowrap;background:#ffffff0a;border:1px solid #8aa0b247;border-radius:999px;justify-content:center;align-items:center;padding:0 .85rem;font-size:.74rem;font-weight:600;transition:background .15s,border-color .15s,color .15s,transform .12s;display:inline-flex}.access-pill-btn:hover:not(:disabled){background:#ffffff17;border-color:#b4c8dc66;transform:translateY(-1px)}.access-pill-btn:disabled{opacity:.35;cursor:not-allowed}.access-pill-ok{color:var(--accent);background:#3dffa814;border-color:#3dffa866}.access-pill-ok:hover:not(:disabled){background:#3dffa829;border-color:#3dffa88c}.access-pill-accent{color:#9ec8ff;background:#74b4ff14;border-color:#74b4ff66}.access-pill-accent:hover:not(:disabled){background:#74b4ff29;border-color:#74b4ff8c}.access-pill-danger{color:#ffb0b0;background:#ff5a5a0f;border-color:#ff787859}.access-pill-danger:hover:not(:disabled){background:#ff5a5a24;border-color:#ff787880}.access-btn-ok{color:var(--accent)!important;border-color:#3dffa859!important}.access-list-actions .ghost-btn:disabled{opacity:.35;cursor:not-allowed}.access-admin-key-field{margin-top:.15rem}@media (width<=720px){.access-stat-row{grid-template-columns:1fr 1fr}.access-mode-card{flex-direction:column;align-items:stretch}.access-mgmt-split{grid-template-columns:1fr}.access-list-row{flex-direction:column;align-items:stretch}.access-list-actions{justify-content:flex-start}}.access-form{flex-direction:column;gap:.75rem;display:flex}.access-input{width:100%;height:42px}.access-submit,.access-logout{border-radius:var(--btn-r);justify-content:center;width:100%}.access-error{color:var(--danger);margin:0;font-size:.82rem}.access-switch{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.65rem;font-size:.9rem;display:flex}.access-switch input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}.access-twitch-btn{justify-content:center;width:100%;height:44px}.access-pending-title{color:var(--accent);margin:0;font-size:1.05rem;font-weight:600}.access-pending-user{align-items:center;gap:.75rem;margin:0;font-size:.9rem;display:flex}.access-pending-user-meta{flex-direction:column;gap:.15rem;min-width:0;display:flex}.access-lists{flex-direction:column;gap:.85rem;display:flex}.access-list-title{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin:0 0 .35rem;font-size:.78rem;font-weight:600}.access-list{flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.access-list-empty{color:var(--text-dim);background:#00000029;border:1px dashed #8aa0b259;border-radius:10px;margin:0;padding:.7rem .75rem;font-size:.8rem;line-height:1.4}.access-list-row{background:#00000038;border:1px solid #8aa0b238;border-radius:12px;justify-content:space-between;align-items:center;gap:.65rem;padding:.55rem .65rem;display:flex}.access-pending-login{color:var(--text-dim);font-family:var(--font-mono,"IBM Plex Mono", monospace);font-size:.75rem}.access-list-actions{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.35rem;display:flex}.access-list-actions .ghost-btn{border-radius:999px;height:30px;padding:0 .75rem;font-size:.74rem}.access-audit-row{border:1px solid var(--line);background:#0000001f;border-radius:8px;flex-direction:column;gap:.15rem;padding:.4rem .55rem;font-size:.78rem;display:flex}.access-audit-action{color:var(--accent);text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;font-weight:600}.access-audit-meta{color:var(--text-dim);font-family:var(--font-mono,"IBM Plex Mono", monospace);word-break:break-word}.token-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04080cb8}.token-dialog-form{flex-direction:column;gap:.9rem;padding:1.25rem 1.35rem 1.2rem;display:flex}.token-dialog-form header h2{margin:0 0 .35rem;font-size:1.05rem;font-weight:600}.token-dialog-form header p{color:var(--text-dim);margin:0;font-size:.85rem;line-height:1.45}.token-steps{color:var(--text-dim);margin:0;padding-left:1.2rem;font-size:.82rem;line-height:1.5}.token-steps code{font-family:var(--mono);color:var(--accent);font-size:.78rem}.token-steps a{color:var(--twitch)}.token-field{color:var(--text-dim);flex-direction:column;gap:.35rem;font-size:.78rem;display:flex}.token-field input{border-radius:var(--btn-r);border:1px solid var(--line);height:42px;font-family:var(--mono);background:#00000047;padding:0 1rem;font-size:.82rem}.token-field input:focus{border-color:#3dffa873;outline:none}.token-note{min-height:1.2em;color:var(--text-dim);margin:0;font-size:.8rem}.token-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.55rem;display:flex}.token-actions .add-btn,.token-actions .ghost-btn{--bar-h:40px;min-width:7.5rem;padding:0 1.15rem;font-size:.82rem}.toast{z-index:40;color:var(--text);background:#0c141cf0;border:1px solid #3dffa859;border-radius:10px;margin:0;padding:.65rem 1rem;font-size:.85rem;position:fixed;top:1rem;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #00000073}.follows-auth-row{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.follows-header{justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.follows-header h2{margin:0 0 .25rem}.follows-header p{color:var(--text-dim);margin:0;font-size:.85rem}.follows-list{flex-direction:column;gap:.45rem;max-height:min(42vh,360px);padding-right:.15rem;display:flex;overflow:auto}.follows-row{border-bottom:1px solid var(--line);align-items:center;gap:.75rem;padding:.55rem .15rem;display:flex}.follows-row-text{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.follows-row-text strong{font-size:.9rem}.follows-row-text span,.follows-row-text small{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.follows-add-one{border-radius:var(--btn-r);flex-shrink:0;height:34px;padding:0 .9rem;font-size:.78rem}.top-actions{height:var(--bar-h);flex-shrink:0;align-items:center;gap:.45rem;display:flex}.stage{flex:1;align-items:stretch;gap:.9rem;min-height:0;padding:1.25rem 1.25rem .5rem;display:flex}.site-credits{z-index:1;pointer-events:none;flex-shrink:0;justify-content:center;padding:.55rem 1rem .85rem;display:flex;position:relative}.access-gate .site-credits{padding:.4rem 1rem;position:absolute;bottom:.55rem;left:0;right:0}.site-credits-link{pointer-events:auto;color:#8aa0b28c;letter-spacing:.01em;opacity:.72;align-items:center;gap:.45rem;max-width:min(100%,420px);font-size:.72rem;line-height:1.3;text-decoration:none;transition:opacity .18s,color .18s;display:inline-flex}.site-credits-link:hover{opacity:1;color:#b4c8d6d9}.site-credits-avatar{object-fit:cover;opacity:.75;filter:grayscale(.35);border-radius:50%;flex-shrink:0;width:18px;height:18px;transition:opacity .18s,filter .18s}.site-credits-link:hover .site-credits-avatar{opacity:1;filter:none}.site-credits-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.site-credits-name{color:#bf94ffb3;font-weight:500}.site-credits-link:hover .site-credits-name{color:#bf94fff2;text-underline-offset:.15em;text-decoration:underline}.site-credits-sep{opacity:.55;margin:0 .15rem}.stage-main{flex-direction:column;flex:1;gap:.75rem;min-width:0;display:flex}.stage.has-chat .stream-grid[data-count="1"]{max-width:none}.stage.is-focus{gap:.65rem;height:calc(100vh - 98px);min-height:0;padding:.65rem .85rem .85rem}.stage.is-focus .stage-main{min-height:0}.focus-rail{flex-direction:column;flex-shrink:0;gap:.45rem;width:220px;padding-right:.15rem;display:flex;overflow-y:auto}.focus-rail[hidden],.focus-main[hidden],.focus-tabs[hidden]{display:none!important}.focus-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.focus-main .stream-tile{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.focus-main .player-shell{aspect-ratio:auto;flex:1;min-height:0}.focus-tabs{flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.focus-tab{color:var(--text-dim);border-radius:var(--btn-r);background:#ffffff08;border:1px solid #8aa0b238;padding:.35rem .85rem;font-size:.8rem;font-weight:600;transition:color .15s,border-color .15s,background .15s}.focus-tab:hover{color:var(--text);background:var(--accent-dim);border-color:#3dffa84d}.focus-tab.is-active{color:#071018;background:var(--accent);border-color:#0000}.stream-tile.is-compact{border-radius:10px}.stream-tile.is-compact .tile-bar{padding:.4rem .5rem}.stream-tile.is-compact .platform-pill,.stream-tile.is-compact .latency,.stream-tile.is-compact .tile-actions .icon-btn[data-action=chat],.stream-tile.is-compact .tile-actions .icon-btn[data-action=refresh],.stream-tile.is-compact .tile-controls,.stream-tile.is-compact .control-hint{display:none}.stream-tile.is-compact .channel-name{font-size:.78rem}.stream-tile.is-compact .player-shell{aspect-ratio:16/9}.compact-focus-hit{cursor:pointer;z-index:2;background:0 0;border:0;margin:0;padding:0;display:none;position:absolute;inset:0}.stream-tile.is-compact .compact-focus-hit{display:block}.stream-tile.is-compact .compact-focus-hit:hover{background:#3dffa814}.stream-tile.is-focused:not(.is-compact){border-color:color-mix(in srgb, var(--accent) 55%, var(--line));box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 18px 40px #00000047}.chat-panel{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(#101820fa,#0a0e12fa);flex-direction:column;flex-shrink:0;width:min(360px,38vw);animation:.3s both rise;display:flex;overflow:hidden;box-shadow:0 18px 40px #00000047}.stage.is-focus .chat-panel{width:min(340px,32vw);min-height:0}.stage.is-focus .chat-frame{min-height:0}.chat-panel[hidden]{display:none!important}.chat-panel-bar{border-bottom:1px solid var(--line);background:#00000040;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem .8rem;display:flex}.chat-panel-title{align-items:baseline;gap:.5rem;min-width:0;display:flex}.chat-panel-label{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-size:.68rem;font-weight:600}.chat-panel-title strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-panel-actions{flex-shrink:0;align-items:center;gap:.35rem;display:flex}.chat-frame{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#16161a;border:0;flex:1;width:100%;min-height:480px}.chat-frame.is-vk{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;filter:invert()brightness(5.5)contrast(1.15);background:#fff}.empty-state{text-align:center;max-width:420px;margin:12vh auto 0;animation:.5s both rise}.empty-state h2{letter-spacing:-.03em;margin:0 0 .6rem;font-size:1.6rem}.empty-state p{color:var(--text-dim);margin:0;line-height:1.55}.empty-state strong{color:var(--accent)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.stream-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:.9rem;display:grid}.stream-grid[data-count="1"]{grid-template-columns:1fr;max-width:1100px;margin:0 auto}.stream-grid[data-count="2"],.stream-grid[data-count="3"],.stream-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.stream-tile{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(#141e28e6,#0c1218f2);flex-direction:column;transition:border-color .2s,box-shadow .2s;animation:.35s both rise;display:flex;overflow:hidden;box-shadow:0 18px 40px #00000047}.stream-tile.is-chat-active:not(.is-focused){border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}.stream-tile[data-platform=twitch]{--platform-color:var(--twitch)}.stream-tile[data-platform=vk]{--platform-color:var(--vk)}.tile-bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:.5rem;padding:.65rem .75rem;display:flex}.drag-handle{width:28px;height:32px;color:var(--text-dim);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:8px;flex:none;place-items:center;margin:-.2rem 0;transition:color .15s,background .15s;display:grid}.drag-handle svg{pointer-events:none;width:16px;height:16px;display:block}.drag-handle:hover,.drag-handle:focus-visible{color:var(--text);background:#ffffff0f;outline:none}.drag-handle:active{cursor:grabbing}.stream-tile.is-dragging-active{opacity:.45}.stream-tile.is-drop-before,.stream-tile.is-drop-after{border-color:color-mix(in srgb, var(--accent) 55%, var(--line));box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent)}.stream-tile.is-drop-before{box-shadow:inset 3px 0 0 var(--accent), 0 18px 40px #00000047}.stream-tile.is-drop-after{box-shadow:inset -3px 0 0 var(--accent), 0 18px 40px #00000047}.stream-tile.is-compact.is-drop-before{box-shadow:inset 0 3px 0 var(--accent), 0 18px 40px #00000047}.stream-tile.is-compact.is-drop-after{box-shadow:inset 0 -3px 0 var(--accent), 0 18px 40px #00000047}.tile-identity{text-align:left;background:0 0;border:0;border-radius:8px;flex:1;align-items:center;gap:.5rem;min-width:0;padding:0;transition:background .15s;display:flex}.tile-identity:hover{background:#ffffff0a}.tile-identity:hover .channel-name{color:var(--accent)}.platform-pill{letter-spacing:.04em;text-transform:uppercase;color:var(--platform-color);background:color-mix(in srgb, var(--platform-color) 16%, transparent);border:1px solid color-mix(in srgb, var(--platform-color) 35%, transparent);border-radius:999px;flex-shrink:0;padding:.2rem .5rem;font-size:.68rem;font-weight:600}.channel-name{text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:600;overflow:hidden}.status-dot{background:var(--accent);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;box-shadow:0 0 #3dffa880}.status-dot[data-status=offline]{background:var(--text-dim);box-shadow:none;animation:none}@keyframes pulse{0%{box-shadow:0 0 #3dffa873}70%{box-shadow:0 0 0 8px #3dffa800}to{box-shadow:0 0 #3dffa800}}.tile-actions{flex-shrink:0;align-items:center;gap:.35rem;display:flex}.latency{font-family:var(--mono);color:var(--text-dim);border:1px solid var(--line);background:#00000040;border-radius:8px;align-items:baseline;gap:.35rem;margin-right:.25rem;padding:.25rem .45rem;font-size:.75rem;display:inline-flex}.latency-label{text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-size:.62rem}.latency-value{color:var(--accent);font-weight:500}.icon-btn{border:1px solid var(--line);width:32px;height:32px;color:var(--text-dim);background:#ffffff08;border-radius:50%;place-items:center;transition:color .15s,border-color .15s,background .15s,transform .12s;display:grid}.icon-btn svg{width:15px;height:15px}.icon-btn:hover{color:var(--text);background:var(--accent-dim);border-color:#3dffa859;transform:translateY(-1px)}.icon-btn.is-active{color:#071018;background:var(--accent);border-color:#0000}.icon-btn.danger:hover{color:var(--danger);background:#ff5c6c1f;border-color:#ff5c6c73}.player-shell{aspect-ratio:16/9;background:#000;position:relative}.player-host,.player-mount,.player-frame{border:0;width:100%;height:100%;display:block}.player-host{background:#000;min-height:220px;position:relative}.player-host iframe.player-frame{width:100%;height:100%}.player-host video.player-frame{object-fit:contain;background:#000}.stream-status{z-index:2;color:var(--text-dim);pointer-events:none;background:#060a0ed1;place-items:center;margin:0;font-size:.95rem;font-weight:500;display:grid;position:absolute;inset:0}.stream-status[hidden]{display:none!important}.player-mount iframe{width:100%!important;height:100%!important}.vk-paused{text-align:center;width:100%;height:100%;color:var(--text);background:radial-gradient(circle,#4a9fff1f,#0000 55%),#05080c;place-content:center;gap:.35rem;display:grid}.vk-paused span{font-size:1.1rem;font-weight:600}.vk-paused small{color:var(--text-dim)}.tile-controls{border-top:1px solid var(--line);background:#00000038;align-items:center;gap:.5rem;padding:.55rem .7rem;display:flex}.control-btn{width:36px;height:36px;color:var(--text-dim);background:#ffffff0d;border:1px solid #0000;border-radius:50%;place-items:center;transition:color .15s,background .15s,border-color .15s,transform .12s;display:grid}.control-btn svg{width:18px;height:18px;display:block}.control-btn:hover:not(:disabled){color:var(--text);background:var(--accent-dim);border-color:#3dffa859;transform:translateY(-1px)}.control-btn:disabled,.control-btn.disabled{opacity:.4;cursor:not-allowed}.root.is-muted .control-btn[data-action=mute],.stream-tile.is-muted .control-btn[data-action=mute]{color:var(--warn)}.hidden{display:none!important}.volume-wrap{flex:1;align-items:center;min-width:80px;max-width:180px;display:flex}.volume-wrap input[type=range]{width:100%;accent-color:var(--accent)}.volume-wrap input[type=range]:disabled{opacity:.35}.quality-wrap{flex:none;align-items:center;display:flex}.quality-select{appearance:none;border:1px solid var(--line);border-radius:var(--btn-r);background:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%) calc(100% - 12px) calc(50% - 2px) / 5px 5px no-repeat, linear-gradient(135deg, var(--text-dim) 50%, transparent 50%) calc(100% - 7px) calc(50% - 2px) / 5px 5px no-repeat, #ffffff0d;min-width:4.5rem;max-width:6.5rem;color:var(--text);font:inherit;cursor:pointer;padding:.35rem 1.5rem .35rem .7rem;font-size:.72rem;line-height:1.2}.quality-select:hover:not(:disabled){border-color:#3dffa859}.quality-select:disabled{opacity:.4;cursor:not-allowed}.quality-select option{color:var(--text);background:#12151a}.control-hint{color:var(--text-dim);white-space:nowrap;margin-left:auto;font-size:.68rem}.stream-tile.is-paused .latency-value{color:var(--warn)}@media (width<=960px){.topbar{flex-wrap:wrap;gap:.75rem}.brand{flex:1}.add-form{flex:100%;order:3;max-width:none;margin-inline:0}.top-actions{margin-left:auto}.ghost-btn span,.add-btn span{display:none}.add-btn,.ghost-btn{width:var(--bar-h);padding:0}.stage,.stage.is-focus{flex-direction:column;height:auto;min-height:calc(100vh - 110px)}.stage.is-focus{height:auto}.focus-rail{flex-direction:row;width:100%;overflow:auto hidden}.focus-rail .stream-tile.is-compact{flex:0 0 200px}.focus-main{min-height:50vh}.chat-panel,.stage.is-focus .chat-panel{width:100%;min-height:420px}.stream-grid[data-count="2"],.stream-grid[data-count="3"],.stream-grid[data-count="4"]{grid-template-columns:1fr}.control-hint{display:none}}@media (width<=640px){.brand-text p{display:none}.platform-btn{padding:0 .65rem}}