@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container,body{background-color:#e5e7eb;min-height:100vh}.container{display:flex;justify-content:center;align-items:center;padding:20px;flex-direction:column}.card{background:white;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:40px;width:100%;max-width:420px;border:1px solid #e5e7eb}.logo-section{text-align:center;margin-bottom:32px}.logo{gap:12px}.logo,.logo-icon{display:flex;align-items:center;justify-content:center}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:6px;color:white;font-weight:700;font-size:18px;position:relative}.logo-icon:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:linear-gradient(135deg,#ef4444,#dc2626 50%,#f97316);border-radius:4px;z-index:-1}.logo-text-container{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.logo-text{font-size:24px;font-weight:600;color:#1e293b;background:linear-gradient(135deg,#3b82f6,#1d4ed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.logo-tagline{font-size:12px;font-weight:500;color:#64748b;font-style:italic;line-height:1;margin-top:-2px}.form-section h1{font-size:28px;font-weight:600;color:#1e293b;margin-bottom:8px;text-align:left}.subtitle{color:#64748b;font-size:14px;margin-bottom:32px;text-align:left}.sign-in-form{gap:24px}.form-group,.sign-in-form{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{font-size:14px;font-weight:500;color:#374151}.form-group input{padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#1f2937;background:white;transition:border-color .2s ease,box-shadow .2s ease}.form-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.form-group input::placeholder{color:#9ca3af}.password-container{position:relative;display:flex;align-items:center}.password-container input{padding-right:48px;width:100%}.toggle-password{position:absolute;right:12px;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:color .2s ease}.toggle-password:hover{color:#374151}.eye-icon{width:20px;height:20px}.sign-up-btn{background:#3b82f6;color:white;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;margin-top:8px}.sign-up-btn:hover{background:#2563eb;transform:translateY(-1px)}.sign-up-btn:active{transform:translateY(0)}.form-footer{display:flex;justify-content:center;align-items:center;margin-top:8px}.forgot-password{font-size:13px;color:#6b7280;text-decoration:none;transition:color .2s ease}.forgot-password:hover{color:#3b82f6;text-decoration:underline}@media (max-width:768px){.container{padding:16px;align-items:center;justify-content:center;min-height:100vh}.card{padding:32px 24px;max-width:100%;border-radius:16px}.logo-section{margin-bottom:24px}.form-section h1{font-size:24px}.sign-in-form{gap:20px}.form-group{gap:6px}.form-footer{justify-content:center;align-items:center}}@media (max-width:480px){.container{padding:12px;align-items:center;justify-content:center;min-height:100vh}.card{padding:24px 20px;border-radius:12px}.logo-icon{width:28px;height:28px;font-size:16px}.logo-text{font-size:20px}.form-section h1{font-size:22px}.form-group input{padding:14px 16px}.sign-up-btn{padding:14px 24px;font-size:15px}}.otp-verification-section{margin-top:24px;animation:slideDown .3s ease-out}.otp-divider{height:1px;background:linear-gradient(90deg,transparent,#e5e7eb,transparent);margin-bottom:24px}.otp-content{display:flex;flex-direction:column;gap:16px}.otp-message{font-size:14px;color:#374151;text-align:center;font-weight:500}.otp-input-group{display:flex;justify-content:center}.otp-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;text-align:center;color:#1f2937;background:white;transition:border-color .2s ease,box-shadow .2s ease;letter-spacing:2px;font-weight:500}.otp-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.otp-input::placeholder{color:#9ca3af;letter-spacing:normal}.otp-buttons{display:flex;gap:12px;justify-content:center}.verify-btn{background:#10b981;color:white;border:none;padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;flex:1;max-width:120px}.verify-btn:hover{background:#059669;transform:translateY(-1px)}.verify-btn:active{transform:translateY(0)}.cancel-btn{background:#6b7280;color:white;border:none;padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease;flex:1;max-width:120px}.cancel-btn:hover{background:#4b5563;transform:translateY(-1px)}.cancel-btn:active{transform:translateY(0)}input:disabled{background-color:#f9fafb}button:disabled,input:disabled{color:#9ca3af;cursor:not-allowed;opacity:.6}button:disabled,button:disabled:hover{background-color:#d1d5db}button:disabled:hover{transform:none}.toggle-password:disabled{background:none;color:#d1d5db}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px);max-height:0}to{opacity:1;transform:translateY(0);max-height:200px}}@media (max-width:768px){.otp-verification-section{margin-top:20px}.otp-content{gap:14px}.otp-buttons{flex-direction:column;gap:10px}.cancel-btn,.verify-btn{max-width:100%;padding:12px 24px}}@media (max-width:480px){.otp-verification-section{margin-top:16px}.otp-message{font-size:13px}.otp-input{padding:14px 16px;font-size:15px}}.cancel-btn:focus,.sign-up-btn:focus,.toggle-password:focus,.verify-btn:focus,input[type=checkbox]:focus{outline:2px solid #3b82f6;outline-offset:2px}.animate-spin{animation:spin 1s linear infinite}.mr-2{margin-right:8px}.sign-up-btn,.verify-btn{display:flex;align-items:center;justify-content:center;min-height:44px;line-height:1}.sign-up-btn svg,.verify-btn svg{width:16px!important;height:16px!important;flex-shrink:0}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.sign-up-btn:disabled:not(.loading),.verify-btn:disabled:not(.loading){background-color:#d1d5db;color:#9ca3af;cursor:not-allowed;transform:none;opacity:.6}.sign-up-btn:disabled:not(.loading):hover,.verify-btn:disabled:not(.loading):hover{background-color:#d1d5db;transform:none}.sign-up-btn:disabled.loading{background-color:#3b82f6;color:white;cursor:not-allowed;opacity:.9}.verify-btn:disabled.loading{background-color:#10b981;color:white;cursor:not-allowed;opacity:.9}.forgot-password-card{margin-top:20px;animation:slideDown .3s ease-out}.forgot-password-card h2{font-size:24px;font-weight:600;color:#1e293b;margin-bottom:8px;text-align:left}.forgot-password-form{display:flex;flex-direction:column;gap:20px}.forgot-password-buttons{display:flex;gap:12px;justify-content:center;margin-top:8px}.forgot-password-buttons .cancel-btn,.forgot-password-buttons .verify-btn{flex:1;max-width:150px}.cards-container{display:flex;gap:24px;align-items:flex-start;justify-content:center;width:100%;max-width:900px}.cards-container .card{flex:1;margin:0}.container.forgot-password-active{align-items:flex-start;padding-top:40px;min-height:auto;padding-bottom:40px}@media (max-width:768px){.cards-container{flex-direction:column;gap:16px;max-width:100%}.cards-container .card{max-width:100%}.forgot-password-card{margin-top:0}.forgot-password-card h2{font-size:20px}.forgot-password-form{gap:16px}.forgot-password-buttons{flex-direction:column;gap:10px}.forgot-password-buttons .cancel-btn,.forgot-password-buttons .verify-btn{max-width:100%;padding:12px 24px}.container.forgot-password-active{padding-top:20px;padding-bottom:20px}}@media (max-width:480px){.forgot-password-card{margin-top:12px}.forgot-password-card h2{font-size:18px}.container:has(.forgot-password-card){align-items:flex-start;padding-top:16px;padding-bottom:16px}}