:root,:root[data-theme=dark]{--bg: #0b0d12;--bg-2: #12151c;--panel: #161a22;--panel-2: #1e232d;--border: #2a2f3a;--text: #eef1f6;--muted: #98a1b0;--primary: #4f8cff;--primary-contrast: #ffffff;--danger: #f04747;--shadow: 0 12px 40px rgba(0, 0, 0, .45);--tile-bg: #05070a}:root[data-theme=light]{--bg: #f4f6fb;--bg-2: #ffffff;--panel: #ffffff;--panel-2: #f1f4f9;--border: #e2e7ef;--text: #131720;--muted: #5c6675;--primary: #2563eb;--primary-contrast: #ffffff;--danger: #e11d48;--shadow: 0 12px 40px rgba(20, 30, 60, .12);--tile-bg: #dfe4ec}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:11px 18px;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer;transition:filter .15s,transform .05s,background .15s}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--primary);border-color:transparent;color:var(--primary-contrast);font-weight:600}.btn.ghost{background:transparent}.btn.small{padding:8px 14px;font-size:13px;border-radius:9px}.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}.icon-btn:hover{background:var(--panel-2);color:var(--text)}.icon-btn.send{background:var(--primary);color:var(--primary-contrast);border:none}input{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:15px;width:100%;transition:border-color .15s,box-shadow .15s}input::placeholder{color:var(--muted)}input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}.landing,.centered{min-height:100%;display:grid;place-items:center;padding:24px;position:relative}.theme-toggle{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer}.theme-toggle:hover{filter:brightness(1.08)}.landing-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:36px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:30px;letter-spacing:-.02em}.brand-logo{height:40px;width:auto;object-fit:contain}.subtitle{color:var(--muted);margin:0;font-size:14.5px;line-height:1.5}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;color:var(--muted)}.divider{display:flex;align-items:center;color:var(--muted);font-size:12px;gap:12px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.join-row{display:flex;gap:10px}.join-row input{flex:1}.join-row .btn{padding:11px 15px}.footer-hint{position:absolute;bottom:22px;color:var(--muted);font-size:12.5px}.room{height:100%;display:flex;flex-direction:column}.room-header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--panel)}.room-info{display:flex;align-items:center;gap:14px;font-size:14px}.room-logo{height:26px;width:auto;object-fit:contain}.room-code{color:var(--muted)}.room-code strong{color:var(--text);letter-spacing:.03em}.room-badge{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--border);padding:5px 11px;border-radius:999px;font-size:12.5px;color:var(--text)}.room-locked{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);padding:3px 9px;border-radius:999px}.room-timer{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.room-body{flex:1;display:flex;min-height:0}.stage-wrap{flex:1;position:relative;display:flex;min-height:0;min-width:0}.stage{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}.grid{flex:1;min-height:0;display:grid;gap:14px;padding:18px}.grid-1{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr 1fr}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.grid-5,.grid-6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.grid-7,.grid-8,.grid-9{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}@media (max-width: 640px){.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:minmax(120px,1fr);overflow-y:auto}}.pager{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0 12px;flex-shrink:0}.pager-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer}.pager-btn:hover:not(:disabled){border-color:var(--primary)}.pager-btn:disabled{opacity:.4;cursor:default}.pager-label{font-size:12px;color:var(--muted);min-width:42px;text-align:center}.spotlight{display:flex;flex-direction:column;gap:12px;padding:18px}.stage-main{flex:1;min-height:0;display:flex}.stage-main .tile{flex:1}.stage-main .tile.pinned video{object-fit:contain;background:#000}.filmstrip-wrap{flex-shrink:0}.filmstrip-wrap .pager{padding:6px 0 0}.filmstrip{display:flex;gap:12px;height:132px;flex-shrink:0;overflow-x:auto}.filmstrip .tile{aspect-ratio:16 / 9;height:100%;flex:0 0 auto}.tile{position:relative;background:var(--tile-bg);border-radius:16px;overflow:hidden;border:1px solid var(--border);min-height:0;box-shadow:var(--shadow)}.tile video{width:100%;height:100%;object-fit:cover;display:block}.tile video.mirrored{transform:scaleX(-1)}.tile.screen video{object-fit:contain;background:#000}.tile:fullscreen,.tile:-webkit-full-screen{border:none;border-radius:0;background:#000;box-shadow:none}.tile:fullscreen video,.tile:-webkit-full-screen video{object-fit:contain}.tile-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.tile-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--primary-contrast);font-size:26px;font-weight:600}.tile-name{position:absolute;bottom:10px;left:10px;display:flex;align-items:center;gap:7px;background:#0000008c;color:#fff;padding:5px 11px;border-radius:8px;font-size:13px;max-width:calc(100% - 20px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tile-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-you{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;background:var(--primary);padding:2px 6px;border-radius:5px}.tile-mic-off{color:var(--danger);flex-shrink:0}.tile-crown{color:#f5b544;flex-shrink:0}.tile.speaking{border-color:var(--primary)}.tile.speaking:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:15px;border:3px solid var(--primary);pointer-events:none}.tile-top{position:absolute;top:10px;left:10px;display:flex;gap:6px}.tile-chip{display:inline-flex;align-items:center;gap:5px;background:#0009;color:#fff;font-size:11px;padding:4px 8px;border-radius:7px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tile-chip.share{background:var(--primary)}.tile-chip.warn{background:var(--danger)}.tile-hand{position:absolute;top:10px;right:46px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f5b544;color:#1a1206;animation:hand-wave 1.6s ease-in-out infinite}@keyframes hand-wave{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}.tile-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transition:opacity .15s}.tile-action{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;border:none;background:#0000008c;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tile-action:hover,.tile-action.on{background:var(--primary)}.tile:hover .tile-actions,.tile.pinned .tile-actions{opacity:1}@media (hover: none){.tile-actions{opacity:1}}.tile{cursor:pointer}.tile.selected{border-color:color-mix(in srgb,var(--primary) 60%,transparent)}.stage-main .tile.selected{border-color:var(--border)}.controls{display:flex;justify-content:center;gap:10px;padding:14px;background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap}.ctrl{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:14px;cursor:pointer;min-width:74px;transition:filter .15s,border-color .15s,transform .05s}.ctrl span{font-size:11px;color:var(--muted)}.ctrl:hover{filter:brightness(1.08)}.ctrl:active{transform:translateY(1px)}.ctrl.off{background:color-mix(in srgb,var(--danger) 16%,var(--panel-2));border-color:var(--danger)}.ctrl.off span{color:var(--text)}.ctrl.active{border-color:var(--primary)}.ctrl.active span{color:var(--primary)}.ctrl.leave{background:var(--danger);border-color:var(--danger);color:#fff}.ctrl.leave span{color:#fff}.ctrl:disabled{opacity:.45;cursor:not-allowed;filter:none}.ctrl:disabled:active{transform:none}.panel,.bg-panel{width:328px;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0}.panel-header,.bg-panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:15px}.panel-note{color:var(--muted);font-size:12px;margin:0 0 4px;text-transform:uppercase;letter-spacing:.05em}.hint{color:var(--muted);font-size:12.5px;line-height:1.45;margin:0}.chat-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.chat-msg{display:flex;flex-direction:column;gap:3px}.chat-meta{display:flex;align-items:baseline;gap:8px}.chat-msg strong{font-size:12px;color:var(--primary)}.chat-msg.mine strong{color:var(--muted)}.chat-meta time{font-size:11px;color:var(--muted)}.chat-msg span{font-size:14px;line-height:1.4}.chat-system{align-self:center;font-size:12px;color:var(--muted);background:var(--panel-2);padding:4px 10px;border-radius:999px}.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}.chat-input input{flex:1}.bg-note{margin:12px 16px 0;font-size:12.5px;color:var(--muted);background:var(--panel-2);padding:10px 12px;border-radius:10px}.bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;overflow-y:auto}.bg-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0;font-size:12px}.bg-swatch:disabled{opacity:.4;cursor:not-allowed}.bg-swatch span{font-weight:500}.bg-swatch.sel span{color:var(--primary)}.bg-swatch-img,.bg-swatch-plain,.bg-swatch-blur{width:100%;aspect-ratio:16 / 10;border-radius:12px;border:2px solid var(--border);object-fit:cover;display:grid;place-items:center;color:var(--text);transition:border-color .15s}.bg-swatch-plain{background:var(--panel-2)}.bg-swatch-blur{background:linear-gradient(135deg,var(--panel-2),var(--border));filter:blur(0)}.bg-swatch.sel .bg-swatch-img,.bg-swatch.sel .bg-swatch-plain,.bg-swatch.sel .bg-swatch-blur{border-color:var(--primary)}.bg-check{position:absolute;top:6px;right:6px;background:var(--primary);color:#fff;border-radius:50%;padding:2px}.bg-swatch.upload .bg-swatch-plain{border-style:dashed;color:var(--muted)}.prejoin{min-height:100%;display:flex;align-items:center;justify-content:center;gap:32px;padding:32px;flex-wrap:wrap}.prejoin-preview{position:relative;width:min(640px,100%);aspect-ratio:16 / 9;background:var(--tile-bg);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.prejoin-preview video{width:100%;height:100%;object-fit:cover;display:block}.prejoin-preview video.mirrored{transform:scaleX(-1)}.prejoin-off{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;align-content:center;gap:10px;padding:24px;text-align:center;color:var(--muted);background:var(--tile-bg);font-size:14px}.prejoin-toggles{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;gap:12px}.round{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:#0000008c;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:filter .15s}.round:hover{filter:brightness(1.2)}.round.off{background:var(--danger);border-color:var(--danger)}.prejoin-side{width:100%;max-width:320px;display:flex;flex-direction:column;gap:16px}.prejoin-side h2{margin:0;font-size:24px;letter-spacing:-.02em}select{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px;width:100%;cursor:pointer}select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}.lbl{display:inline-flex;align-items:center;gap:6px}.pt-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:4px}.pt-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:11px}.pt-row:hover{background:var(--panel-2)}.pt-avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--primary-contrast);font-size:12.5px;font-weight:600}.pt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.pt-name{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--text)}.pt-tag{font-size:10px;text-transform:uppercase;letter-spacing:.05em;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);padding:1px 5px;border-radius:5px}.pt-tag.host{display:inline-flex;align-items:center;gap:3px;background:color-mix(in srgb,#f5b544 20%,transparent);border-color:#f5b544;color:#f5b544}.pt-tag.cohost{display:inline-flex;align-items:center;gap:3px;background:color-mix(in srgb,var(--primary) 18%,transparent);border-color:var(--primary);color:var(--primary)}.pt-state{display:flex;align-items:center;gap:7px;color:var(--muted)}.pt-state .off{color:var(--danger)}.pt-state .on-hand{color:#f5b544}.pt-state .on-share{color:var(--primary)}.pt-actions{display:flex;gap:4px}.icon-btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.waiting-list{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--panel-2);display:flex;flex-direction:column;gap:10px}.waiting-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.waiting-actions{display:flex;gap:6px}.host-tools{border-top:1px solid var(--border);padding:14px;display:flex;flex-direction:column;gap:9px}.btn.danger-btn{background:var(--danger);border-color:var(--danger);color:#fff}.settings-body{padding:16px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}.shortcuts{display:flex;flex-direction:column;gap:8px}.shortcuts div{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.shortcuts span{margin-left:auto}kbd{background:var(--panel-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:2px 6px;font-size:11px;font-family:inherit;color:var(--text)}.reaction-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:10}.reaction-float{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;gap:4px;animation:float-up 4s ease-out forwards}.reaction-emoji{font-size:44px;line-height:1}.reaction-name{font-size:11px;color:#fff;background:#0000008c;padding:2px 8px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes float-up{0%{transform:translateY(0) scale(.6);opacity:0}12%{transform:translateY(-30px) scale(1);opacity:1}75%{opacity:1}to{transform:translateY(-70vh) scale(1);opacity:0}}.reaction-picker{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:12px;display:flex;gap:4px;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:30}.reaction-btn{width:42px;height:42px;font-size:22px;border:none;border-radius:10px;background:transparent;cursor:pointer;transition:transform .12s,background .12s}.reaction-btn:hover{background:var(--panel-2);transform:scale(1.18)}.controls{position:relative}.badge{position:absolute;top:4px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff!important;font-size:10px!important;font-weight:600;display:grid;place-items:center}.toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);padding:11px 18px;border-radius:12px;font-size:14px;z-index:40}.knock-toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--primary);box-shadow:var(--shadow);padding:11px 16px;border-radius:12px;font-size:14px;color:var(--text);cursor:pointer;z-index:40}.knock-cta{color:var(--primary);font-weight:600}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 720px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;grid-template-rows:none}.panel,.bg-panel{position:absolute;right:0;top:0;bottom:0;z-index:20;box-shadow:var(--shadow)}.ctrl{min-width:60px;padding:9px 11px}.ctrl span{font-size:10px}.filmstrip{height:96px}.prejoin{flex-direction:column;gap:20px;padding:20px}.room-timer,.room-code{display:none}}.route-loading{min-height:100vh;background:var(--bg)}.label-hint{color:var(--muted);font-weight:400;font-size:11px}