:root{--atmo-primary:#e4e4e7;--atmo-secondary:#a1a1aa;--atmo-accent:#fff;--atmo-dark:#09090b;--atmo-darker:#030305;--atmo-surface:#18181b;--atmo-surface-light:#27272a;--atmo-text:#fafafa;--atmo-text-muted:#71717a;--atmo-border:#3f3f46;--stage1-color:#d4d4d8;--stage2-color:#a1a1aa;--stage3-color:#71717a;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--atmo-dark);height:100%;color:var(--atmo-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.loading-state{justify-content:center;align-items:center;gap:var(--spacing-md);height:100vh;color:var(--atmo-text-muted);flex-direction:column;display:flex}.loading-spinner{border:3px solid var(--atmo-border);border-top-color:var(--atmo-primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-state{justify-content:center;align-items:center;gap:var(--spacing-md);flex-direction:column;height:100vh;display:flex}.error-message{color:var(--atmo-text-muted)}.retry-btn{padding:var(--spacing-sm) var(--spacing-lg);background:var(--atmo-surface-light);border:1px solid var(--atmo-border);border-radius:var(--radius-sm);color:var(--atmo-text);cursor:pointer;transition:all .2s}.retry-btn:hover{background:var(--atmo-primary);border-color:var(--atmo-primary);color:var(--atmo-dark)}.app-header{padding:var(--spacing-sm) var(--spacing-md);background:var(--atmo-surface);border-bottom:1px solid var(--atmo-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.app-title{background:linear-gradient(135deg,#fafafa,#a1a1aa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem;font-weight:600}.header-controls{align-items:center;gap:var(--spacing-md);display:flex}.layout-switcher{align-items:center;gap:var(--spacing-sm);display:flex}.layout-label{color:var(--atmo-text-muted);font-size:.875rem}.layout-buttons{gap:var(--spacing-xs);display:flex}.layout-btn{border:1px solid var(--atmo-border);border-radius:var(--radius-sm);background:var(--atmo-surface-light);width:36px;height:36px;color:var(--atmo-text-muted);cursor:pointer;justify-content:center;align-items:center;transition:all .2s;display:flex}.layout-btn:hover{border-color:var(--atmo-primary);color:var(--atmo-text)}.layout-btn.active{background:var(--atmo-primary);border-color:var(--atmo-primary);color:var(--atmo-dark)}.layout-icon{font-size:1.25rem}.chat-toggle-btn{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--atmo-surface-light);border:1px solid var(--atmo-border);border-radius:var(--radius-sm);color:var(--atmo-text-muted);cursor:pointer;font-size:.875rem;transition:all .2s;display:flex}.chat-toggle-btn:hover{border-color:var(--atmo-primary);color:var(--atmo-text)}.chat-toggle-btn.active{background:var(--atmo-primary);border-color:var(--atmo-primary);color:var(--atmo-dark)}.chat-toggle-icon{font-size:1rem}.app-content{flex:1;position:relative;overflow:hidden}.floating-chat-container{background:var(--atmo-surface);border-left:1px solid var(--atmo-border);z-index:100;flex-direction:column;width:350px;transition:transform .3s;display:flex;position:fixed;top:53px;bottom:0;right:0;transform:translate(100%)}.floating-chat-container.open{transform:translate(0)}.floating-chat-container .chat-panel{border-left:none;flex:1;min-height:0}.floating-chat-container .chat-input-container{flex-shrink:0}.chat-close-btn{width:24px;height:24px;color:var(--atmo-text-muted);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;transition:all .2s;display:flex}.chat-close-btn:hover{background:var(--atmo-surface-light);color:var(--atmo-text)}.stream-embed{background:var(--atmo-darker);border-radius:var(--radius-md);position:relative;overflow:hidden}.stream-embed iframe{border:none;width:100%;height:100%}.stream-label{top:var(--spacing-sm);left:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);z-index:10;background:#000000b3;font-size:.75rem;font-weight:600;position:absolute}.stream-embed[data-stream-id=stream1] .stream-label{color:var(--stage1-color)}.stream-embed[data-stream-id=stream2] .stream-label{color:var(--stage2-color)}.stream-embed[data-stream-id=stream3] .stream-label{color:var(--stage3-color)}.stream-loading{height:100%;color:var(--atmo-text-muted);justify-content:center;align-items:center;display:flex}.chat-panel{background:var(--atmo-surface);border-left:1px solid var(--atmo-border);flex-direction:column;height:100%;display:flex}.chat-header{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--atmo-border);display:flex}.chat-header h3{font-size:.875rem;font-weight:600}.chat-filter{padding:var(--spacing-xs) var(--spacing-sm);background:var(--atmo-surface-light);border:1px solid var(--atmo-border);border-radius:var(--radius-sm);color:var(--atmo-text);flex:1;font-size:.75rem}.chat-status{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:.75rem}.chat-status.connected{color:#86efac}.chat-status.disconnected{color:var(--atmo-text-muted)}.chat-messages{padding:var(--spacing-sm);flex:1;overflow-y:auto}.chat-message{padding:var(--spacing-xs) 0;font-size:.875rem;line-height:1.4}.chat-stage{margin-right:var(--spacing-xs);font-size:.7rem;font-weight:600}.chat-stage[data-stage=stream1]{color:var(--stage1-color)}.chat-stage[data-stage=stream2]{color:var(--stage2-color)}.chat-stage[data-stage=stream3]{color:var(--stage3-color)}.chat-handle{color:var(--atmo-primary);margin-right:var(--spacing-xs);font-weight:500}.chat-text{color:var(--atmo-text)}.chat-input-container{padding:var(--spacing-md);border-top:1px solid var(--atmo-border)}.auth-form{gap:var(--spacing-sm);display:flex}.auth-handle{padding:var(--spacing-sm);background:var(--atmo-surface-light);border:1px solid var(--atmo-border);border-radius:var(--radius-sm);color:var(--atmo-text);flex:1;font-size:.875rem}.auth-btn,.send-btn,.sign-out-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--atmo-primary);border-radius:var(--radius-sm);color:var(--atmo-dark);cursor:pointer;border:none;font-weight:500;transition:opacity .2s}.auth-btn:hover,.send-btn:hover{opacity:.9}.auth-btn:disabled,.send-btn:disabled{opacity:.5;cursor:not-allowed}.sign-out-btn{border:1px solid var(--atmo-border);color:var(--atmo-text-muted);padding:var(--spacing-xs) var(--spacing-sm);background:0 0;font-size:.75rem}.sign-out-btn:hover{border-color:var(--atmo-text-muted);color:var(--atmo-text)}.auth-hint{margin-top:var(--spacing-sm);color:var(--atmo-text-muted);text-align:center;font-size:.75rem}.user-info{margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:center;display:flex}.user-handle{color:var(--atmo-primary);font-size:.875rem;font-weight:500}.chat-form{gap:var(--spacing-sm);display:flex}.stream-select{padding:var(--spacing-sm);background:var(--atmo-surface-light);border:1px solid var(--atmo-border);border-radius:var(--radius-sm);color:var(--atmo-text);font-size:.875rem}.chat-text-input{padding:var(--spacing-sm);background:var(--atmo-surface-light);border:1px solid var(--atmo-border);border-radius:var(--radius-sm);color:var(--atmo-text);flex:1;font-size:.875rem}.chat-text-input:focus,.auth-handle:focus{border-color:var(--atmo-primary);outline:none}@media (width<=768px){.app-header{gap:var(--spacing-sm);flex-direction:column}.layout-label{display:none}.floating-chat-container{width:100%}.chat-toggle-label{display:none}}.layout{width:100%;height:100%;padding:var(--spacing-md)}.equal-grid-layout{gap:var(--spacing-md);grid-template-columns:repeat(3,1fr);display:grid}.equal-grid-layout .stream-embed{aspect-ratio:16/9}@media (width<=1024px){.equal-grid-layout{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.equal-grid-layout{grid-template-columns:1fr}}.featured-layout{gap:var(--spacing-md);flex-direction:column;display:flex}.featured-main{flex:2;min-height:0}.featured-main .stream-embed{height:100%}.featured-thumbnails{gap:var(--spacing-md);flex:1;grid-template-columns:repeat(2,1fr);min-height:150px;display:grid}.featured-thumbnails .stream-embed{height:100%;transition:transform .2s,box-shadow .2s}.featured-thumbnails .stream-embed:hover{transform:scale(1.02);box-shadow:0 0 20px #e4e4e733}@media (width<=768px){.featured-thumbnails{grid-template-columns:1fr}}.carousel-layout{gap:var(--spacing-md);flex-direction:column;display:flex}.carousel-tabs{gap:var(--spacing-sm);flex-shrink:0;justify-content:center;display:flex}.carousel-tab{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--atmo-surface);border:1px solid var(--atmo-border);border-radius:var(--radius-md);color:var(--atmo-text-muted);cursor:pointer;transition:all .2s;display:flex}.carousel-tab:hover{border-color:var(--atmo-primary);color:var(--atmo-text)}.carousel-tab.active{background:var(--atmo-primary);border-color:var(--atmo-primary);color:#fff}.tab-key{border-radius:var(--radius-sm);background:#0000004d;justify-content:center;align-items:center;width:20px;height:20px;font-size:.75rem;font-weight:600;display:inline-flex}.carousel-stream{flex:1;min-height:0}.carousel-stream .stream-embed{height:100%}.pip-layout{position:relative}.pip-main{width:100%;height:100%}.pip-main .stream-embed{height:100%}.pip-thumbnails{pointer-events:none;position:absolute;inset:0}.pip-stream{pointer-events:all;border:2px solid var(--atmo-border);cursor:move;transition:box-shadow .2s;box-shadow:0 4px 20px #00000080}.pip-stream:hover{border-color:var(--atmo-primary);box-shadow:0 4px 30px #e4e4e74d}.pip-stream.dragging{box-shadow:0 8px 40px #000000b3;z-index:1000!important}.pip-stream .stream-label{cursor:move}.split-chat-layout{grid-template-columns:1fr 350px;gap:0;padding:0;display:grid}.split-streams{gap:var(--spacing-md);padding:var(--spacing-md);flex-direction:column;display:flex}.split-top-row{gap:var(--spacing-md);flex:1;grid-template-columns:repeat(2,1fr);min-height:0;display:grid}.split-top-row .stream-embed{height:100%}.split-bottom-row{flex:1;min-height:0}.split-bottom-row .stream-embed{height:100%}.split-chat{flex-direction:column;min-height:0;display:flex}.split-chat .chat-panel{flex:1;min-height:0}@media (width<=1024px){.split-chat-layout{grid-template-rows:1fr auto;grid-template-columns:1fr}.split-chat{border-left:none;border-top:1px solid var(--atmo-border);height:300px}}@media (width<=640px){.split-top-row{grid-template-columns:1fr}}