* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; user-select:none; }
input, input * { user-select:text !important; }
body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at top left, rgba(37,99,235,.15), transparent 30%), radial-gradient(circle at bottom right, rgba(14,165,233,.12), transparent 28%), linear-gradient(135deg, #0f172a, #111827); padding:20px; }
.card { width:100%; max-width:980px; background:#fff; border-radius:24px; overflow:hidden; display:flex; box-shadow:0 25px 60px rgba(0,0,0,.25); }
.left { width:42%; background:linear-gradient(135deg, #2563eb, #0ea5e9); color:#fff; padding:40px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.left .logo { font-size:36px; font-weight:800; margin-bottom:16px; letter-spacing:-0.5px; }
.left .logo i { margin-right:10px; }
.left p { line-height:1.7; opacity:.9; max-width:280px; font-size:15px; }
.right { width:58%; padding:44px 48px; }
.right h2 { font-size:28px; color:#0f172a; font-weight:700; letter-spacing:-0.3px; margin-bottom:6px; }
.right .sub { color:#6b7280; margin-bottom:24px; font-size:14px; }
.alert { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; padding:12px 16px; border-radius:12px; margin-bottom:16px; font-size:14px; }
.form-group { position:relative; margin-bottom:16px; }
.form-group input { width:100%; height:50px; border:1px solid #d1d5db; border-radius:12px; padding:0 20px 0 46px; outline:none; font-size:15px; background:#fff; transition:0.15s; }
.form-group input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.form-group .icon-left { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:16px; }
.btn-primary { width:100%; height:50px; border:none; border-radius:12px; background:#2563eb; color:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:0.2s; }
.btn-primary:hover { background:#1d4ed8; }
.btn-primary i { margin-right:8px; }
.link { display:block; text-align:center; margin-top:18px; text-decoration:none; color:#2563eb; font-weight:600; font-size:15px; }
.link:hover { text-decoration:underline; }
.link i { margin-right:5px; }
@media (max-width:900px) { .card { flex-direction:column; } .left,.right { width:100%; } .left { padding:30px 20px; } .right { padding:28px 24px; } .right h2 { text-align:center; } .right .sub { text-align:center; } }
@media (max-width:480px) { .left .logo { font-size:28px; } .right { padding:20px; } .right h2 { font-size:24px; } }