:root{color-scheme:dark;font-family:Aptos,Segoe UI,Microsoft YaHei,sans-serif;background:#101214;color:#f4f0e8;--panel: #191c1f;--panel-strong: #20252a;--panel-soft: rgba(255, 255, 255, .07);--line: rgba(244, 240, 232, .14);--text: #f4f0e8;--muted: #9da7aa;--teal: #42d6b5;--amber: #f1b94e;--red: #f06d62;--blue: #6da9ff;--shadow: rgba(0, 0, 0, .36)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,rgba(66,214,181,.08),transparent 34%),linear-gradient(225deg,rgba(241,185,78,.1),transparent 32%),#101214}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.68}.shell{min-height:100vh;width:min(1120px,100%);margin:0 auto;padding:clamp(18px,4vw,42px)}.lobby-shell{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:clamp(18px,4vw,44px);align-items:stretch}.access-panel,.signal-panel,.host-drawer{border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);box-shadow:0 24px 80px var(--shadow)}.access-panel{border-radius:8px;padding:clamp(18px,4vw,32px);align-self:center}.brand-row{display:flex;align-items:center;gap:14px;margin-bottom:28px}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(66,214,181,.4);border-radius:8px;background:#0e2a27;color:var(--teal)}.eyebrow{margin:0 0 5px;color:var(--teal);font-size:.75rem;text-transform:uppercase}h1{margin:0;font-size:clamp(1.55rem,3vw,2.3rem);line-height:1.05;letter-spacing:0}.tabbar{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:22px;border:1px solid var(--line);border-radius:8px;background:#111417}.tabbar button{min-height:40px;border:0;border-radius:6px;background:transparent;color:var(--muted)}.tabbar button.active{background:var(--panel-strong);color:var(--text)}.stack{display:grid;gap:14px}label{display:grid;gap:7px;color:#d8ddd9;font-size:.92rem}input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:6px;outline:0;padding:0 13px;background:#0e1113;color:var(--text)}input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #42d6b521}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:6px;border:0;border-radius:6px;background:var(--teal);color:#071411;font-weight:700}.error-line,.call-error{margin:14px 0 0;color:#ffd5d1}.signal-panel{position:relative;min-height:520px;overflow:hidden;border-radius:8px;background:linear-gradient(160deg,#174641eb,#0d1216f5),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 52px)}.signal-rings{position:absolute;top:11%;right:12%;bottom:11%;left:12%;display:grid;place-items:center}.signal-rings span{grid-area:1 / 1;width:min(58vw,480px);aspect-ratio:1;border:1px solid rgba(244,240,232,.18);border-radius:50%;animation:pulse 3.2s ease-in-out infinite}.signal-rings span:nth-child(2){width:min(44vw,340px);border-color:#42d6b552;animation-delay:.4s}.signal-rings span:nth-child(3){width:min(28vw,210px);border-color:#f1b94e6b;animation-delay:.8s}.signal-copy{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(244,240,232,.16);border-radius:8px;background:#0c0e10b8}.signal-copy strong{color:var(--teal)}.signal-copy span{color:var(--muted)}.call-shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr;gap:14px;padding:14px 14px 100px}.room-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#101214e6}.room-bar h1{max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-code{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--line)}.room-code span{color:var(--amber);font-weight:800}.video-grid{--columns: 1;display:grid;gap:10px;grid-template-columns:repeat(var(--columns),minmax(0,1fr));align-content:center;min-height:0}.participant-tile{position:relative;overflow:hidden;min-height:210px;aspect-ratio:16 / 10;border:1px solid var(--line);border-radius:8px;background:linear-gradient(145deg,rgba(66,214,181,.18),transparent),#171b1f}.participant-tile.spotlight{width:100%;height:100%;min-height:min(68vh,760px);aspect-ratio:auto}.participant-tile video{width:100%;height:100%;display:block;object-fit:cover;background:#0c0f11}.tile-action{position:absolute;top:10px;right:10px;z-index:3;background:#0a0c0ec7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.avatar-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:linear-gradient(135deg,#212f32f2,#101214f2),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 18px)}.avatar-fallback span{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#223b39;color:var(--teal);font-size:2rem;font-weight:800}.avatar-fallback.small{position:static;width:48px;height:48px;background:transparent}.avatar-fallback.small span{width:42px;height:42px;font-size:1rem}.tile-meta{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0a0c0eb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tile-meta strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-meta span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f4f0e81a}.spotlight-layout{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:0}.spotlight-stage{min-height:0}.mini-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(86px,112px);gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.participant-mini{display:grid;place-items:center;gap:5px;min-height:86px;border:1px solid var(--line);border-radius:8px;background:#191c1fe6;color:var(--text)}.participant-mini span{width:100%;overflow:hidden;padding:0 8px;color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap}.participant-mini i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f4f0e817;color:var(--teal);font-style:normal}.control-dock{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:30;transform:translate(-50%);display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);min-height:66px;padding:9px;border:1px solid var(--line);border-radius:8px;background:#101214eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 16px 55px var(--shadow)}.connection-pill{display:inline-flex;align-items:center;min-height:42px;padding:0 12px;border-radius:6px;background:var(--panel-soft);color:var(--muted)}.connection-pill.connected{color:var(--teal)}.icon-button{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--panel-strong);color:var(--text)}.icon-button:hover{border-color:#42d6b599;color:var(--teal)}.icon-button.danger{background:#341d1d;color:#ffd2cd}.icon-button.danger:hover{border-color:#f06d62b3;color:#fff}.icon-button:disabled,.kick-button:disabled{cursor:not-allowed;opacity:.55}.host-panel{position:fixed;right:14px;top:96px;z-index:5;transition:opacity .18s ease,transform .18s ease}.host-panel.auto-hidden:not(.open){opacity:.48;transform:translate(calc(100% - 46px))}.host-toggle{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-strong);color:var(--text)}.host-panel.auto-hidden:not(.open) .host-toggle{width:42px;padding:0;justify-content:center}.host-panel.auto-hidden:not(.open) .host-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.host-drawer{width:min(320px,calc(100vw - 28px));margin-top:8px;padding:12px;border-radius:8px}.drawer-title,.member-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.drawer-title{margin-bottom:12px}.member-row{min-height:50px;border-top:1px solid var(--line)}.member-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kick-button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid rgba(240,109,98,.38);border-radius:8px;background:#341d1d;color:#ffd2cd;font-weight:800}.kick-button:hover:not(:disabled){border-color:#f06d62b8;color:#fff}.muted-line{color:var(--muted)}@keyframes pulse{0%,to{transform:scale(.96);opacity:.55}50%{transform:scale(1.04);opacity:1}}@media(min-width:760px){.video-grid{--columns: 2}}@media(min-width:1180px){.video-grid{--columns: 3}}@media(max-width:820px){.lobby-shell{grid-template-columns:1fr}.signal-panel{min-height:190px}}@media(max-width:620px){.call-shell{padding:8px 8px 88px;gap:8px}.room-bar{align-items:flex-start}.room-bar h1{max-width:52vw}.participant-tile{min-height:190px}.participant-tile.spotlight{min-height:calc(100vh - 190px)}.mini-strip{grid-auto-columns:78px}.participant-mini{min-height:78px}.control-dock{width:calc(100vw - 16px);justify-content:space-between;bottom:max(8px,env(safe-area-inset-bottom))}.connection-pill{display:none}.host-panel{top:82px;right:8px}}