:root{--red:#BC3132;--navy:#1B1B27;--n50:#FAFAFA;--n200:#E0E0E0;--n300:#C8C8C8;--n500:#8A8A8A;--success:#2E7D32;--success-bg:#E8F5E9;--indigo:#1F2660;--danger:#8B1A1A;--danger-bg:#FFEBEE}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,'Liberation Sans','Arimo',sans-serif;color:var(--navy);min-height:100vh;display:flex}
.brand{flex:1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 56px;color:#fff;background:linear-gradient(rgba(18,20,38,.74),rgba(18,20,38,.9)),url('../assets/login-bg.jpg') center/cover no-repeat,var(--navy)}
.brand img{height:40px;width:fit-content;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand h2{font-family:'Montserrat',Arial,sans-serif;font-weight:800;font-size:26px;max-width:430px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.brand p{color:#e8e8f0;font-size:14px;max-width:430px}
.formpanel{flex:1;background:transparent;display:flex;align-items:center;justify-content:center;padding:40px}
.lcard{background:transparent;border-radius:18px;box-shadow:none;border:none;padding:32px;width:430px;max-width:100%;display:flex;flex-direction:column;gap:16px}
.lcard h2{font-family:'Montserrat',Arial,sans-serif;font-weight:800;font-size:24px;margin-bottom:2px}
.lcard .sub{font-size:13px;color:var(--n500)}
.field label{display:block;font-size:11px;font-weight:bold;color:var(--n500);margin-bottom:5px}
.field .inp{border:1px solid var(--n300);border-radius:10px;padding:12px 14px;background:#fff;font-size:13px;color:var(--navy)}
.field .inp.ph{color:var(--n500)}
.btn{display:flex;align-items:center;justify-content:center;padding:13px;border-radius:10px;font-size:14px;font-weight:bold;cursor:pointer;border:none;background:var(--red);color:#fff;text-decoration:none}
.lopt{display:flex;justify-content:space-between;align-items:center;font-size:12px}
.lopt .rm{display:flex;align-items:center;gap:8px;color:#3A3A3A}
.lopt input[type=checkbox]{width:16px;height:16px;accent-color:var(--red);cursor:pointer;margin:0}
.link{color:#3A3A3A;font-weight:bold;cursor:pointer;text-decoration:none}
.link.lk-under:hover{text-decoration:underline}
.note{font-size:11px;color:var(--n500);text-align:center}
.otp{display:flex;gap:10px}
.otp .d{flex:1;height:54px;border:1px solid var(--n300);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',Arial,sans-serif;font-weight:800;font-size:22px;color:var(--navy)}
.otp .d.on{border-color:var(--red);box-shadow:0 0 0 2px var(--danger-bg)}
.success-ic{width:74px;height:74px;border-radius:50%;background:var(--success-bg);color:var(--success);display:flex;align-items:center;justify-content:center;font-size:36px;margin:4px auto 0}
@media(max-width:820px){body{flex-direction:column}.brand{padding:36px 28px;min-height:200px}}