/* ============================================
   eSurvey.CX - Login V2 - Light Design
   ============================================ */

:root {
    --primary: #6C3CE9;
    --primary-light: #8B5CF6;
    --primary-dark: #5521C6;
    --accent: #E63946;
    --bg-light: #ffffff;
    --bg-form: #fafbfd;
    --text-dark: #1a1a2e;
    --text-medium: #6b7280;
    --text-light: #9ca3af;
    --border: #eef0f6;
    --success: #10B981;
    --error: #EF4444;
    --gradient: linear-gradient(135deg, #6C3CE9 0%, #8B5CF6 40%, #B794F6 100%);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg-light); color:var(--text-dark); min-height:100vh; }

.login-container { display:flex; min-height:100vh; }
.login-container.single { justify-content:center; align-items:center; background:var(--bg-form); }

.login-left { flex:1.1; background:var(--gradient); display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px; position:relative; overflow:hidden; }
.login-left::after { content:''; position:absolute; bottom:-80px; right:-80px; width:300px; height:300px; background:rgba(255,255,255,0.06); border-radius:50%; }
.login-left::before { content:''; position:absolute; top:-60px; left:-60px; width:200px; height:200px; background:rgba(255,255,255,0.04); border-radius:50%; }

.login-brand { text-align:center; z-index:1; }
.login-logo { height:50px; margin-bottom:10px; filter:brightness(0) invert(1); }
.login-tagline { color:rgba(255,255,255,0.85); font-size:15px; font-weight:300; }

.floating-cards { margin-top:40px; z-index:1; width:80%; max-width:320px; }
.float-card { background:rgba(255,255,255,0.15); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.25); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:12px; color:white; font-weight:500; font-size:13px; margin-bottom:10px; animation:floatUp 4s ease-in-out infinite; }
.card-1 { animation-delay:0s; } .card-2 { animation-delay:1.3s; } .card-3 { animation-delay:2.6s; }
@keyframes floatUp { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.float-card i { font-size:18px; }

.login-right { flex:1; background:white; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px; }
.login-right.full { max-width:500px; margin:0 auto; background:white; border-radius:20px; padding:40px; box-shadow:0 8px 30px rgba(0,0,0,0.06); }

.login-form-wrapper { width:100%; max-width:380px; }
.login-title { font-size:28px; font-weight:800; color:var(--text-dark); margin-bottom:4px; }
.login-subtitle { color:var(--text-light); font-size:14px; margin-bottom:28px; line-height:1.5; }

.alert { padding:12px 16px; border-radius:12px; font-size:13px; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.alert-error { background:#FEF2F2; color:#DC2626; border:1px solid #FECACA; }
.alert-success { background:#ECFDF5; color:#059669; border:1px solid #A7F3D0; }

.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:12px; font-weight:600; color:var(--text-medium); margin-bottom:5px; letter-spacing:0.3px; text-transform:uppercase; }
.form-group label i { margin-right:4px; color:var(--primary-light); }
.form-group input { width:100%; padding:12px 16px; border:2px solid var(--border); border-radius:12px; font-size:14px; background:var(--bg-form); color:var(--text-dark); font-family:inherit; outline:none; transition:all 0.2s; }
.form-group input:focus { border-color:var(--primary-light); background:white; box-shadow:0 0 0 4px rgba(139,92,246,0.08); }
.form-group input::placeholder { color:#c4c4d0; }

.password-wrapper { position:relative; }
.toggle-password { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-light); cursor:pointer; }

.form-actions { display:flex; justify-content:flex-end; margin:8px 0 18px; }
.forgot-link { color:var(--primary-light); font-size:12px; font-weight:500; text-decoration:none; }
.forgot-link:hover { color:var(--primary); }

.btn-login { width:100%; padding:14px; background:var(--gradient); color:white; border:none; border-radius:12px; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; box-shadow:0 6px 20px rgba(108,60,233,0.25); transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-login:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(108,60,233,0.35); }
.btn-login:disabled { opacity:0.7; cursor:not-allowed; transform:none; }

.login-footer { margin-top:30px; text-align:center; color:#c4c4d0; font-size:11px; }

/* 2FA */
.twofa-icon { width:72px; height:72px; border-radius:50%; background:rgba(108,60,233,0.08); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.twofa-icon i { font-size:28px; color:var(--primary); }
.twofa-icon.warning { background:rgba(245,158,11,0.08); }
.twofa-icon.warning i { color:#F59E0B; }

.code-inputs { display:flex; gap:8px; justify-content:center; margin:20px 0; }
.code-digit { width:52px!important; height:58px; text-align:center; font-size:24px!important; font-weight:700; border-radius:12px!important; padding:0!important; }

.twofa-actions { display:flex; justify-content:space-between; margin-top:20px; }
.resend-link,.back-link { color:var(--text-light); font-size:13px; text-decoration:none; }
.resend-link:hover,.back-link:hover { color:var(--primary); }

.password-strength { height:4px; background:var(--border); border-radius:2px; margin-top:8px; overflow:hidden; }
.strength-fill { height:100%; width:0; border-radius:2px; transition:all 0.3s; }

@media (max-width:768px) { .login-left { display:none; } }