@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap");*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0f14;--surface:#151820;--surface2:#1e2230;--border:#2a2e3d;--accent:#4f7cff;--accent-dim:rgba(79,124,255,.15);--danger:#ff4f6a;--danger-dim:rgba(255,79,106,.15);--text:#e8eaf0;--text-muted:#7b82a0;--green:#3ddc97;--radius:12px}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text)}.app-root,body{min-height:100vh}.app-root{display:flex;align-items:center;justify-content:center}.lobby{width:100%;max-width:520px;padding:2rem 1.5rem}.lobby-header{margin-bottom:2rem}.lobby-title{font-size:1.8rem;font-weight:600;letter-spacing:-.02em}.lobby-subtitle{color:var(--text-muted);margin-top:.3rem;font-size:.9rem}.create-room{display:flex;gap:.6rem;margin-bottom:1.5rem}.room-input{flex:1 1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem 1rem;color:var(--text);font-family:inherit;font-size:.9rem;outline:none;transition:border-color .2s}.room-input:focus{border-color:var(--accent)}.room-input::placeholder{color:var(--text-muted)}.create-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--radius);padding:.65rem 1.2rem;font-family:inherit;font-weight:500;font-size:.9rem;cursor:pointer;transition:opacity .15s;white-space:nowrap}.create-btn:disabled{opacity:.5;cursor:not-allowed}.create-btn:not(:disabled):hover{opacity:.85}.rooms-list{display:flex;flex-direction:column;gap:.5rem}.list-state{color:var(--text-muted);font-size:.9rem;text-align:center;padding:1rem 0}.list-state.error{color:var(--danger)}.room-card{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.2rem;cursor:pointer;text-align:left;width:100%;transition:border-color .15s,background .15s;font-family:inherit;color:var(--text)}.room-card:hover{border-color:var(--accent);background:var(--accent-dim)}.room-card-info{display:flex;flex-direction:column;gap:.15rem}.room-card-name{font-weight:500;font-size:.95rem}.room-card-meta{font-size:.8rem;color:var(--text-muted)}.room-card-join{font-size:.85rem;color:var(--accent);font-weight:500}.video-room{width:100vw;height:100vh;display:flex;flex-direction:column;background:var(--bg)}.room-header{padding:.8rem 1.5rem;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}.room-header,.room-info{display:flex;align-items:center}.room-info{gap:.6rem}.room-name{font-weight:600;font-size:1rem}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.connected{background:var(--green)}.status-dot.disconnected{background:var(--danger)}.status-text{font-size:.8rem;color:var(--text-muted)}.video-grid{flex:1 1;display:grid;grid-gap:6px;gap:6px;padding:6px;overflow:hidden}.video-grid[data-count="1"]{grid-template-columns:1fr}.video-grid[data-count="2"]{grid-template-columns:1fr 1fr}.video-grid[data-count="3"],.video-grid[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.video-tile{position:relative;background:var(--surface);border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center}.video-tile video{width:100%;height:100%;object-fit:cover;display:block}.local-video{transform:scaleX(-1)}.video-placeholder{width:100%;height:100%;background:var(--surface2)}.avatar-initial,.video-placeholder{display:flex;align-items:center;justify-content:center}.avatar-initial{width:64px;height:64px;border-radius:50%;background:var(--accent-dim);border:2px solid var(--accent);font-size:1.6rem;font-weight:600;color:var(--accent)}.participant-label{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:6px;padding:3px 8px;font-size:.78rem;font-weight:500}.you-badge{color:var(--text-muted)}.room-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;padding:1rem;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}.camera-picker{display:flex;flex-direction:column;gap:.35rem;min-width:220px}.camera-picker span{font-size:.72rem;color:var(--text-muted);font-weight:500}.camera-picker select{background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.55rem .7rem;font-family:inherit;font-size:.82rem;outline:none;transition:border-color .15s,background .15s}.camera-picker select:focus{border-color:var(--accent)}.camera-picker select:disabled{opacity:.6;cursor:not-allowed}.ctrl-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem 1.2rem;cursor:pointer;color:var(--text);font-family:inherit;font-size:.72rem;font-weight:500;transition:background .15s,border-color .15s;min-width:64px}.ctrl-btn.active,.ctrl-btn:hover{background:var(--accent-dim);border-color:var(--accent)}.ctrl-btn.active{color:var(--accent)}.ctrl-btn.danger{background:var(--danger-dim);border-color:var(--danger);color:var(--danger)}.ctrl-btn.danger:hover{background:var(--danger);color:#fff}.ctrl-btn span{line-height:1}.mobile-only{display:none}@media (max-width:768px){.mobile-only{display:flex}}.login-card{width:100%;max-width:400px;padding:2.5rem 2rem;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * 1.5)}.login-header{text-align:center;margin-bottom:2rem}.login-logo{font-size:2.5rem;margin-bottom:.75rem}.login-title{font-size:1.6rem;font-weight:600;letter-spacing:-.02em}.login-subtitle{color:var(--text-muted);margin-top:.4rem;font-size:.9rem}.login-form{display:flex;flex-direction:column;gap:.75rem}.login-error{color:var(--danger);font-size:.85rem;text-align:center}.login-btn{width:100%;padding:.75rem 1rem;font-size:.95rem}.lobby-title-row{justify-content:space-between;gap:1rem}.lobby-title-row,.lobby-user{display:flex;align-items:center}.lobby-user{gap:.5rem;flex-shrink:0}.lobby-user-name{font-size:.85rem;color:var(--text-muted);font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.3rem .7rem;color:var(--text-muted);font-family:inherit;font-size:.78rem;cursor:pointer;transition:border-color .15s,color .15s}.logout-btn:hover{border-color:var(--danger);color:var(--danger)}.install-banner{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(560px,calc(100vw - 20px));background:linear-gradient(120deg,rgba(79,124,255,.22),rgba(61,220,151,.14)),var(--surface);border:1px solid var(--border);border-radius:14px;padding:.75rem .85rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;z-index:2000;box-shadow:0 10px 22px rgba(0,0,0,.35)}.install-banner-content{display:flex;flex-direction:column;gap:2px}.install-banner-content strong{font-size:.9rem;letter-spacing:-.01em}.install-banner-content span{font-size:.78rem;color:var(--text-muted)}.install-banner-btn{border:0;border-radius:10px;background:var(--accent);color:#fff;font-family:inherit;font-weight:600;font-size:.82rem;padding:.55rem .85rem;cursor:pointer;white-space:nowrap}.install-banner-actions{display:flex;align-items:center;gap:.5rem}.install-banner-dismiss{border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:.8rem;font-weight:500;padding:.5rem .75rem;cursor:pointer;white-space:nowrap}.install-banner-dismiss:hover{border-color:var(--text-muted);color:var(--text)}.install-banner-btn:disabled,.install-banner-dismiss:disabled{opacity:.65;cursor:not-allowed}@media (max-width:560px){.install-banner{align-items:stretch;flex-direction:column}.install-banner-actions,.install-banner-btn,.install-banner-dismiss{width:100%}}