:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--text-primary: #ffffff;--text-secondary: #a0a0b0;--accent: #6366f1;--accent-hover: #818cf8;--success: #22c55e;--error: #ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}.landing h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--accent),var(--accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.landing p{color:var(--text-secondary);margin-bottom:2rem}.button-group{display:flex;gap:1rem}.btn{padding:12px 32px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--bg-tertiary)}.btn-secondary:hover{border-color:var(--accent)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-secondary);padding:2rem;border-radius:16px;width:100%;max-width:400px}.modal h2{margin-bottom:1.5rem}.modal input{width:100%;padding:12px 16px;border:1px solid var(--bg-tertiary);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:1rem;margin-bottom:1rem}.modal input:focus{outline:none;border-color:var(--accent)}.modal-buttons{display:flex;gap:1rem;justify-content:flex-end}.room{display:flex;flex-direction:column;height:100vh}.room-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--bg-tertiary)}.room-header h1{font-size:1.25rem}.room-info{display:flex;align-items:center;gap:1rem;color:var(--text-secondary);font-size:.875rem}.room-canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at center,var(--bg-secondary) 0%,var(--bg-primary) 100%)}.participant{position:absolute;width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-secondary);border:2px solid var(--bg-tertiary);border-radius:12px;cursor:grab;-webkit-user-select:none;user-select:none;transition:border-color .2s,transform .1s}.participant:hover{border-color:var(--accent)}.participant.speaking{border-color:var(--success);box-shadow:0 0 20px #22c55e4d}.participant.local{border-color:var(--accent);cursor:default}.participant.dragging{cursor:grabbing;transform:scale(1.05);z-index:100}.participant-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.25rem;margin-bottom:4px}.participant-name{font-size:.75rem;color:var(--text-secondary);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-controls{display:flex;justify-content:center;gap:1rem;padding:16px;background:var(--bg-secondary);border-top:1px solid var(--bg-tertiary)}.control-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.control-btn:hover{background:var(--accent)}.control-btn.active{background:var(--error)}.control-btn svg{width:24px;height:24px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.error-page h1{color:var(--error)}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:radial-gradient(circle at top,rgba(99,102,241,.15),transparent 45%),var(--bg-primary)}.login-card{width:100%;max-width:420px;padding:2rem;border-radius:16px;background:var(--bg-secondary);border:1px solid var(--bg-tertiary);box-shadow:0 20px 60px #00000059}.login-header{text-align:center;margin-bottom:2rem}.login-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--accent),var(--accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-header p{color:var(--text-secondary)}.login-form{display:flex;flex-direction:column;gap:1rem}.login-field{display:flex;flex-direction:column;gap:.5rem}.login-field span{font-size:.875rem;color:var(--text-secondary)}.login-field input{width:100%;padding:12px 16px;border:1px solid var(--bg-tertiary);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:1rem}.login-field input:focus{outline:none;border-color:var(--accent)}.login-error{color:var(--error);font-size:.875rem}.login-submit{width:100%;margin-top:.5rem}