.modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;opacity:0;visibility:hidden;transition:opacity var(--duration-slow) ease, visibility var(--duration-slow) ease;background:#0009;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-overlay.active{opacity:1;visibility:visible}.modal{background:var(--bg-secondary);width:100%;max-width:450px;min-height:auto;max-height:90vh;transition:transform var(--duration-slow) ease;border-radius:24px;flex-shrink:1;padding:2rem;position:relative;overflow-y:auto;transform:translateY(20px);box-shadow:0 20px 60px #0000004d}.modal-overlay.active .modal{transform:translateY(0)}.modal-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.5rem;transition:color .2s;position:absolute;top:1rem;right:1rem}.modal-close:hover{color:#3b82f6}.modal h2{text-align:center;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;font-size:1.5rem;font-weight:700}.login-options{background:var(--bg-primary);border-radius:12px;margin-bottom:1.5rem;padding:.25rem;transition:background-color .3s;display:flex;overflow:hidden}.login-tab{cursor:pointer;color:var(--text-secondary);transition:background var(--duration-slow) ease, color var(--duration-slow) ease, box-shadow var(--duration-slow) ease;text-align:center;background:0 0;border:none;border-radius:8px;flex:1;padding:.75rem .5rem;font-size:.85rem;font-weight:600}.login-tab.active{color:#fff;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 2px 8px #3b82f64d}.login-tab.register-tab.active{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 2px 8px #10b9814d}#deviceConfirmationModal{z-index:10000}#deviceConfirmationModal.active{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000c}#deviceConfirmationModal .modal{max-width:600px;max-height:85vh;overflow-y:auto}#deviceConfirmationModal .device-warning{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:2px solid #f59e0b;border-radius:12px;margin:1.5rem 0;padding:1.5rem}#deviceConfirmationModal .device-warning p{color:#92400e;margin:0 0 1rem;font-weight:600}#deviceConfirmationModal .device-warning ul{margin:1rem 0;padding:0;list-style:none}#deviceConfirmationModal .device-warning li{color:#78350f;align-items:center;gap:.5rem;padding:.5rem 0;font-weight:500;display:flex}#deviceConfirmationModal .warning-box{text-align:center;background:#fecaca;border:2px solid #ef4444;border-radius:8px;margin-top:1rem;padding:1rem}#deviceConfirmationModal .warning-box strong{color:#dc2626;font-size:1.1rem}#deviceConfirmationModal .confirmation-buttons{justify-content:center;gap:1rem;margin-top:2rem;display:flex}#deviceConfirmationModal .btn-primary{color:#fff;cursor:pointer;transition:transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600}#deviceConfirmationModal .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #10b98166}#deviceConfirmationModal .btn-secondary{color:#fff;cursor:pointer;transition:background var(--duration-slow) ease, transform var(--duration-slow) ease;background:#6b7280;border:none;border-radius:8px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600}#deviceConfirmationModal .btn-secondary:hover{background:#4b5563;transform:translateY(-2px)}.otp-modal{background:var(--bg-secondary);width:100%;max-width:400px;transition:transform var(--duration-slow) ease;text-align:center;border-radius:24px;max-height:80vh;padding:2rem;position:relative;overflow-y:auto;transform:translateY(20px);box-shadow:0 20px 60px #0000004d}.otp-input{text-align:center;letter-spacing:.5rem;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.resend-otp{text-align:center;margin-top:1rem}.resend-link{color:#10b981;cursor:pointer;font-weight:600;text-decoration:none}.resend-link:hover{text-decoration:underline}.resend-link:disabled{color:#94a3b8;cursor:not-allowed}.success-modal{background:var(--bg-secondary);width:100%;max-width:500px;transition:transform var(--duration-slow) ease;text-align:center;border-radius:24px;max-height:85vh;padding:3rem;position:relative;overflow-y:auto;transform:translateY(20px);box-shadow:0 20px 60px #0000004d}.confetti-container{pointer-events:none;border-radius:24px;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.success-icon{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 1.5rem;font-size:2rem;animation:.6s ease-out bounce;display:flex}.modal::-webkit-scrollbar{width:6px}.otp-modal::-webkit-scrollbar{width:6px}.success-modal::-webkit-scrollbar{width:6px}.modal::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.otp-modal::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.success-modal::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}html.dark .modal::-webkit-scrollbar-track{background:#334155}html.dark .otp-modal::-webkit-scrollbar-track{background:#334155}html.dark .success-modal::-webkit-scrollbar-track{background:#334155}body.dark .modal::-webkit-scrollbar-track{background:#334155}body.dark .otp-modal::-webkit-scrollbar-track{background:#334155}body.dark .success-modal::-webkit-scrollbar-track{background:#334155}.modal::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.otp-modal::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.success-modal::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}html.dark .modal::-webkit-scrollbar-thumb{background:#64748b}html.dark .otp-modal::-webkit-scrollbar-thumb{background:#64748b}html.dark .success-modal::-webkit-scrollbar-thumb{background:#64748b}body.dark .modal::-webkit-scrollbar-thumb{background:#64748b}body.dark .otp-modal::-webkit-scrollbar-thumb{background:#64748b}body.dark .success-modal::-webkit-scrollbar-thumb{background:#64748b}.modal::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.otp-modal::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.success-modal::-webkit-scrollbar-thumb:hover{background:#a8a8a8}html.dark .modal::-webkit-scrollbar-thumb:hover{background:#475569}html.dark .otp-modal::-webkit-scrollbar-thumb:hover{background:#475569}html.dark .success-modal::-webkit-scrollbar-thumb:hover{background:#475569}body.dark .modal::-webkit-scrollbar-thumb:hover{background:#475569}body.dark .otp-modal::-webkit-scrollbar-thumb:hover{background:#475569}body.dark .success-modal::-webkit-scrollbar-thumb:hover{background:#475569}.form-group{margin-bottom:1rem}.form-label{color:var(--text-primary);margin-bottom:.5rem;font-weight:600;display:block}.form-input{border:2px solid var(--border-color);width:100%;transition:border-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease;background:var(--bg-primary);color:var(--text-primary);border-radius:12px;padding:.875rem;font-size:1rem}.form-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-input.error{background-color:#fff5f5;border-color:#e53e3e;animation:.5s ease-in-out shake}.password-field{position:relative}.password-toggle{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;transition:color .2s;position:absolute;top:50%;right:.875rem;transform:translateY(-50%)}.password-toggle:hover{color:#3b82f6}.submit-btn{color:#fff;cursor:pointer;width:100%;transition:transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.875rem;font-weight:600;display:flex}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 25px #3b82f64d}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.submit-btn.register-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 4px 15px #10b9814d}.submit-btn.register-btn:hover:not(:disabled){box-shadow:0 10px 25px #10b98166}.error-message{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem;font-size:.875rem;animation:.3s ease-out slideIn;display:flex}html.dark .error-message,body.dark .error-message{color:#fca5a5;background:#7f1d1d;border-color:#991b1b}.success-message{color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;margin-bottom:1rem;padding:.75rem;font-size:.875rem;display:none}html.dark .success-message,body.dark .success-message{color:#86efac;background:#14532d;border-color:#166534}.trial-info{color:#16a34a;text-align:center;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;margin-bottom:1.5rem;padding:1rem;font-size:.875rem}.trial-info h4{color:#15803d;justify-content:center;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1rem;font-weight:600;display:flex}.trial-info ul{margin:.5rem 0 0;padding:0;list-style:none}.trial-info li{color:#15803d;padding:.25rem 0}.trial-info li:before{content:"✓ ";color:#10b981;font-weight:700}.device-security-notice{background:linear-gradient(135deg,#e0f2fe 0%,#b3e5fc 100%);border:2px solid #0288d1;border-radius:12px;margin-bottom:1.5rem;padding:1.5rem}.device-security-notice h4{color:#01579b;margin:0 0 .5rem;font-size:1rem;font-weight:600}.device-security-notice p{color:#0277bd;margin:0;font-size:.9rem;line-height:1.4}.get-started-modal{max-width:520px}.get-started-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem}.get-started-options{flex-direction:column;gap:1rem;display:flex}.get-started-option{background:var(--bg-primary);border:2px solid var(--border-color);color:inherit;cursor:pointer;text-align:left;font:inherit;border-radius:16px;width:100%;padding:1.5rem;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;display:block}.get-started-option:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.get-started-option-icon{color:#fff;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:.75rem;font-size:1.25rem;display:flex}.get-started-option-icon--listen{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%)}.get-started-option-icon--create{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.get-started-option h3{color:var(--text-primary);margin:0 0 .25rem;font-size:1.1rem;font-weight:600}.get-started-option p{color:var(--text-secondary);margin:0;font-size:.875rem}