:root { --c2-purple:#7c3aed; --ink:#19233d; --surface:#f5f7fc; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:#fff; color:var(--ink); font-family:"Helvetica Neue",Arial,sans-serif; }
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); }
.login-brand { min-height:100vh; background:var(--surface); display:flex; align-items:center; justify-content:center; text-align:center; padding:48px; }
.brand-content { max-width:430px; width:100%; transform:translateY(-46px); }
.brand-logo { display:block; width:190px; max-width:100%; height:auto; margin:0 auto 34px; }
.brand-title { margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-.8px; color:var(--ink); }
.brand-copy { margin:0; color:#55709a; font-size:17px; line-height:1.5; font-weight:500; }
.login-area { display:flex; align-items:center; justify-content:center; padding:48px; background:#fff; }
.login-card { width:100%; max-width:390px; }
.login-card h1 { margin:0 0 8px; color:#1d1d1f; font-size:28px; font-weight:800; letter-spacing:-.4px; }
.login-subtitle { margin:0 0 31px; color:#6b7280; font-size:14px; }
.form-group { margin-bottom:20px; }
.form-label { display:block; margin-bottom:8px; color:#374151; font-size:13px; font-weight:700; }
.password-label { display:flex; justify-content:space-between; align-items:center; }
.password-label a { color:var(--c2-purple); text-decoration:none; font-weight:700; }
.form-control { width:100%; height:46px; border:1px solid #d6dfed; border-radius:7px; padding:10px 12px; background:#eaf1ff; box-shadow:none; color:#1f2937; }
.form-control:focus { border-color:var(--c2-purple); box-shadow:0 0 0 3px rgba(124,58,237,.13); outline:0; }
.remember { display:flex; align-items:center; gap:8px; margin:2px 0 25px; color:#4b5563; font-size:13px; font-weight:700; }
.remember input { width:14px; height:14px; margin:0; accent-color:var(--c2-purple); }
.btn-primary { height:46px; border:0; border-radius:6px; width:100%; color:#fff; background:linear-gradient(100deg,#7c3aed,#9139ec); font-size:14px; font-weight:800; transition:transform .2s ease,box-shadow .2s ease; }
.btn-primary:hover,.btn-primary:focus { background:linear-gradient(100deg,#6d28d9,#7c3aed); color:#fff; box-shadow:0 10px 22px rgba(124,58,237,.24); transform:translateY(-1px); }
.login-footer { margin-top:29px; color:#a3a3a3; text-align:center; font-size:12px; }
.modal-content { border-radius:14px; }
@media (max-width:820px) { .login-page { grid-template-columns:1fr; } .login-brand { min-height:auto; padding:42px 24px 28px; } .brand-content { transform:none; } .brand-logo { width:145px; margin-bottom:18px; } .brand-title { font-size:28px; } .brand-copy { font-size:15px; } .login-area { min-height:auto; padding:34px 24px 45px; align-items:flex-start; } }