.auth-container{background:#f0f4f4;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative;overflow:hidden}.auth-visual-bg{z-index:1;pointer-events:none;background:radial-gradient(circle,#a7dfd266 0%,#f0f4f400 70%);width:60%;height:60%;position:absolute;top:-10%;right:-5%}.auth-card{z-index:10;background:#fff;border-radius:24px;width:100%;max-width:420px;padding:40px;position:relative;box-shadow:0 20px 50px #162b2a1a}.auth-header{text-align:center;margin-bottom:32px}.auth-logo{background:var(--accent);color:#fff;border-radius:14px;place-items:center;width:50px;height:50px;margin:0 auto 16px;font-size:20px;font-weight:800;display:grid;box-shadow:0 8px 16px #116b5d33}.auth-card h1{color:#1a2b2b;letter-spacing:-.5px;margin:0 0 8px;font-size:26px}.auth-subtitle{color:var(--muted);font-size:14px;line-height:1.5}.auth-message{border-radius:12px;align-items:center;gap:12px;margin-bottom:24px;padding:12px 16px;font-size:13px;display:flex}.auth-message.success{color:#0e6b5a;background:#eef9f6;border:1px solid #d4ece7}.auth-message.error{color:#c53030;background:#fff5f5;border:1px solid #fed7d7}.auth-form{gap:20px;display:grid}.label-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.auth-form label{color:#4a5568;font-size:13px;font-weight:600}.input-with-icon{position:relative}.input-icon{color:#a0aec0;font-size:16px;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.auth-form .form-control{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;width:100%;padding:12px 14px 12px 42px;font-size:14px;transition:all .2s}.auth-form .form-control:focus{border-color:var(--accent);background:#fff;outline:none;box-shadow:0 0 0 4px #116b5d1a}.password-toggle{color:#a0aec0;background:0 0;border:none;padding:4px;font-size:16px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.form-options{align-items:center;margin-top:-10px;margin-bottom:10px;display:flex}.checkbox-container{cursor:pointer;color:#718096;-webkit-user-select:none;user-select:none;align-items:center;padding-left:28px;font-size:13px;display:flex;position:relative}.checkbox-container input{opacity:0;cursor:pointer;width:0;height:0;position:absolute}.checkmark{background-color:#f1f5f9;border:1.5px solid #e2e8f0;border-radius:4px;width:18px;height:18px;position:absolute;top:0;left:0}.checkbox-container:hover input~.checkmark{background-color:#e2e8f0}.checkbox-container input:checked~.checkmark{background-color:var(--accent);border-color:var(--accent)}.checkmark:after{content:"";display:none;position:absolute}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{border:2px solid #fff;border-width:0 2px 2px 0;width:5px;height:10px;top:2px;left:6px;transform:rotate(45deg)}.auth-submit{height:48px;margin-top:8px;font-weight:600}.auth-divider{color:#a0aec0;align-items:center;margin:24px 0;font-size:12px;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:#e2e8f0;flex:1;height:1px}.auth-divider span{padding:0 12px}.oauth-btn{color:#4a5568;background:#fff;border:1px solid #e2e8f0;justify-content:center;align-items:center;gap:10px;height:48px;font-weight:500;display:flex}.oauth-btn:hover{background:#f8fafc;border-color:#cbd5e0}.auth-footer-toggle{text-align:center;color:#718096;margin-top:24px;font-size:14px}.highlight-link,.text-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;font-weight:600}.highlight-link:hover,.text-btn:hover{text-decoration:underline}.text-btn{font-size:12px}.exit-btn{color:#718096;font-size:13px}.w-full{width:100%}.mt-6{margin-top:24px}.animate-fade-in{animation:.5s ease-out fadeIn}.animate-slide-up{animation:.3s ease-out slideUp}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.auth-loading{text-align:center;color:#4a5568}.spinner{border:3px solid #116b5d1a;border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;margin:0 auto 16px;animation:1s linear infinite spin}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}
