@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root { --navy:#101d36;--blue:#316eb5;--ink:#172647;--muted:#69758a;--line:#dce4ef; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0;color:var(--ink);background:radial-gradient(circle at 15% 15%,rgba(49,110,181,.15),transparent 28rem),#eef3f9;font-family:'Montserrat',sans-serif; }
body::before { position:fixed;inset:0;z-index:-1;content:"";opacity:.28;background-image:linear-gradient(rgba(49,110,181,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(49,110,181,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 80%); }
.login-shell { display:grid;place-items:center;min-height:calc(100svh - 42px);padding:clamp(1rem,4vw,3rem); }
.login-card { display:grid;grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr);width:min(100%,980px);overflow:hidden;border:1px solid rgba(255,255,255,.75);border-radius:24px;background:#fff;box-shadow:0 2rem 5rem rgba(16,29,54,.18); }
.login-brand-panel { display:flex;flex-direction:column;min-height:570px;padding:clamp(2rem,4vw,3.5rem);color:#fff;background:radial-gradient(circle at 85% 15%,rgba(116,190,255,.25),transparent 17rem),linear-gradient(145deg,#172c50,#0d172b); }
.login-brand { display:flex;align-items:center;gap:.85rem;color:#fff;text-decoration:none; }
.login-brand img { width:145px;height:auto;filter:brightness(0) invert(1); }
.login-brand span { padding-left:.85rem;border-left:1px solid rgba(255,255,255,.35);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.brand-copy { margin:auto 0; }
.eyebrow { display:block;color:#75baf2;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; }
.brand-copy h1 { margin:.9rem 0 1.25rem;font-size:clamp(2rem,3.4vw,3.2rem);font-weight:700;line-height:1.08;letter-spacing:-.04em; }
.brand-copy p { max-width:390px;margin:0;color:rgba(255,255,255,.68);font-size:.9rem;line-height:1.8; }
.security-note { display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.65);font-size:.7rem; }
.security-note i { color:#75baf2;font-size:1rem; }
.login-form-panel { display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,4.5rem); }
.form-heading { display:flex;align-items:center;gap:1rem;margin-bottom:2rem; }
.form-icon { display:grid;flex:0 0 48px;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--blue);background:#eaf3fc;font-size:1.1rem; }
.form-heading h2 { margin:.2rem 0 .25rem;font-size:clamp(1.65rem,3vw,2.15rem);font-weight:700;letter-spacing:-.035em; }
.form-heading p { margin:0;color:var(--muted);font-size:.78rem; }
.field-group { margin-bottom:1.15rem; }
.field-group label { display:block;margin-bottom:.5rem;font-size:.72rem;font-weight:700; }
.input-wrap { position:relative; }
.input-wrap>i { position:absolute;top:50%;left:1rem;z-index:2;color:#8a97aa;transform:translateY(-50%); }
.input-wrap .form-control { min-height:52px;padding:.8rem 1rem .8rem 2.9rem;border:1px solid var(--line);border-radius:12px;background:#f9fbfd;font-size:.9rem;box-shadow:none; }
.input-wrap .form-control:focus { border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(49,110,181,.12); }
.password-wrap .form-control { padding-right:3rem; }
.password-toggle { position:absolute;top:50%;right:.65rem;display:grid;width:38px;height:38px;padding:0;place-items:center;border:0;border-radius:9px;color:#758299;background:transparent;transform:translateY(-50%); }
.password-toggle:hover,.password-toggle:focus-visible { color:var(--blue);background:#eaf3fc;outline:0; }
.login-submit { display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;margin-top:.5rem;padding:.8rem 1.15rem;border:0;border-radius:12px;color:#fff;background:linear-gradient(135deg,#316eb5,#23548e);font-size:.82rem;font-weight:700;box-shadow:0 .8rem 1.6rem rgba(49,110,181,.22); }
.login-submit:hover,.login-submit:focus-visible { color:#fff;background:linear-gradient(135deg,#2b65a8,#1c477c);transform:translateY(-1px); }
.back-link { align-self:center;margin-top:2rem;color:#647087;font-size:.72rem;font-weight:600;text-decoration:none; }
.back-link:hover { color:var(--blue); }
.login-footer { display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:.4rem 1.5rem;color:rgba(255,255,255,.62);background:var(--navy);font-size:.65rem; }
.toast { border-radius:12px;box-shadow:0 1rem 2rem rgba(16,29,54,.2); }

@media (max-width:767.98px) {
  .login-shell { align-items:start;padding:1rem; }
  .login-card { grid-template-columns:1fr;max-width:520px;border-radius:18px; }
  .login-brand-panel { min-height:auto;padding:1.35rem 1.5rem; }
  .login-brand img { width:125px; }
  .brand-copy { margin:2rem 0 .5rem; }
  .brand-copy h1 { margin:.65rem 0;font-size:2rem; }
  .brand-copy p,.security-note { display:none; }
  .login-form-panel { padding:2rem 1.5rem; }
  .login-footer { justify-content:center;gap:1rem;text-align:center; }
}

@media (max-width:420px) {
  .login-brand span { display:none; }
  .form-icon { display:none; }
  .login-footer span:last-child { display:none; }
}

@media (prefers-reduced-motion:no-preference) {
  .login-card { animation:login-in .5s ease both; }
  .login-submit { transition:transform .2s ease,background .2s ease; }
  @keyframes login-in { from { opacity:0;transform:translateY(14px); } to { opacity:1;transform:none; } }
}

.mfa-notice { display:flex;align-items:center;gap:.75rem;margin:-.4rem 0 1.4rem;padding:.85rem 1rem;border:1px solid #cfe1f5;border-radius:11px;color:#315778;background:#edf6ff;font-size:.7rem;line-height:1.5; }
.mfa-notice i { color:#316eb5;font-size:1rem; }
.mfa-code-input { padding-left:2.9rem!important;text-align:center;font-size:1.35rem!important;font-weight:700;letter-spacing:.42em; }
.mfa-actions { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.25rem; }
.mfa-actions form { margin:0; }
.mfa-actions button { padding:.35rem 0;border:0;color:#68778c;background:transparent;font-size:.66rem;font-weight:600; }
.mfa-actions button:hover { color:#316eb5; }
@media (max-width:420px) { .mfa-actions { align-items:flex-start;flex-direction:column;gap:.35rem; } }