:root{--rail:#12151d;--panel:#202532;--panel-2:#252b39;--profile:#171b25;--canvas:#2c3241;--surface:#181c26;--ink:#f5f7fb;--ink-soft:#dce3ef;--muted:#9ca8ba;--line:#3a4253;--hover:#343b4d;--message-hover:#11141c38;--input:#383f51;--brand:#4d77ff;--brand-strong:#7fa0ff;--brand-soft:#4d77ff33;--accent:#32c7a6;--accent-soft:#32c7a629;--warning-bg:#3e321f;--warning-line:#927242;--warning-ink:#ffd995;--danger:#f06f7f;--overlay:#080a0fb8;--overlay-shadow:0 28px 80px #00000070;color:var(--ink);background:var(--surface);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Avenir Next,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}::selection{color:#fff;background:var(--brand)}.app-shell{background:var(--surface);min-height:100svh;color:var(--ink);grid-template-columns:72px minmax(254px,286px) minmax(0,1fr) minmax(252px,316px);display:grid;position:relative;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;border:0}select,input{color:var(--ink)}.rail{background:var(--rail);border-right:1px solid #ffffff0a;flex-direction:column;align-items:center;gap:10px;padding:12px 10px;display:flex}.rail-spacer{flex:1}.workspace-mark,.icon-button{width:44px;height:44px;color:var(--muted);background:0 0;border-radius:14px;place-items:center;transition:border-radius .15s,background .15s,color .15s,transform .15s;display:inline-grid}.workspace-mark{color:#fff;background:linear-gradient(135deg, var(--brand), var(--accent));font-weight:850;position:relative}.workspace-mark.active:before{content:"";background:#fff;border-radius:0 999px 999px 0;width:4px;height:34px;position:absolute;left:-12px}.workspace-mark.secondary{color:var(--muted);background:var(--panel)}.workspace-mark.add{color:var(--accent);background:var(--panel)}.workspace-mark:hover,.icon-button:hover{color:#fff;background:var(--hover);border-radius:10px}.sidebar{background:var(--panel);border-right:1px solid #ffffff0d;flex-direction:column;min-width:0;min-height:100svh;display:flex}.workspace-header{background:#0000001f;border-bottom:1px solid #00000047;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:8px;min-height:64px;padding:13px 13px 13px 16px;display:grid;box-shadow:0 1px #ffffff08}.workspace-header h1{margin:0;font-size:17px;line-height:1.15}.workspace-header p{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin:3px 0 0;font-size:12px;overflow:hidden}.server-boost{color:var(--brand-strong);background:var(--brand-soft);border:1px solid #7fa0ff2e;border-radius:8px;align-items:center;gap:8px;margin:12px 12px 4px;padding:9px 10px;font-size:12px;line-height:1.25;display:flex}.channel-section{padding:8px 8px 0}.section-title{color:var(--muted);letter-spacing:.03em;justify-content:space-between;align-items:center;gap:8px;padding:8px 9px 5px;font-size:11px;font-weight:850;display:flex}.section-title.compact{padding-inline:0}.channel-list{gap:1px;display:grid}.channel,.voice-room{width:100%;min-height:34px;color:var(--muted);text-align:left;background:0 0;border-radius:5px;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:7px;padding:0 8px;display:grid}.channel span,.voice-room span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.channel:hover,.voice-room:hover,.channel.active,.voice-room.active{color:var(--ink);background:var(--hover)}.channel.active,.voice-room.active{font-weight:700}.channel b{color:#fff;background:var(--danger);border-radius:999px;place-items:center;min-width:22px;height:20px;font-size:11px;display:inline-grid}.channel-lock{color:var(--muted);opacity:.72}.voice-room small{color:var(--muted);font-size:11px}.voice-room.disabled{opacity:.58}.invite-box{background:#0000001f;border:1px solid #ffffff12;border-radius:8px;margin:12px;padding:11px}.invite-controls{grid-template-columns:minmax(0,1fr) 58px;gap:8px;display:grid}.invite-controls select,.member select,.auth-form input{background:var(--input);border:1px solid #ffffff14;border-radius:6px;outline:0;min-width:0;height:36px}.invite-controls select,.member select{padding:0 8px}.invite-controls button,.invite-code{color:#fff;background:var(--brand);border-radius:6px;min-height:36px}.invite-code{width:100%;color:var(--ink);background:var(--accent-soft);grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:9px;padding:0 10px;display:grid}.invite-code span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.invite-code small{color:var(--accent)}.invite-meta{color:var(--muted);margin:7px 0 0;font-size:11px;line-height:1.4}.profile-bar{background:var(--profile);border-top:1px solid #ffffff0a;grid-template-columns:36px minmax(0,1fr) 28px 28px 28px;align-items:center;gap:8px;min-height:58px;margin-top:auto;padding:9px;display:grid}.profile-bar button{width:28px;height:28px;color:var(--muted);background:0 0;border-radius:5px;place-items:center;display:inline-grid}.profile-bar button:hover{color:var(--ink);background:var(--hover)}.profile-bar strong,.profile-bar span,.member strong,.member span{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.profile-bar strong{font-size:13px}.profile-bar span,.member span{color:var(--muted);font-size:12px}.conversation{background:var(--canvas);grid-template-rows:58px auto auto minmax(0,1fr) 72px;min-width:0;min-height:100svh;display:grid}.topbar{background:var(--canvas);border-bottom:1px solid #0000003d;align-items:center;gap:12px;padding:0 16px;display:flex}.channel-heading{flex:1;align-items:center;gap:9px;min-width:0;display:flex}.channel-heading svg{color:var(--muted);flex:none}.channel-heading h2{margin:0;font-size:17px}.channel-heading p{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin:2px 0 0;font-size:12px;overflow:hidden}.topbar-actions{align-items:center;gap:4px;display:flex}.realtime-pill{min-height:28px;color:var(--muted);background:#0000002e;border-radius:999px;align-items:center;padding:0 9px;font-size:12px;font-weight:800;display:inline-flex}.realtime-pill.live{color:#b9ffe9;background:#32c7a629}.realtime-pill.connecting{color:#ffe1a3}.realtime-pill.offline{color:#ffadb7}.readonly-pill{color:#ffe1a3;background:#f4c95d21;border-radius:999px;align-items:center;gap:5px;min-height:28px;padding:0 9px;font-size:12px;font-weight:850;display:inline-flex}.search{width:218px;min-height:34px;color:var(--muted);background:#0000002e;border-radius:5px;align-items:center;gap:8px;padding:0 10px;display:flex}.search input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0}.notice{border:1px solid var(--warning-line);color:var(--warning-ink);background:var(--warning-bg);border-radius:7px;margin:10px 16px 0;padding:9px 11px;font-size:13px}.stage-strip{border-bottom:1px solid #00000029;align-items:center;gap:8px;padding:10px 16px;display:flex}.stage-strip button{min-height:32px;color:var(--ink-soft);background:var(--panel-2);border-radius:6px;align-items:center;gap:6px;padding:0 10px;display:inline-flex}.stage-strip button.active{color:#fff;background:var(--brand)}.stage-strip span{color:var(--muted);font-size:12px}.room-panel{background:linear-gradient(135deg,#32c7a61f,#4d77ff14),#00000021;border:1px solid #ffffff14;border-radius:8px;grid-template-columns:minmax(232px,330px) minmax(0,1fr);gap:12px;margin:12px 16px 0;padding:12px;display:grid}.room-panel.video{background:linear-gradient(135deg,#4d77ff29,#f06f7f14),#00000021}.room-copy{min-width:0}.room-copy h3{margin:0;font-size:18px}.room-copy p{color:var(--muted);margin:6px 0 0;line-height:1.45}.room-badges{flex-wrap:wrap;gap:7px;margin-top:12px;display:flex}.room-badges span{min-height:24px;color:var(--muted);background:#0003;border-radius:999px;align-items:center;padding:0 8px;font-size:12px;font-weight:800;display:inline-flex}.room-badges span.live{color:#b9ffe9;background:#32c7a62e}.room-stage{min-width:0}.stream-screen,.call-grid{width:100%;min-height:198px}.stream-screen iframe,.stream-screen video{background:#090c12;border:0;border-radius:7px;width:100%;height:100%;min-height:198px}.empty-stage{min-height:198px;color:var(--muted);text-align:center;background:#00000029;border:1px dashed #ffffff1f;border-radius:7px;align-content:center;place-items:center;gap:8px;display:grid}.empty-stage strong{color:var(--ink)}.empty-stage span{max-width:260px;font-size:13px;line-height:1.45}.call-grid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;display:grid}.call-tile{background:#0000002e;border:1px solid #ffffff14;border-radius:8px;align-content:center;place-items:center;gap:7px;min-height:198px;display:grid;position:relative;overflow:hidden}.call-tile.on{border-color:#32c7a65c;box-shadow:inset 0 0 0 1px #32c7a61f}.call-tile video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.call-tile video+strong,.call-tile video+strong+span{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000075;border-radius:999px;padding:3px 7px}.call-tile strong,.call-tile span,.call-tile .avatar,.call-tile svg{z-index:1;position:relative}.call-tile strong{color:var(--ink)}.call-tile span{color:var(--muted);font-size:12px}.avatar.large{width:58px;height:58px;font-size:16px}.room-form{grid-column:1/-1;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr) 92px 92px;gap:8px;display:grid}.room-form input{min-width:0;height:36px;color:var(--ink);background:#0000002e;border:1px solid #ffffff14;border-radius:6px;outline:0;padding:0 10px}.room-form button,.call-controls button{color:#fff;background:var(--brand);border-radius:6px;justify-content:center;align-items:center;gap:6px;min-height:36px;display:inline-flex}.room-form .danger-action,.call-controls button:first-child{background:var(--danger)}.call-controls{flex-wrap:wrap;grid-column:1/-1;gap:8px;display:flex}.call-controls button{background:var(--panel-2);padding:0 12px}.call-controls button:disabled{cursor:not-allowed;opacity:.48}.signal-log{flex-wrap:wrap;grid-column:1/-1;gap:6px;display:flex}.signal-log span{color:var(--muted);background:#0000002e;border-radius:999px;padding:5px 8px;font-size:12px}.watch-panel{background:linear-gradient(135deg,#4d77ff24,#32c7a614),#00000024;border:1px solid #ffffff14;border-radius:8px;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:14px;margin:12px 16px 0;padding:12px;display:grid}.watch-copy{flex-direction:column;justify-content:space-between;gap:12px;min-width:0;display:flex}.watch-kicker{color:var(--brand-strong);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;font-size:11px;font-weight:850;display:block}.watch-copy h3{margin:0;font-size:18px}.watch-copy p{color:var(--muted);margin:6px 0 0;line-height:1.45}.watch-copy a{width:max-content;color:var(--ink);font-size:13px;font-weight:800;text-decoration:none}.watch-player{gap:8px;min-width:0;display:grid}.watch-frame{aspect-ratio:16/9;background:#0a0d13;border:0;border-radius:7px;width:100%}.watch-controls{grid-template-columns:82px 82px 118px minmax(0,1fr);align-items:center;gap:8px;display:grid}.watch-controls button,.watch-controls label{border-radius:6px;min-height:34px}.watch-controls button{color:var(--ink);background:var(--panel-2);justify-content:center;align-items:center;gap:6px;display:inline-flex}.watch-controls label{background:#0000002e;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:6px;padding:0 8px;display:grid}.watch-controls label span,.watch-controls small{color:var(--muted);white-space:nowrap;font-size:12px}.watch-controls input{width:100%;min-width:0;height:28px;color:var(--ink);background:0 0;border:0;outline:0}.watch-controls small{text-overflow:ellipsis;overflow:hidden}.watch-form{grid-column:1/-1;grid-template-columns:minmax(0,1.4fr) minmax(140px,.6fr) 88px;gap:8px;display:grid}.watch-form input{min-width:0;height:36px;color:var(--ink);background:#0000002e;border:1px solid #ffffff14;border-radius:6px;outline:0;padding:0 10px}.watch-form button{color:#fff;background:var(--brand);border-radius:6px;justify-content:center;align-items:center;gap:6px;display:inline-flex}.message-stream{align-self:stretch;min-height:0;padding:18px 12px 12px;overflow-y:auto}.loading{color:var(--muted);text-align:center;padding:18px}.message{border-radius:5px;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:8px 10px;display:grid;position:relative}.message:hover{background:var(--message-hover)}.avatar{color:#fff;background:linear-gradient(135deg,#4d77ff,#32c7a6);border-radius:50%;place-items:center;width:38px;height:38px;font-size:12px;font-weight:850;display:inline-grid}.avatar.current{border-radius:12px;width:36px;height:36px}.message-body{min-width:0}.message-meta{align-items:baseline;gap:8px;min-width:0;display:flex}.message-meta strong{color:var(--ink)}.message-meta span,.message-meta time{color:var(--muted);font-size:12px}.message p{color:var(--ink-soft);overflow-wrap:anywhere;margin:3px 0 0;line-height:1.48}.attachment-list{grid-template-columns:repeat(auto-fit,minmax(178px,260px));gap:8px;margin-top:8px;display:grid}.attachment-card{min-width:0;color:var(--ink-soft);background:#00000024;border:1px solid #ffffff12;border-radius:7px;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;padding:8px;display:grid}.attachment-card.image{grid-template-columns:58px minmax(0,1fr)}.attachment-card img{object-fit:cover;border-radius:5px;width:58px;height:42px}.attachment-icon{width:42px;height:42px;color:var(--brand-strong);background:var(--brand-soft);border-radius:5px;place-items:center;display:inline-grid}.attachment-card strong,.attachment-card small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.attachment-card small{color:var(--muted);margin-top:2px;font-size:11px}.reaction-list{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.reaction-chip,.quick-reaction{min-width:32px;height:26px;color:var(--ink-soft);background:#00000029;border:1px solid #ffffff14;border-radius:5px;justify-content:center;align-items:center;display:inline-flex}.reaction-chip{gap:5px;padding:0 8px}.reaction-chip b{color:var(--muted);font-size:12px}.reaction-chip:hover,.quick-reaction:hover,.reaction-chip.active{color:var(--ink);background:#5d7cff2e;border-color:#5d7cff94}.reaction-chip.active b{color:var(--ink)}.reaction-chip:disabled,.quick-reaction:disabled{cursor:progress;opacity:.62}.message-actions{opacity:0;pointer-events:none;background:#1d2330;border:1px solid #ffffff14;border-radius:6px;align-items:center;gap:2px;padding:3px;transition:opacity .14s,transform .14s;display:inline-flex;position:absolute;top:-12px;right:12px;transform:translateY(4px);box-shadow:0 10px 28px #00000047}.message:hover .message-actions,.message:focus-within .message-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.message-more{width:48px;height:26px;color:var(--muted);background:0 0;border-radius:5px;justify-content:center;align-self:start;align-items:center;gap:1px;display:inline-flex}.message-more:hover{color:var(--ink);background:var(--hover)}.composer{background:var(--input);border-radius:8px;grid-template-columns:38px minmax(0,1fr) 38px;align-self:center;align-items:center;gap:8px;min-height:52px;margin:0 16px 16px;padding:7px;display:grid}.composer-attachments{flex-wrap:wrap;grid-column:1/-1;gap:7px;min-width:0;display:flex}.composer-file{min-width:0;max-width:260px;min-height:30px;color:var(--ink-soft);background:#00000029;border:1px solid #ffffff14;border-radius:6px;grid-template-columns:16px minmax(0,1fr) auto 24px;align-items:center;gap:6px;padding:3px 4px 3px 8px;display:inline-grid}.composer-file b{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.composer-file small{color:var(--muted);font-size:11px}.composer .composer-file button{border-radius:5px;width:24px;height:24px}.file-input{display:none}.composer button{width:38px;height:38px;color:var(--muted);background:0 0;border-radius:6px;place-items:center;display:inline-grid}.composer button:hover,.composer .send-button{color:#fff;background:var(--brand)}.composer button:disabled,.composer .send-button:disabled{cursor:not-allowed;color:var(--muted);opacity:.58;background:#ffffff0a}.composer>input:not(.file-input){min-width:0;height:38px;color:var(--ink);background:0 0;border:0;outline:0}.composer>input:disabled{cursor:not-allowed;color:var(--muted)}.member-panel{background:var(--panel);border-left:1px solid #ffffff0d;min-height:100svh;padding:15px 12px;overflow-y:auto}.member-heading{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:8px;font-size:12px;font-weight:850;display:flex}.role-summary{flex-wrap:wrap;gap:6px;margin:12px 0 10px;display:flex}.role-summary span{border:1px solid;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800}.channel-permissions{background:#00000021;border:1px solid #ffffff12;border-radius:8px;gap:6px;margin:12px 0 14px;padding:10px;display:grid}.permission-heading{color:var(--muted);align-items:center;gap:7px;margin-bottom:2px;font-size:11px;font-weight:850;display:flex}.permission-row{border-top:1px solid #ffffff0d;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;min-width:0;padding:6px 0;display:grid}.permission-row>span{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;font-weight:850;overflow:hidden}.permission-row label{color:var(--ink-soft);align-items:center;gap:4px;font-size:11px;font-weight:750;display:inline-flex}.permission-row input{width:14px;height:14px;accent-color:var(--brand)}.member-list{gap:14px;display:grid}.member-group h3{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:8px 6px;font-size:11px}.member{border-radius:6px;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:9px;padding:7px;display:grid;position:relative}.member:has(select){grid-template-columns:36px minmax(0,1fr) 92px}.member:hover{background:var(--hover)}.member .avatar{width:34px;height:34px;font-size:11px}.member select{height:30px;font-size:12px}.presence{border:2px solid var(--panel);background:var(--muted);border-radius:50%;width:11px;height:11px;position:absolute;bottom:6px;left:32px}.presence.online{background:#32c77b}.presence.away{background:#f1b95d}.presence.busy{background:#f06f7f}.auth-layer{z-index:50;background:var(--overlay);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);place-items:center;padding:18px;display:grid;position:fixed;inset:0}.auth-panel{width:min(100%,438px);box-shadow:var(--overlay-shadow);background:#232937;border:1px solid #ffffff1f;border-radius:8px;padding:28px;position:relative}.auth-close{width:34px;height:34px;color:var(--muted);background:0 0;border-radius:6px;place-items:center;display:inline-grid;position:absolute;top:12px;right:12px}.auth-close:hover{color:var(--ink);background:var(--hover)}.auth-copy{gap:10px;margin-bottom:18px;display:grid}.auth-copy svg{color:var(--brand-strong)}.auth-copy h2{margin:0;font-size:24px}.auth-copy p{color:var(--muted);margin:0;line-height:1.55}.auth-form{gap:12px;display:grid}.auth-form label{color:var(--ink-soft);gap:7px;font-size:13px;font-weight:700;display:grid}.auth-form input{width:100%;height:42px;padding:0 11px}.primary-auth{color:#fff;background:var(--brand);border-radius:7px;min-height:44px;margin-top:4px;font-weight:800}.auth-actions{justify-content:space-between;align-items:center;gap:10px;margin-top:14px;display:flex}.auth-actions button{min-height:38px;color:var(--ink-soft);background:var(--panel-2);border-radius:6px;align-items:center;gap:7px;padding:0 11px;display:inline-flex}.mobile-only{display:none}@media (width<=1180px){.app-shell{grid-template-columns:68px minmax(238px,274px) minmax(0,1fr)}.member-panel{display:none}}@media (width<=780px){.app-shell{grid-template-columns:1fr}.rail{display:none}.sidebar{z-index:20;width:min(88vw,322px);box-shadow:var(--overlay-shadow);transition:transform .18s;position:fixed;inset:0 auto 0 0;transform:translate(-102%)}.sidebar.open{transform:translate(0)}.workspace-header{grid-template-columns:minmax(0,1fr) 42px 42px}.conversation{grid-template-rows:58px auto auto minmax(0,1fr) 68px;min-height:100svh}.topbar{padding:0 10px}.topbar-actions .icon-button,.search{display:none}.stage-strip{padding:8px 10px;overflow-x:auto}.stage-strip span{display:none}.watch-panel,.room-panel{grid-template-columns:1fr;margin:8px 8px 0}.call-grid,.room-form{grid-template-columns:1fr}.watch-controls{grid-template-columns:1fr 1fr}.watch-controls label,.watch-controls small{grid-column:1/-1}.watch-form{grid-template-columns:1fr}.message-stream{padding:12px 6px}.message{grid-template-columns:38px minmax(0,1fr);gap:9px;padding:8px 7px}.message .avatar{width:34px;height:34px}.message-actions{opacity:1;pointer-events:auto;box-shadow:none;grid-column:2;justify-self:start;margin-top:-2px;position:static;transform:none}.composer{margin:0 8px 10px}.auth-panel{padding:22px}.mobile-only{display:inline-grid}}