html body.branch-login-page { margin:0; padding:36px 24px; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 12% 20%,rgba(96,165,250,.09),transparent 45%),radial-gradient(ellipse at 92% 85%,rgba(99,102,241,.12),transparent 40%),#0b1220!important; color:#e7edf5; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; }
html body.branch-login-page * { box-sizing:border-box; }
html body.branch-login-page>.container { width:100%!important; max-width:1120px; padding:0; margin:auto; }
.branch-login-page .login-container { display:grid; grid-template-columns:minmax(0,1fr) 430px; align-items:center; gap:80px; width:100%; margin:0 auto; }
.branch-login-page .login-intro { display:flex; flex-direction:column; justify-content:space-between; min-height:520px; padding:12px 0; }
.branch-login-page .login-brand { display:flex; align-items:center; gap:13px; color:#f1f5f9; font-size:14px; font-weight:750; letter-spacing:1.6px; }
.branch-login-page .login-brand-symbol { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(147,197,253,.3); border-radius:13px; background:rgba(96,165,250,.08); color:#93c5fd; font-size:22px; letter-spacing:0; }
.branch-login-page .login-brand small { display:block; margin-top:5px; color:#77869e; font-size:9px; font-weight:600; letter-spacing:1.8px; }
.branch-login-page .login-eyebrow { display:block; color:#93c5fd; font-size:10px; font-weight:700; letter-spacing:2px; }
.branch-login-page .login-intro h1 { margin:22px 0; color:#f4f7fb; font-size:48px; font-weight:750; line-height:1.35; letter-spacing:-2px; }
.branch-login-page .login-intro h1 em { color:#93c5fd; font-style:normal; }
.branch-login-page .login-intro-copy>p { margin:0; color:#91a0b7; font-size:15px; line-height:1.9; }
.branch-login-page .login-topic-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.branch-login-page .login-topic-list span { padding:8px 12px; border:1px solid #253247; border-radius:7px; color:#b5c2d4; font-size:11px; background:rgba(255,255,255,.025); }
.branch-login-page .login-intro-footer { display:flex; align-items:center; gap:12px; color:#65758d; font-size:9px; font-weight:600; letter-spacing:1.8px; }
.branch-login-page .login-line { width:30px; height:1px; background:#456275; }
.branch-login-page .login-card { padding:38px; border:1px solid #2a364b; border-radius:22px; background:linear-gradient(155deg,#192436,#111b2b); box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035); color:#e7edf5; }
.branch-login-page .login-card-mark { display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:26px; border:1px solid #34445b; border-radius:14px; background:#202d40; color:#bfdbfe; font-size:20px; }
.branch-login-page .login-header h3 { margin:12px 0 10px; color:#f1f5f9; font-size:27px; font-weight:750; letter-spacing:-.8px; }
.branch-login-page .login-subtext { margin:0 0 30px; color:#92a1b6; font-size:13px; line-height:1.6; }
.branch-login-page .login-body .input { margin-bottom:20px; }
.branch-login-page .login-body label { display:block; margin-bottom:9px; color:#c7d3e3; font-size:12px; font-weight:600; }
.branch-login-page .login-body .form-control,.branch-login-page #userCode { display:block; width:100%; height:50px; padding:12px 14px; border:1px solid #354257; border-radius:10px; background:#0f1929!important; color:#edf3fa!important; font-size:14px; box-shadow:none; transition:border-color .2s,box-shadow .2s; }
.branch-login-page .login-body .form-control::placeholder,.branch-login-page #userCode::placeholder { color:#6d7e95; font-size:12px; }
.branch-login-page .login-body .form-control:focus,.branch-login-page #userCode:focus { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(96,165,250,.1); outline:none; }
.branch-login-page .login-body input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #172337 inset!important; -webkit-text-fill-color:#edf3fa!important; caret-color:#edf3fa; }
.branch-login-page .btn-primary { width:100%; height:50px; margin-top:8px; padding:0 18px; border:1px solid #93c5fd; border-radius:10px; background:#93c5fd; color:#102a50; font-size:14px; font-weight:750; cursor:pointer; transition:background .2s,box-shadow .2s; }
.branch-login-page .btn-primary:hover,.branch-login-page .btn-primary:focus { background:#bfdbfe; border-color:#bfdbfe; color:#102a50; box-shadow:0 5px 20px rgba(96,165,250,.12); }
.branch-login-page button:focus-visible { outline:2px solid #bfdbfe; outline-offset:4px; }
.branch-login-page .login-card-footer { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:27px; padding-top:21px; border-top:1px solid #2a364b; color:#8191a8; font-size:11px; }
.branch-login-page .login-card-footer i { color:#7e9eaf; font-size:14px; }
.branch-login-page .otp-inline { margin:6px 0 20px; padding:18px; border:1px solid #35564f; border-radius:12px; background:rgba(96,165,250,.035); }
.branch-login-page .login-otp-title { margin:0 0 15px; color:#bfdbfe; font-size:13px; font-weight:700; }
.branch-login-page #btnCheckQr { width:100%; height:44px; margin-top:12px; border:1px solid #42645f; border-radius:9px; background:#21413b; color:#b4f5e6; font-weight:700; cursor:pointer; }
.branch-login-page>.container>.alert { max-width:430px; margin:0 0 20px auto; padding:13px 16px; border-radius:11px; font-size:12px; line-height:1.7; }
.branch-login-page>.container>.alert-success { border:1px solid #356258; background:#14362e; color:#abebd6; }
.branch-login-page>.container>.alert-danger { border:1px solid #73424d; background:#3a202b; color:#fecdd3; }
@media(max-width:1000px) {
.branch-login-page .login-container { grid-template-columns:minmax(0,1fr) 400px; gap:40px; }
.branch-login-page .login-intro h1 { font-size:38px; }
.branch-login-page .login-card { padding:32px; }
}
@media(max-width:760px) {
html body.branch-login-page { padding:28px 18px; }
html body.branch-login-page>.container { max-width:430px; }
.branch-login-page .login-container { grid-template-columns:1fr; gap:28px; }
.branch-login-page .login-intro { min-height:0; padding:0; }
.branch-login-page .login-intro-copy,.branch-login-page .login-intro-footer { display:none; }
.branch-login-page .login-card { padding:30px 26px; border-radius:18px; }
.branch-login-page>.container>.alert { max-width:100%; margin-bottom:20px; }
}
@media(prefers-reduced-motion:reduce) {
.branch-login-page .form-control,.branch-login-page .btn-primary { transition:none; }
}

.branch-login-page .login-body .text-end { margin-top:16px; text-align:right; }
.branch-login-page .forgot-text { color:#92a1b6; font-size:12px; text-decoration:none; }
.branch-login-page .forgot-text:hover,.branch-login-page .forgot-text:focus { color:#bfdbfe; text-decoration:underline; }
.branch-login-page .login-body .d-grid { margin-top:8px; }
.branch-login-page>.container>.message { max-width:430px; margin:0 0 20px auto; padding:13px 16px; border:1px solid #354257; border-radius:11px; font-size:12px; line-height:1.7; color:#cbd5e1; }
.branch-login-page>.container>.message.error { border-color:#73424d; background:#3a202b; color:#fecdd3; }
.branch-login-page>.container>.message.success { border-color:#356258; background:#14362e; color:#abebd6; }
@media(max-width:760px) {
.branch-login-page>.container>.message { max-width:100%; }
}