:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d1117;--surface:#161b22;--surface-2:#1c2129;--border:#30363d;--text:#e6edf3;--text-muted:#8b949e;--accent:#8b5cf6;--accent-hover:#7c3aed;--danger:#f85149;--ok:#3fb950;--warn-yellow:#d29922;--warn-orange:#db6d28;--info:#2f81f7;--info-hover:#2570e0}*{box-sizing:border-box}body{background:var(--bg);max-width:860px;color:var(--text);margin:2.5rem auto;padding:0 1.25rem 3rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}body:not(.in-room) .room-only,body.in-room .lobby-only{display:none}body.in-room{max-width:none;padding-left:2rem;padding-right:2rem}h1{letter-spacing:-.01em;margin-bottom:.25rem;font-size:1.4rem;font-weight:700}.subtitle{color:var(--text-muted);margin-bottom:1.75rem;font-size:.9rem}.subtitle a{color:var(--accent)}.subtitle a:hover{color:var(--accent-hover)}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:1.25rem;padding:1.25rem}label{color:var(--text-muted);margin-top:.75rem;font-size:.85rem;font-weight:600;display:block}label:first-child{margin-top:0}input{background:var(--surface-2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;margin-top:.35rem;padding:.6rem .7rem;font-size:.95rem}input::placeholder{color:var(--text-muted)}input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #8b5cf640}input[readonly]{color:var(--text-muted);cursor:default}button{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:8px;margin-top:1rem;padding:.65rem 1.3rem;font-size:.95rem;font-weight:600;transition:background .15s}button:hover:not(:disabled){background:var(--accent-hover)}button:disabled{cursor:not-allowed;opacity:.4}button+button{margin-left:.6rem}button.secondary{background:var(--surface-2);border:1px solid var(--border)}button.secondary:hover:not(:disabled){background:var(--surface)}.input-row{align-items:flex-end;gap:.6rem;display:flex}.input-row>div{flex:1}.input-row button{white-space:nowrap;margin-top:.35rem}.mic-level{margin-top:.75rem}.level-meter{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;height:8px;margin-top:.35rem;overflow:hidden}.level-meter-bar{background:var(--ok);width:0%;height:100%;transition:width 50ms linear,background .1s}.level-meter-bar.zone-yellow{background:var(--warn-yellow)}.level-meter-bar.zone-orange{background:var(--warn-orange)}.level-meter-bar.zone-red{background:var(--danger)}.mic-level input[type=range]{width:100%;accent-color:var(--accent);margin-top:.5rem}video{background:#000;border-radius:10px;width:100%;display:block}.video-grid{flex-wrap:wrap;gap:1rem;width:100%;margin-top:1rem;display:flex}#remote-videos{display:contents}.own-preview-wrapper{flex:.7 240px;min-width:180px}.remote-participant{flex:320px;min-width:240px}.remote-participant video{aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:10px;width:100%;height:auto}.remote-label{color:var(--text-muted);align-items:center;gap:.4rem;margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:flex}.status-dot{background:var(--ok);border-radius:50%;flex-shrink:0;width:9px;height:9px}.status-dot.stalled{background:var(--danger)}body[data-role=guest] [data-host-only]{display:none}#participant-status{color:var(--text-muted);flex-wrap:wrap;gap:1rem;margin-bottom:.75rem;font-size:.85rem;display:flex}#participant-status .entry{align-items:center;gap:.4rem;display:flex}#interrupt-banner{background:var(--danger);color:#fff;border-radius:8px;margin-bottom:1rem;padding:.75rem 1rem;font-size:.9rem;font-weight:600;display:none}#interrupt-banner.visible{display:block}#interrupt-banner.recovered{background:var(--ok)}#countdown{z-index:10;gap:.75rem;display:none;position:fixed;top:1.5rem;left:50%;transform:translate(-50%)}.countdown-circle{background:var(--surface-2);border:1px solid var(--border);width:48px;height:48px;color:var(--text-muted);opacity:.4;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:opacity .15s,transform .15s,background .15s,color .15s;display:flex;box-shadow:0 8px 24px #0006}.countdown-circle.active{opacity:1;background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.15)}.countdown-circle[data-step=rec]{font-size:.75rem}.countdown-circle[data-step=rec].active{background:var(--danger);border-color:var(--danger)}.room-display{font-size:1.05rem}.room-display-label{color:var(--text-muted);margin-right:.4rem}.monitoring-row{flex-wrap:wrap;align-items:center;gap:.85rem;display:flex}.host-controls{flex-wrap:wrap;gap:.6rem;display:flex}.host-controls button,.monitoring-row>button{margin-top:0}button.compact{padding:.45rem .85rem;font-size:.85rem}.record-lamp{border:2px solid var(--border);background:0 0;border-radius:50%;flex-shrink:0;width:12px;height:12px}.record-lamp.active{background:var(--danger);border-color:var(--danger);box-shadow:0 0 6px var(--danger)}.icon-btn{background:var(--surface-2);border:1px solid var(--border);width:2.1rem;height:2.1rem;color:var(--text-muted);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;margin-top:0;padding:0;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--surface);color:var(--text)}.settings-gear{margin-left:auto}.record-toggle-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:3rem;height:3rem;padding:0;display:inline-flex}.record-toggle-btn:hover:not(:disabled){background:var(--surface)}.resume-btn{background:var(--info);border:1px solid var(--info);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:3rem;height:3rem;padding:0;display:inline-flex}.resume-btn:hover:not(:disabled){background:var(--info-hover);border-color:var(--info-hover)}body.in-room #device-settings{z-index:20;width:320px;max-width:calc(100vw - 4rem);display:none;position:fixed;top:4.5rem;right:2rem;box-shadow:0 12px 32px #00000080}body.in-room #device-settings.visible{display:block}#upload-success-banner{background:var(--ok);color:#fff;text-align:center;border-radius:10px;margin-bottom:1rem;padding:1.1rem 1.25rem;font-size:1.15rem;font-weight:700;display:none}#upload-success-banner.visible{display:block}#status{white-space:pre-wrap;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;max-height:3.2rem;margin:0;padding:.5rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;overflow-y:auto}