:root{--primary:#1e3a8a;--primary-dark:#152c6b;--secondary:#3b82f6;--secondary-light:#60a5fa;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--dark:#1f2937;--light:#f9fafb;--gray:#6b7280;--border:#e5e7eb;--radius:14px;--shadow:0 20px 40px rgba(0,0,0,.08)}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:#f4f6fb;color:var(--dark);font-family:Cambria,"Times New Roman",serif}
.container{width:100%;max-width:1000px;min-height:500px;background:#fff;border-radius:18px;display:flex;overflow:hidden;box-shadow:var(--shadow)}
.left{flex:1;background:var(--primary);color:#fff;padding:50px 40px;display:flex;flex-direction:column;justify-content:center;position:relative}
.left h1{font-size:2.4rem;margin-bottom:15px}
.left h3{font-size:28px;margin-bottom:10px}
.left p{font-size:1rem;line-height:1.6;opacity:.9}
.step-indicator{display:flex;gap:10px;margin-bottom:25px}
.step-dot{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:700;transition:.3s}
.step-dot.active{background:var(--secondary-light);transform:scale(1.1)}
.step-dot.completed{background:var(--success)}
.progress-bar{height:8px;margin-top:10px;background:rgba(255,255,255,.2);border-radius:6px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--secondary-light),#fff);transition:.5s}
.right{flex:1;text-align:center;padding:50px 40px;background:#fff;overflow-y:auto;max-height:700px}
.right h2,.form-header h2{color:var(--primary);margin-bottom:6px}
.form-header p{color:var(--gray);margin-bottom:20px}
.msg{background:#fee2e2;color:var(--danger);padding:12px;border-radius:10px;margin-bottom:18px;font-size:14px}
.input-group{position:relative;margin-bottom:18px}
.input-group i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af}
.input-group input{width:100%;padding:14px 14px 14px 42px;border:1px solid #d1d5db;border-radius:10px;font:15px Cambria,"Times New Roman",serif;transition:.3s}
.input-group input:focus{outline:0;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.captcha-box{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.captcha{min-width:110px;padding:12px 18px;background:var(--primary);color:#fff;border-radius:10px;text-align:center;font-size:20px;font-weight:700;letter-spacing:3px;user-select:none}
.captcha-box input{flex:1;padding:14px;border:1px solid #ccc;border-radius:10px;font:14px Cambria,"Times New Roman",serif;outline:0;transition:.3s}
.captcha-box input:focus{border-color:var(--secondary);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.rem-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.rem-line a{color:var(--secondary);font-size:14px;text-decoration:none}
.rem-line a:hover{text-decoration:underline}
.btn-group{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:14px 40px;border-radius:12px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:.3s}
.btn i{margin-right:8px}
.btn-login{background:#fff;color:var(--primary)}
.btn-login:hover{background:#e0e7ff;transform:translateY(-2px)}
.btn-app{background:var(--success);color:#fff}
.btn-app:hover{background:#059669;transform:translateY(-2px)}
.btn-register{background:var(--warning);color:#fff}
.btn-register:hover{background:#d97706;transform:translateY(-2px)}
.btn-signup{background:var(--secondary);color:#fff}
.btn-signup:hover{background:#2563eb}
.btn-submit{width:100%;padding:14px;border:0;border-radius:12px;background:var(--primary);color:#fff;font:600 16px Cambria,"Times New Roman",serif;cursor:pointer;transition:.3s}
.btn-submit:hover{background:var(--primary-dark);transform:translateY(-2px)}
.welcome-box{width:100%;text-align:left}
.welcome-box h1{font-size:42px;margin-bottom:15px}
.welcome-box p{font-size:17px;color:#e0e7ff;margin-bottom:35px}
@media(max-width:768px){
body{padding:0}
.container{flex-direction:column;max-width:100%;min-height:100vh;border-radius:0;box-shadow:none}
.left,.right{width:100%;padding:25px}
.left{min-height:40vh}
.right{min-height:60vh;max-height:none}
.left h1{font-size:28px}
.left p{font-size:18px}
}
@media(max-width:480px){
body{font-size:14px}
.left,.right{padding:20px}
.left h1{font-size:25px}
.left h3{font-size:22px}
.welcome-box h1{font-size:32px}
.captcha-box{gap:8px}
.captcha{min-width:90px;padding:12px 8px;font-size:17px}
.btn-group{gap:10px}
.btn{width:100%;min-width:0;padding:13px 20px}
}