:root { --login-navy:#10243e; --login-blue:#174f86; --login-yellow:#f5b800; }
body.login-modern { min-height:100vh; margin:0; color:#172333; background:#eef3f7 !important; font-family:Arial,"Helvetica Neue",sans-serif; }
.login-modern .wrapper { min-height:100vh; }
.login-shell { min-height:100vh; display:grid !important; grid-template-columns:minmax(420px,1.05fr) minmax(460px,.95fr); margin:0 !important; background:#fff; }
.login-intro { height:100%; padding:clamp(56px,8vw,110px); display:flex; flex-direction:column; justify-content:center; color:#fff; background:linear-gradient(135deg,rgba(9,29,51,.97),rgba(23,79,134,.94)),url('../images/bg-themes/9.png') center/cover; position:relative; overflow:hidden; }
.login-intro::after { content:""; width:430px; height:430px; position:absolute; right:-230px; bottom:-210px; border:75px solid rgba(245,184,0,.16); border-radius:50%; }
.login-intro__badge { width:max-content; margin-bottom:28px; padding:8px 13px; color:#ffe99a; background:rgba(245,184,0,.14); border:1px solid rgba(245,184,0,.35); border-radius:999px; font-size:.76rem; font-weight:800; letter-spacing:.1em; }
.login-intro h1 { max-width:650px; margin:0; color:#fff; font-size:clamp(2.4rem,4vw,4.1rem); font-weight:800; line-height:1.12; }
.login-intro > p { max-width:570px; margin:24px 0 38px; color:rgba(255,255,255,.76); font-size:1.1rem; line-height:1.7; }
.login-intro__feature { margin:10px 0; display:flex; align-items:center; gap:15px; }
.login-intro__feature > i { width:48px; height:48px; display:grid; place-items:center; color:var(--login-navy); background:var(--login-yellow); border-radius:13px; font-size:1.5rem; }
.login-intro__feature strong,.login-intro__feature small { display:block; }
.login-intro__feature strong { color:#fff; font-size:1rem; }
.login-intro__feature small { color:rgba(255,255,255,.65); }
.login-shell > .container { width:100%; display:flex; align-items:center; justify-content:center; padding:40px; }
.login-shell .row { width:100%; }
.login-form-column { width:min(100%,470px); padding:0; }
.login-modern .card { margin:0 !important; border:0; border-radius:20px; box-shadow:none; }
.login-modern .card-body,.login-modern .p-4 { padding:0 !important; }
.login-modern .mb-3.text-center img { width:145px; max-height:62px; object-fit:contain; }
.login-modern .text-center.mb-4 { margin:30px 0 34px !important; }
.login-modern .text-center h2 { margin-bottom:8px; font-size:2rem; font-weight:800; }
.login-modern .text-center p { color:#64748b; font-size:1rem; }
.login-modern .form-label { margin-bottom:8px; font-size:.95rem; font-weight:700; }
.login-modern .form-control,.login-modern .input-group-text { min-height:54px; border-color:#cbd6e1; font-size:1rem; }
.login-modern .form-control { border-radius:11px; padding:12px 16px; }
.login-modern .input-group .form-control { border-radius:11px 0 0 11px; }
.login-modern .input-group-text { border-radius:0 11px 11px 0; padding:0 17px; }
.login-modern .form-control:focus { border-color:var(--login-blue); box-shadow:0 0 0 4px rgba(23,79,134,.13); }
.login-modern .btn-primary { min-height:56px; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--login-blue); border:0; border-radius:11px; font-size:1.05rem; font-weight:800; box-shadow:0 9px 20px rgba(23,79,134,.2); }
.login-modern .btn-primary:hover { background:#103f6d; transform:translateY(-1px); }
.login-modern .btn-primary i { font-size:1.4rem; }
.login-help { margin-top:30px; padding-top:24px; color:#64748b; text-align:center; border-top:1px solid #e1e7ed; }
.login-help a { color:var(--login-blue); font-weight:700; }
.login-security { margin-top:18px; padding:14px; display:flex; align-items:flex-start; gap:10px; color:#713333; background:#fff1f1; border:1px solid #e6a0a0; border-left:5px solid #b42323; border-radius:10px; font-size:.86rem; line-height:1.5; }
.login-security > i { margin-top:2px; flex:0 0 auto; color:#b42323; font-size:1.45rem; }
.login-security strong { display:block; color:#7f1d1d; }
.login-location { padding:11px 13px; display:flex; align-items:center; gap:10px; color:#475569; background:#f8fafc; border:1px solid #dbe4ec; border-radius:10px; font-size:.8rem; line-height:1.35; }
.login-location > i { flex:0 0 auto; color:var(--login-blue); font-size:1.3rem; }
.login-location span { flex:1; }
.login-location strong,.login-location small { display:block; }
.login-location strong { color:#26384d; }
.login-location button { padding:5px 8px; color:var(--login-blue); background:#fff; border:1px solid #b9cad9; border-radius:7px; font-size:.75rem; font-weight:700; }
.login-location[data-status="granted"] { color:#17603a; background:#eefbf4; border-color:#a9ddbf; }
.login-location[data-status="denied"],.login-location[data-status="unavailable"],.login-location[data-status="timeout"] { color:#7a4a11; background:#fff8e8; border-color:#edd49d; }
.login-location-attribution { margin-top:4px; display:block; color:#64748b; font-size:.68rem; text-align:right; }
@media(max-width:900px){.login-shell{display:flex !important; background:linear-gradient(135deg,#10243e,#174f86);}.login-intro{display:none}.login-shell>.container{padding:30px 20px}.login-modern .card{padding:36px 28px !important; box-shadow:0 18px 50px rgba(0,0,0,.2)}.login-modern .card-body{padding:0 !important}}
@media(max-width:480px){.login-shell>.container{padding:16px}.login-modern .card{padding:30px 22px !important}.login-modern .text-center h2{font-size:1.65rem}}
@media(prefers-reduced-motion:reduce){.login-modern *{transition:none !important}}
.mfa-notification { margin-bottom:18px; padding:13px 15px; display:flex; align-items:flex-start; gap:10px; border:1px solid; border-radius:11px; font-size:.92rem; line-height:1.5; }
.mfa-notification[hidden] { display:none; }
.mfa-notification i { margin-top:1px; flex:0 0 auto; font-size:1.35rem; }
.mfa-notification.is-error { color:#8a3c00; background:#fff7df; border-color:#f0cf77; }
.mfa-notification.is-success { color:#12633b; background:#eaf9f0; border-color:#9dd8b7; }
.mfa-loader { position:fixed; inset:0; z-index:2000; padding:20px; display:grid; place-items:center; visibility:hidden; opacity:0; background:rgba(8,25,45,.72); backdrop-filter:blur(8px); transition:opacity .22s ease,visibility .22s ease; }
.mfa-loader.is-visible { visibility:visible; opacity:1; }
.mfa-loader__card { width:min(420px,100%); padding:38px 34px; color:#23364b; background:#fff; border-radius:22px; box-shadow:0 28px 80px rgba(0,0,0,.28); text-align:center; }
.mfa-loader__visual { width:82px; height:82px; margin:0 auto 22px; position:relative; display:grid; place-items:center; color:#174f86; background:#e8f2fb; border-radius:50%; font-size:2.25rem; }
.mfa-loader__visual span { position:absolute; inset:-6px; border:4px solid rgba(23,79,134,.14); border-top-color:#f5b800; border-radius:50%; animation:mfa-spin .85s linear infinite; }
.mfa-loader__visual.is-success { color:#fff; background:#16834a; transform:scale(1.06); }
.mfa-loader__visual.is-success span { display:none; }
.mfa-loader__card h2 { margin:0 0 9px; color:#10243e; font-size:1.55rem; font-weight:800; }
.mfa-loader__card p { margin:0; color:#64748b; line-height:1.6; }
.mfa-loader__progress { height:4px; margin-top:25px; overflow:hidden; background:#e7edf3; border-radius:999px; }
.mfa-loader__progress span { width:45%; height:100%; display:block; background:linear-gradient(90deg,#174f86,#f5b800); border-radius:inherit; animation:mfa-progress 1.1s ease-in-out infinite; }
.mfa-loader__visual.is-success + h2 + p + .mfa-loader__progress span { width:100%; animation:none; background:#16834a; }
body.mfa-is-loading { overflow:hidden; }
@keyframes mfa-spin { to { transform:rotate(360deg); } }
@keyframes mfa-progress { 0% { transform:translateX(-110%); } 100% { transform:translateX(245%); } }
@media(prefers-reduced-motion:reduce){.mfa-loader__visual span,.mfa-loader__progress span{animation-duration:1.8s !important}}