*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e0e10;--bg-header: #18181b;--bg-card: #1f1f23;--border: #2d2d35;--accent: #9147ff;--accent-hov: #a970ff;--text: #efeff1;--text-dim: #adadb8;--danger: #e91916;--header-h: 58px;--bar-h: 52px}html,body{min-height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);overflow-y:auto;overflow-x:hidden}#app{display:flex;flex-direction:column;min-height:100dvh;padding-top:var(--header-h);padding-bottom:var(--bar-h)}.header{display:flex;align-items:center;gap:12px;padding:0 16px;height:var(--header-h);background:var(--bg-header);border-bottom:1px solid var(--border);flex-shrink:0;position:fixed;top:0;left:0;right:0;z-index:200}.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;color:var(--accent);white-space:nowrap;text-decoration:none}.logo svg{flex-shrink:0}.add-form{display:flex;align-items:center;gap:8px;flex:1;max-width:100%}.add-form-wrap{position:relative;flex:1;max-width:480px}.add-form input{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:7px 12px;font-size:.875rem;outline:none;transition:border-color .15s}.add-form input:focus{border-color:var(--accent)}.add-form input::placeholder{color:var(--text-dim)}.search-suggest{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;overflow:hidden;z-index:250;max-height:280px;overflow-y:auto}.search-suggest.open{display:block}.suggest-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:none;border-top:1px solid var(--border);background:transparent;color:var(--text);text-align:left;cursor:pointer}.suggest-item:first-child{border-top:none}.suggest-item:hover,.suggest-item.active{background:#9147ff29}.suggest-main{display:flex;flex-direction:column;min-width:0}.suggest-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggest-login{font-size:.78rem;color:var(--text-dim)}.suggest-status{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid var(--border);flex-shrink:0}.suggest-status.live{color:#fff;background:var(--danger);border-color:var(--danger)}.suggest-empty{padding:9px 10px;font-size:.8rem;color:var(--text-dim)}.header-auth{margin-left:auto}.btn{cursor:pointer;border:none;border-radius:4px;font-size:.875rem;font-weight:600;padding:7px 14px;transition:background .15s,opacity .15s;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:3px}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hov)}.btn-sm{padding:5px 10px;font-size:.8rem}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-dim)}.btn-ghost:hover{border-color:var(--text-dim);color:var(--text)}.icon-btn{background:transparent;border:none;cursor:pointer;padding:4px 6px;border-radius:4px;font-size:1rem;color:var(--text);transition:background .15s;line-height:1}.icon-btn:hover{background:#ffffff1f}.icon-btn.muted{opacity:.55}.icon-btn.staged,.icon-btn.wide{color:var(--accent)}.wide-btn{display:none}.wide-btn{font-size:1.2rem;padding:3px 7px}.stream-card.is-stage .wide-btn,.ctrl-item.is-stage .wide-btn{display:inline-flex}.content-wrap{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}.main{flex:1;overflow:visible;min-height:0;position:relative;display:flex;flex-direction:column}#empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-dim);pointer-events:none}#empty-state .empty-icon{font-size:3rem}#empty-state p{font-size:1rem}#empty-state small{font-size:.8rem}#streams{width:100%;background:#000}#streams.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:2px}#streams.stage{display:grid;grid-template-columns:3fr 1fr;gap:2px}#streams.wide-stage,#streams.full-stage{display:grid;gap:2px}.stream-card{position:relative;background:#000;overflow:hidden;aspect-ratio:16 / 9;min-height:0}.embed-wrap{position:absolute;inset:0;width:100%;height:100%}.embed-wrap>div{width:100%;height:100%}.embed-wrap iframe{display:block;width:100%;height:100%;border:none}.card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px;opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.65) 0%,transparent 35%,transparent 65%,rgba(0,0,0,.5) 100%)}.stream-card:hover .card-overlay{opacity:1}.overlay-top,.overlay-bottom{display:flex;align-items:center;pointer-events:all}.overlay-top{justify-content:space-between}.overlay-bottom{justify-content:flex-start}.card-label{font-weight:700;font-size:.875rem;text-shadow:0 1px 3px rgba(0,0,0,.9)}.card-actions{display:flex;gap:2px}.stream-card.is-stage:after{content:"";position:absolute;inset:0;border:2px solid var(--accent);pointer-events:none}#ctrl-bar{display:none;align-items:center;gap:4px;padding:0 12px;height:var(--bar-h);background:var(--bg-header);border-top:1px solid var(--border);flex-shrink:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;position:fixed;bottom:0;left:0;right:0;z-index:200}#ctrl-bar::-webkit-scrollbar{height:4px}#ctrl-bar::-webkit-scrollbar-thumb{background:var(--border)}.ctrl-item{display:flex;align-items:center;gap:3px;padding:4px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;white-space:nowrap;flex-shrink:0;cursor:grab}.ctrl-item:active{cursor:grabbing}.ctrl-item.is-stage{border-color:var(--accent)}.ctrl-item.dragging{opacity:.35}.ctrl-item.drag-over{border-color:var(--accent);background:#9147ff2e}.ctrl-label{font-size:.78rem;font-weight:600;color:var(--text-dim);margin-right:4px;max-width:120px;overflow:hidden;text-overflow:ellipsis}#add-toggle-btn{display:none}#add-bar{display:none;align-items:center;padding:0 16px;height:var(--bar-h);background:var(--bg-header);border-bottom:1px solid var(--border);position:fixed;top:var(--header-h);left:0;right:0;z-index:190}#add-bar.open{display:flex}#add-bar .add-form-wrap,#add-bar .add-form{flex:1;max-width:100%}@media(max-width:768px){#streams.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}@media(max-width:900px){.logo span,.header .add-form-wrap{display:none}#add-toggle-btn{display:inline-flex}#layout-btn,.btn-text{display:none}.header{gap:8px;padding:0 10px}.add-form input{font-size:16px}}.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.add-form input:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.ctrl-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#chat-sidebar{position:fixed;top:var(--header-h);right:-340px;width:340px;height:calc(100dvh - var(--header-h) - var(--bar-h));background:var(--bg-header);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:150;transition:right .25s ease;box-shadow:-4px 0 16px #0006}#chat-sidebar.open{right:0}.chat-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:44px;border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}.chat-sidebar-title{font-size:.85rem;font-weight:700;color:var(--text-dim);white-space:nowrap}.chat-tabs{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none;padding:0 2px}.chat-tabs::-webkit-scrollbar{display:none}.chat-tab{background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-dim);cursor:pointer;font-size:.78rem;font-weight:600;padding:3px 9px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;flex-shrink:0}.chat-tab:hover{background:#ffffff14;color:var(--text)}.chat-tab.active{background:#9147ff2e;border-color:var(--accent);color:var(--text)}.chat-body{flex:1;overflow:hidden;position:relative}.chat-body iframe{display:block;width:100%;height:100%;border:none}.chat-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-dim);font-size:.85rem;pointer-events:none}.chat-empty .chat-empty-icon{font-size:2rem}#chat-btn.chat-active{background:#9147ff33;border-color:var(--accent);color:var(--text)}#chat-pin-btn{display:none}@media(min-width:601px){#chat-pin-btn{display:inline-flex}#chat-pin-btn.pinned{color:var(--accent)}}@media(min-width:601px){#app.chat-pinned .content-wrap{flex-direction:row}#app.chat-pinned #chat-sidebar{position:sticky;top:var(--header-h);right:auto;height:calc(100dvh - var(--header-h) - var(--bar-h));box-shadow:none;transition:none;flex-shrink:0}}@media(max-width:600px){#chat-sidebar{width:100%;right:-100%;border-left:none;border-top:1px solid var(--border)}#chat-sidebar.open{right:0}}