:root{--ffx-red:#C31212;--ffx-red-600:#A50F0F;--ink:#0F172A;--muted:#6B7280;--bg:#ffffff;--panel:#ffffff;--stroke:#E5E7EB;--radius:14px;--shadow:0 10px 30px rgba(16,24,40,.08)}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:var(--bg);color:var(--ink)}
.split{display:grid;grid-template-columns:1fr 520px;min-height:100vh}
.hero{background:url('./assets/imgs/login_background.jpeg') center/cover no-repeat;position:relative}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.panel{display:flex;flex-direction:column;gap:18px;justify-content:center;padding:40px;min-width:450px;margin:0 auto}
.brand{display:flex;justify-content:center;margin-bottom:6px}
.logo{align-self: center;}
h1{margin:0;text-align:center;color:var(--ffx-red);font-size:28px}
form{display:flex;flex-direction:column;gap:12px;background:var(--panel);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
label{display:flex;flex-direction:column;gap:6px;font-weight:600}
input{padding:12px 14px;border:1px solid var(--stroke);border-radius:12px;font-size:14px}
.pwd-wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.icon-btn{border:1px solid var(--stroke);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.primary{appearance:none;border:none;background:linear-gradient(90deg,var(--ffx-red),var(--ffx-red-600));color:#fff;padding:12px 16px;border-radius:12px;font-weight:800;cursor:pointer}
.msg{min-height:20px;color:var(--ffx-red);font-weight:600}
@media (max-width:980px){.split{grid-template-columns:1fr}.hero{display:none}.panel{max-width:640px}}