body{margin:0}:root{--bg-color:#111;--card-bg:#1e1e1e;--text-color:#eee;--primary-color:#3b82f6;--primary-hover:#2563eb;--input-bg:#2d2d2d;--input-border:#444}body{background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}.home-container,.join-container{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.home-card,.join-card{background-color:var(--card-bg);text-align:center;border-radius:12px;width:100%;max-width:400px;padding:2rem;box-shadow:0 4px 6px -1px #00000080}.join-card h2,.home-card h1{margin-top:0;margin-bottom:.5rem}.room-name{color:#aaa;margin-bottom:1.5rem;font-size:.9rem}.room-name strong{color:var(--text-color);font-size:1.1rem}.input-group{text-align:left;flex-direction:column;gap:1rem;margin:1.5rem;display:flex}.input-group label{color:#ccc;font-size:.85rem;font-weight:500}.styled-input{background-color:var(--input-bg);border:1px solid var(--input-border);color:#fff;box-sizing:border-box;border-radius:6px;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s}.styled-input:focus{border-color:var(--primary-color)}.styled-button{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:background-color .2s}.styled-button:hover{background-color:var(--primary-hover)}.styled-button:disabled{cursor:not-allowed;background-color:#555}.full-width{width:100%}.agent-controls{z-index:50;position:absolute;top:1rem;right:1rem}.agent-btn{cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 6px #0000004d}.agent-btn:hover{transform:translateY(-1px);box-shadow:0 6px 8px #0006}.agent-btn:active{transform:translateY(0)}.invite{color:#fff;background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);border:1px solid #ffffff1a}.invite:hover{background:linear-gradient(135deg,#4f46e5 0%,#9333ea 100%)}.kick{color:#fff;background-color:#ef4444e6;border:1px solid #ff3c3c4d}.kick:hover{background-color:#dc2626}.auth-buttons{flex-direction:column;gap:.75rem;margin:1.5rem 0 0;display:flex}.sso-btn{background:linear-gradient(135deg,#6366f1 0%,#3b82f6 100%)}.sso-btn:hover{background:linear-gradient(135deg,#4f46e5 0%,#2563eb 100%)}.guest-btn{background-color:#374151}.guest-btn:hover{background-color:#4b5563}.back-btn{border:1px solid var(--input-border);background-color:#0000;margin-top:.5rem}.back-btn:hover{background-color:#ffffff0d}.auth-divider{color:#666;align-items:center;gap:1rem;font-size:.85rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";background-color:#333;flex:1;height:1px}.sso-user-info{background-color:#3b82f614;border:1px solid #3b82f633;border-radius:8px;margin:1.5rem 0;padding:1rem}.sso-welcome{color:#888;margin:0 0 .25rem;font-size:.85rem}.sso-name{margin:0;font-size:1.15rem;font-weight:600}.sso-email{color:#888;margin:.25rem 0 0;font-size:.85rem}.waiting-text{color:#aaa;margin:1rem 0 1.5rem;font-size:.95rem}.denied-text{color:#f87171;margin:.5rem 0 1.5rem}.error-text{color:#f87171;margin-top:.75rem;font-size:.85rem}.loading-spinner{border:3px solid #333;border-top-color:var(--primary-color);border-radius:50%;width:40px;height:40px;margin:1.5rem auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.guest-approval-overlay{z-index:100;flex-direction:column;gap:.5rem;width:90%;max-width:400px;display:flex;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.guest-approval-card{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#1e1e1ef2;border:1px solid #444;border-radius:10px;padding:1rem 1.25rem;animation:.3s ease-out slideDown;box-shadow:0 8px 24px #00000080}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.guest-approval-text{margin:0 0 .75rem;font-size:.95rem}.guest-approval-actions{gap:.5rem;display:flex}.approve-btn{background-color:#22c55e;flex:1;padding:.5rem;font-size:.85rem}.approve-btn:hover{background-color:#16a34a}.deny-btn{background-color:#ef4444;flex:1;padding:.5rem;font-size:.85rem}.deny-btn:hover{background-color:#dc2626}.avatar-grid{grid-template-columns:repeat(5,1fr);justify-items:center;gap:8px;margin:.75rem 0;display:grid}.avatar-option{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:50%;padding:2px;transition:border-color .2s}.avatar-option img{object-fit:cover;border-radius:50%;width:48px;height:48px;display:block}.avatar-option:hover{border-color:#666}.avatar-option.selected{border-color:var(--primary-color)}