.app{width:100%;max-width:640px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:.75rem}header h1{font-size:1.25rem;margin:0}.status{font-size:.8rem;padding:.25rem .65rem;border-radius:999px;background:var(--panel);border:1px solid var(--border);color:var(--muted)}.status-connected{color:#6ee7a8;border-color:#2f6b4a}.status-failed,.status-disconnected{color:#ff8a8a;border-color:#6b2f2f}.status-connecting,.status-creating-offer,.status-creating-answer,.status-awaiting-answer{color:#ffd27a;border-color:#6b5a2f}.error{background:#2a1717;border:1px solid #6b2f2f;color:#ff8a8a;padding:.65rem .85rem;border-radius:8px;font-size:.9rem}.setup{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.role-pick p{margin:0 0 1rem;color:var(--muted);line-height:1.5}.role-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.join-row{display:flex;gap:.5rem}.join-row input{flex:1;font-family:ui-monospace,SF Mono,Menlo,monospace;letter-spacing:.05em}.waiting{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}.waiting p{margin:0;color:var(--muted);line-height:1.5}.roomcode{background:#0c0e12;border:1px solid var(--border);border-radius:6px;padding:.1rem .45rem;font-family:ui-monospace,SF Mono,Menlo,monospace;color:var(--accent);letter-spacing:.05em}.waiting .copybox{width:100%}.steps{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:1.25rem}.steps li{display:flex;flex-direction:column;gap:.6rem;line-height:1.5}.copybox{border:1px solid var(--border);border-radius:8px;overflow:hidden}.copybox-head{display:flex;justify-content:space-between;align-items:center;padding:.4rem .4rem .4rem .75rem;background:#0c0e12;font-size:.8rem;color:var(--muted)}.copybox-head button{padding:.3rem .7rem;font-size:.8rem}.copybox textarea{border:none;border-radius:0;border-top:1px solid var(--border);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.7rem;word-break:break-all}.preview{position:relative;border-radius:10px;overflow:hidden;background:#000;align-self:flex-start;width:220px}.preview-video{width:100%;display:block;transform:scaleX(-1)}.preview-label{position:absolute;bottom:6px;left:8px;font-size:.7rem;color:#fff;background:#00000080;padding:2px 6px;border-radius:6px}.fscall{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;overflow:hidden}.fs-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;gap:8px;padding:8px;place-content:center;place-items:center;grid-auto-rows:1fr;transition:right .25s ease}.fs-grid.chat-open{right:360px}.fs-grid[data-count="1"]{grid-template-columns:1fr}.fs-grid[data-count="2"],.fs-grid[data-count="3"],.fs-grid[data-count="4"]{grid-template-columns:1fr 1fr}.fs-grid[data-count="3"] .tile:nth-child(3){grid-column:1 / -1;max-width:calc(50% - 4px)}.tile{position:relative;width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:16 / 9;margin:auto;background:#000;border-radius:12px;overflow:hidden}.tile-video{width:100%;height:100%;object-fit:contain;background:#000}.tile-video-mirror{transform:scaleX(-1)}.tile-avatar{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1f2b,#11141b)}.avatar-circle{display:flex;align-items:center;justify-content:center;width:30%;max-width:110px;min-width:52px;aspect-ratio:1;border-radius:50%;color:#fff;font-weight:600;font-size:clamp(1.1rem,3vw,2.4rem);letter-spacing:.04em;box-shadow:0 6px 20px #0006}.tile-label{position:absolute;bottom:8px;left:8px;padding:2px 8px;font-size:.8rem;border-radius:6px;background:#0000008c;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}.fs-waiting{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}.fs-topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);z-index:5;pointer-events:none}.fs-title{font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}.fs-topbar-right{display:flex;align-items:center;gap:.6rem}.invite-btn{pointer-events:auto;border-radius:999px;border-color:transparent;background:#ffffff1f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.85rem;white-space:nowrap}.invite-btn:hover:not(:disabled){background:#ffffff38;border-color:transparent}.fs-controls{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;gap:.6rem;padding:.55rem;background:#161920b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:999px;z-index:5}.fsbtn{position:relative;border-radius:999px;border-color:transparent;background:#ffffff14}.fsbtn:hover:not(:disabled){background:#ffffff29;border-color:transparent}.fsbtn.fsbtn-active{background:var(--accent);color:#fff}.fsbtn.toggled-off{background:#3a2020;color:#ff8a8a}.fsbtn.hangup{background:#c0392b;color:#fff}.fsbtn.hangup:hover{background:#e74c3c}.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;font-size:.7rem;line-height:18px;text-align:center;background:#e74c3c;color:#fff;border-radius:999px}.fs-chat{position:absolute;top:0;right:0;bottom:0;width:360px;max-width:85vw;display:flex;flex-direction:column;background:#12141af5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid var(--border);transform:translate(100%);transition:transform .25s ease;z-index:6}.fs-chat.open{transform:translate(0)}.fs-chat-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1px solid var(--border);font-weight:600}.fs-chat-close{padding:.25rem .6rem;background:transparent;border:none;color:var(--muted);font-size:1rem}.fs-chat-close:hover{color:var(--text);border:none}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.hint{color:var(--muted);text-align:center;margin:auto}.msg{display:flex;flex-direction:column;align-items:flex-start}.msg-me{align-items:flex-end}.msg-name{font-size:.72rem;color:var(--muted);margin:0 0 2px .4rem}.bubble{max-width:75%;padding:.5rem .8rem;border-radius:14px;line-height:1.4;word-break:break-word}.msg-me .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}.msg-peer .bubble{background:#262b35;border-bottom-left-radius:4px}.composer{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}.composer input{flex:1}.lobby{width:100%;min-height:100vh;display:flex;flex-direction:column;padding:1rem 1.5rem .5rem;gap:1rem}.lobby-top{width:100%;max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.lobby-brand{display:flex;align-items:center;gap:.5rem;font-size:1.2rem}.brand-dot{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#a06bff);box-shadow:0 0 12px #4f8cff80}.brand-sub{color:var(--muted);font-weight:500}.info-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:italic;font-weight:700;color:var(--muted)}.lobby-body{flex:1;width:100%;max-width:1500px;margin:0 auto;display:flex;gap:clamp(2rem,5vw,5rem);align-items:center;justify-content:center;min-height:0}.lobby-preview{flex:1 1 auto;max-width:1000px;display:flex;flex-direction:column;gap:1rem;min-width:0}.preview-stage{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--border)}.preview-feed{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.preview-stage.mirrored .preview-feed{transform:scaleX(-1)}.preview-off{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.stage-corner-btn{position:absolute;top:12px;right:12px;z-index:4;width:40px;height:40px;border-radius:50%;border:none;background:#4f8cffd9;color:#fff;display:grid;place-items:center;font-size:1.1rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.device-list{display:flex;flex-direction:column;gap:.5rem}.device-row{display:flex;align-items:center;gap:.75rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.5rem .85rem}.device-ico{font-size:1.05rem;width:1.5rem;text-align:center}.device-name{width:92px;flex:0 0 auto;font-size:.9rem}.device-select{flex:1;min-width:0;background:#0c0e12;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.4rem .5rem;font-size:.85rem}.device-select:focus{outline:none;border-color:var(--accent)}.switch{position:relative;flex:0 0 auto;width:42px;height:24px;padding:0;border:none;border-radius:999px;background:#3a3f4b;transition:background .15s}.switch.on{background:var(--accent)}.switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}.switch.on .switch-knob{left:21px}.play-btn{flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center}.lobby-card{flex:0 0 380px;display:flex;flex-direction:column;gap:1.1rem;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:2rem}.card-title{margin:0;text-align:center;font-size:1.4rem}.field{display:flex;flex-direction:column;gap:.35rem}.field-label{font-size:.78rem;color:var(--muted)}.field-with-action{display:flex;gap:.5rem}.field-with-action input{flex:1}.shuffle-btn{flex:0 0 auto}.card-actions{display:flex;gap:.75rem;margin-top:.5rem}.card-actions button{flex:1;padding:.7rem}.lobby-footer{width:100%;max-width:1500px;margin:0 auto;text-align:center;color:var(--muted);font-size:.8rem;padding:.4rem 0}@media (max-width: 860px){.lobby-body{flex-direction:column}.lobby-card{flex:0 0 auto;align-self:stretch}.preview-stage{min-height:260px}}.fs-settings{position:absolute;bottom:5.75rem;left:50%;transform:translate(-50%);width:min(460px,92vw);display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#161920eb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 12px 36px #00000080;z-index:6}.fs-settings-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-bottom:.25rem}.present{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;gap:8px;padding:8px;transition:right .25s ease}.present.chat-open{right:360px}.present-main{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center}.present-stage{position:relative;width:100%;max-height:100%;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden}.present-video{width:100%;height:100%;object-fit:contain;background:#000}.present-name{position:absolute;bottom:10px;left:10px;padding:3px 10px;font-size:.8rem;border-radius:6px;background:#0000008c;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);z-index:2}.present-sidebar{flex:0 0 auto;width:clamp(200px,22vw,300px);display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-bottom:5.5rem}.present-sidebar .tile{height:auto;flex:0 0 auto}.csc-controls{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;gap:6px;padding:4px 8px;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px}.csc-controls button{padding:.2rem .6rem;border-radius:999px;background:#ffffff1f;border-color:transparent;font-size:.85rem}.csc-controls span{font-size:.8rem;min-width:3.2em;text-align:center}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark;--bg: #0f1115;--panel: #1a1d24;--border: #2a2f3a;--text: #e6e8ec;--muted: #9aa3b2;--accent: #4f8cff;--accent-hover: #3b7afd}*{box-sizing:border-box}#root{width:100%}body{margin:0;background:var(--bg);color:var(--text);display:flex;justify-content:center;min-height:100vh}button{font:inherit;cursor:pointer;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:.55rem 1rem;border-radius:8px;transition:background .15s,border-color .15s}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover:not(:disabled){background:var(--accent-hover)}button.link{background:none;border:none;color:var(--muted);padding:.25rem 0}textarea,input{font:inherit;width:100%;background:#0c0e12;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.6rem;resize:vertical}textarea:focus,input:focus{outline:none;border-color:var(--accent)}