.join-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.join-card{width:100%;max-width:420px;background:#1a1d27;border:1px solid #2a2f3d;border-radius:16px;padding:32px}.join-card h1{margin:0 0 8px;font-size:1.75rem}.subtitle{margin:0 0 24px;color:#9aa0a6;font-size:.95rem}.join-card form{display:flex;flex-direction:column;gap:16px}.join-card label{display:flex;flex-direction:column;gap:6px;font-size:.875rem;color:#bdc1c6}.join-card input{padding:10px 12px;border:1px solid #3c4043;border-radius:8px;background:#0f1117;color:#e8eaed}.join-card button[type=submit]{margin-top:8px;padding:12px;border:none;border-radius:8px;background:#4c8bf5;color:#fff;font-weight:600}.join-card button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.error{margin-top:16px;color:#f28b82;font-size:.875rem}.hint{margin-top:20px;font-size:.8rem;color:#80868b;line-height:1.5}.room{min-height:100vh;display:flex;flex-direction:column}.room-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #2a2f3d;background:#1a1d27}.room-header h1{margin:0;font-size:1.25rem}.room-id{font-size:.85rem;color:#9aa0a6}.controls{display:flex;gap:8px}.control-btn{padding:10px 16px;border:1px solid #3c4043;border-radius:8px;background:#2a2f3d;color:#e8eaed}.control-btn.active{background:#3c4043}.control-btn.muted{background:#5c2b2b;border-color:#8b3a3a}.control-btn.leave{background:#c5221f;border-color:#c5221f;color:#fff}.video-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:24px}.video-player{position:relative;aspect-ratio:16 / 9;background:#1a1d27;border-radius:12px;overflow:hidden;border:1px solid #2a2f3d}.video-player video{width:100%;height:100%;object-fit:cover;background:#000}.video-player video.mirror{transform:scaleX(-1)}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#80868b;font-size:.9rem}.video-label{position:absolute;bottom:8px;left:8px;padding:4px 10px;background:#0009;border-radius:6px;font-size:.8rem}.waiting{text-align:center;color:#9aa0a6;padding:0 24px 24px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f1117;color:#e8eaed;min-height:100vh}button{font:inherit;cursor:pointer}input{font:inherit}