:root{--navy:#081d35;--blue:#173f71;--red:#d5232a;--red-dark:#a9151c;--ink:#142235;--muted:#637083;--line:#dbe2ea;--bg:#f4f7fa;--white:#fff;--success:#16794d;--shadow:0 18px 48px rgba(8,29,53,.14)}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh}button,input{font:inherit}.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,54%) minmax(430px,46%)}.brand-panel{position:relative;overflow:hidden;padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:radial-gradient(circle at 75% 30%,rgba(213,35,42,.28),transparent 28%),linear-gradient(145deg,#061525 0%,#0b2a4c 58%,#071727 100%)}.brand-panel:after{content:"";position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,var(--red) 0 50%,#2f70ad 50%)}.brand-lockup,.brand-footer{position:relative;z-index:1}.brand-lockup{display:flex;gap:16px;align-items:center}.brand-mark{width:72px;height:72px;display:grid;place-items:center;border:3px solid #fff;transform:rotate(45deg);box-shadow:0 0 0 4px rgba(213,35,42,.8)}.brand-mark span{transform:rotate(-45deg);font-size:29px;font-weight:900}.brand-name small,.eyebrow{display:block;color:#f05b61;text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:900}.brand-name strong{display:block;font-size:clamp(20px,2vw,29px);line-height:1.15}.brand-name em{font-style:normal;color:#c7d1dc}.brand-message{position:relative;z-index:1;max-width:650px}.brand-message h1{font-size:clamp(42px,5vw,78px);line-height:.98;margin:14px 0 22px;letter-spacing:-.045em}.brand-message p{max-width:620px;color:#c9d4df;font-size:clamp(16px,1.6vw,20px);line-height:1.65}.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}.feature{padding:18px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);backdrop-filter:blur(8px)}.feature b{display:block;margin-bottom:7px}.feature span{font-size:13px;line-height:1.45;color:#bfcbd7}.brand-footer{display:flex;justify-content:space-between;color:#9fb0c0;font-size:12px}.auth-stage{display:grid;place-items:center;padding:32px;background:linear-gradient(180deg,#f8fafc,#eef3f7)}.card{width:min(520px,100%);padding:42px;border:1px solid #e1e6ec;border-radius:16px;background:#fff;box-shadow:var(--shadow)}.card.wide{width:min(760px,100%)}.card-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px}.card-badge{flex:0 0 52px;height:52px;display:grid;place-items:center;border-radius:8px;background:var(--navy);color:#fff;font-weight:900}.card h1,.card h2{margin:5px 0 8px;color:var(--navy);letter-spacing:-.03em}.card h1{font-size:40px}.card h2{font-size:34px}.card p{margin:0;color:var(--muted);line-height:1.55}.message{margin:0 0 18px;padding:12px 14px;border-radius:8px;background:#fff0f0;color:#8b161b;border:1px solid #f5c4c6}.message.success{background:#edf9f3;color:#12623f;border-color:#b9e4d0}.form{display:grid;gap:18px}.field{display:grid;gap:8px}.field>span{color:var(--navy);font-size:13px;font-weight:800}.input-wrap{display:flex;align-items:center;border:1px solid #ccd5df;border-radius:8px;background:#fff;transition:.2s}.input-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,63,113,.12)}.input-wrap i{width:45px;text-align:center;color:#7c8996;font-style:normal}.input-wrap input,.field>input,.field>textarea{width:100%;min-height:50px;border:1px solid #ccd5df;border-radius:8px;padding:0 14px;color:var(--navy);background:#fff;outline:none}.input-wrap input{border:0;padding-left:0}.input-wrap button{align-self:stretch;border:0;background:transparent;color:var(--red-dark);font-size:12px;font-weight:900;padding:0 15px;cursor:pointer}.primary,.secondary{min-height:50px;border-radius:8px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:900;text-decoration:none;cursor:pointer}.primary{border:0;background:var(--red);color:#fff}.primary:hover{background:var(--red-dark)}.secondary{border:1px solid #bdc8d3;background:#fff;color:var(--navy)}.help-box{display:flex;gap:13px;margin-top:24px;padding:16px;border-radius:10px;background:#f4f7fa}.help-box strong{color:var(--navy)}.help-box p{font-size:13px}.note{margin-top:20px!important;font-size:11px;text-align:center}.code-input{font-size:28px!important;letter-spacing:.22em;text-align:center;font-weight:800}.progress{display:flex;align-items:center;gap:12px;margin-bottom:28px}.progress-step{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.progress-step i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e8edf2;font-style:normal;font-weight:900}.progress-step.active i,.progress-step.done i{background:var(--navy);color:#fff}.progress-line{height:1px;flex:1;background:#d8e0e8}.qr-grid{display:grid;grid-template-columns:310px 1fr;gap:24px;padding:20px;border-radius:12px;background:#f5f8fb}.qr-card{margin:0;text-align:center}.qr-frame{width:280px;height:280px;margin:12px auto;display:grid;place-items:center;background:#fff;border:1px solid #d5dde5;border-radius:10px;overflow:hidden}.qr-frame img{display:block;width:280px;height:280px}.qr-card figcaption{font-size:11px;color:var(--muted)}.manual-panel{display:flex;flex-direction:column;justify-content:center;gap:15px}.copy-wrap{display:flex}.copy-wrap input{border-radius:8px 0 0 8px!important;font-family:ui-monospace,monospace;font-size:13px}.copy-wrap button{border:0;border-radius:0 8px 8px 0;background:var(--navy);color:#fff;padding:0 15px;font-weight:800}.security-note{padding:13px;border-left:4px solid var(--red);background:#fff;color:var(--muted);font-size:12px}.verify-row{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:end;margin-top:24px}.recovery{font-family:ui-monospace,monospace;line-height:1.8;letter-spacing:.04em}.button-row{display:flex;gap:12px;margin-top:18px}.dashboard{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{padding:24px;background:var(--navy);color:#fff}.sidebar-brand{display:flex;gap:12px;align-items:center;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}.sidebar .brand-mark{width:44px;height:44px}.sidebar .brand-mark span{font-size:18px}.nav{display:grid;gap:6px;margin-top:24px}.nav a{padding:12px 14px;border-radius:8px;color:#c6d1dc;text-decoration:none}.nav a.active,.nav a:hover{background:rgba(255,255,255,.1);color:#fff}.main{padding:32px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.topbar h1{margin:0;color:var(--navy)}.userbox{text-align:right}.logout{border:0;background:transparent;color:var(--red-dark);font-weight:800;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric,.panel{padding:22px;border:1px solid #dfe5eb;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(8,29,53,.05)}.metric b{display:block;font-size:32px;color:var(--navy)}.metric span{font-size:13px;color:var(--muted)}.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}.panel h2{margin-top:0;color:var(--navy)}.list{display:grid;gap:10px}.list-item{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e7ebef}.list-item:last-child{border:0}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9f5ef;color:var(--success);font-size:11px;font-weight:800}.offline{min-height:100vh;display:grid;place-items:center;padding:20px}.offline .card{text-align:center}@media(max-width:980px){.auth-shell{grid-template-columns:42% 58%}.feature-list{grid-template-columns:1fr}.feature{display:none}.metrics{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.auth-shell{display:block}.brand-panel{display:none}.auth-stage{min-height:100vh;padding:16px;background:linear-gradient(rgba(8,29,53,.90),rgba(8,29,53,.90)),radial-gradient(circle at 20% 10%,#b51d23,transparent 30%)}.card{padding:28px 22px}.qr-grid{grid-template-columns:1fr}.verify-row{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}.sidebar{display:none}.main{padding:18px}.metrics,.grid2{grid-template-columns:1fr}.topbar{align-items:flex-start}.button-row{flex-direction:column}}


/* iPhone/PWA safe-area header fix */
@supports (padding: env(safe-area-inset-top)) {
  .main {
    padding-top: calc(32px + env(safe-area-inset-top));
    padding-left: calc(32px + env(safe-area-inset-left));
    padding-right: calc(32px + env(safe-area-inset-right));
  }
}

@media (max-width:760px) {
  .main {
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .topbar {
    min-width: 0;
    gap: 12px;
  }

  .topbar > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar h1,
  .topbar .eyebrow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .userbox {
    flex: 0 0 auto;
    max-width: 42%;
  }

  .userbox b,
  .userbox div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Dashboard mobile/PWA repair v4.7.5 */
.dashboard {
  min-height: 100vh;
  min-height: 100dvh;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .dashboard {
    display: block;
    width: 100%;
  }

  .sidebar {
    display: none;
  }

  .main {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-top: max(20px, calc(env(safe-area-inset-top) + 14px));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    padding-left: max(16px, env(safe-area-inset-left));
    overflow-x: hidden;
  }

  .topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
    margin: 0 0 22px;
  }

  .topbar > div:first-child,
  .userbox {
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  .topbar .eyebrow {
    display: block;
    margin: 0 0 5px;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .12em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .topbar h1 {
    margin: 0;
    max-width: 100%;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .userbox {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .userbox b,
  .userbox div {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .logout {
    margin-top: 8px;
    padding: 0;
  }

  .metrics,
  .grid2 {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }

  .metric,
  .panel,
  .list,
  .list-item {
    min-width: 0;
    max-width: 100%;
  }

  .list-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}


/* ===== Login desktop styles ===== */
:root {
  --navy: #071d35;
  --navy-light: #0d3158;
  --red: #df2029;
  --red-dark: #bb1820;
  --text: #102139;
  --muted: #69788e;
  --border: #cad5e1;
  --surface: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
}

body.portal-auth-login {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--navy);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

button,
input {
  font: inherit;
}

.portal-login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(460px, 0.85fr);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Desktop image panel */

.portal-login-visual {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 33, 0.15) 0%,
      rgba(4, 18, 33, 0.38) 45%,
      rgba(4, 18, 33, 0.92) 100%
    ),
    url("/assets/rescue-13-hero.png") center center / cover no-repeat,
    var(--navy);
}

.portal-login-visual::before {
  content: "BUCKS COUNTY STATION 13";
  position: absolute;
  top: 46px;
  left: 52px;
  z-index: 1;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.portal-login-visual::after {
  content: "Levittown Fire Company No. 2";
  position: absolute;
  right: 52px;
  bottom: 52px;
  left: 52px;
  z-index: 1;
  max-width: 720px;
  color: #ffffff;
  font-size: clamp(36px, 4.2vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* Form side */

.portal-login-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(223, 32, 41, 0.09),
      transparent 34%
    ),
    linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
}

.portal-login-card {
  width: min(100%, 510px);
  padding: 42px;
  border: 1px solid #dbe3eb;
  border-radius: 22px;
  background: var(--surface);
  box-shadow:
    0 28px 70px rgba(7, 29, 53, 0.14),
    0 3px 10px rgba(7, 29, 53, 0.05);
}

.portal-login-header {
  margin: 0 0 30px;
}

.portal-eyebrow {
  display: block;
  margin: 0 0 13px;
  color: var(--red);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.portal-login-header h1 {
  margin: 0 0 16px;
  color: var(--navy);
  font-size: clamp(42px, 4vw, 56px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.portal-login-header p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.portal-login-form {
  display: grid;
  gap: 20px;
  margin: 0;
}

.portal-field {
  display: grid;
  gap: 9px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}

.portal-input-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.portal-input-wrap:focus-within {
  border-color: #406a98;
  box-shadow: 0 0 0 4px rgba(42, 87, 132, 0.12);
}

.portal-input-icon {
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  color: #718198;
}

.portal-input-wrap input {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 0 16px 0 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
}

.portal-input-wrap input::placeholder {
  color: #9aa7b7;
  opacity: 1;
}

.portal-password-wrap input {
  padding-right: 12px;
}

.portal-password-wrap #togglePassword {
  flex: 0 0 auto;
  min-width: 86px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid #dbe3eb;
  border-radius: 0;
  color: var(--navy);
  background: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.portal-password-wrap #togglePassword:hover {
  background: #eef3f7;
}

.portal-primary-button {
  width: 100%;
  min-height: 56px;
  margin: 2px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  background: var(--red);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.portal-primary-button:hover {
  background: var(--red-dark);
}

.portal-primary-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.portal-form-message {
  margin: 0 0 20px;
  padding: 13px 15px;
  border: 1px solid #f0b7bb;
  border-radius: 10px;
  color: #8b171d;
  background: #fff1f2;
  font-size: 14px;
  line-height: 1.45;
}

.portal-form-message[hidden] {
  display: none;
}

.portal-login-help {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.portal-login-help a {
  color: var(--red-dark);
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Tablet */

@media (max-width: 1050px) {
  .portal-login-shell {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
  }

  .portal-login-stage {
    padding: 34px;
  }

  .portal-login-card {
    padding: 36px;
  }
}

/* Phone and narrow tablet */

@media (max-width: 800px) {
  html,
  body.portal-auth-login {
    background: var(--navy);
  }

  .portal-login-shell {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    background:
      radial-gradient(
        circle at 88% 6%,
        rgba(223, 32, 41, 0.25),
        transparent 29%
      ),
      linear-gradient(160deg, #061525 0%, #092744 100%);
  }

  .portal-login-visual {
    display: none;
  }

  .portal-login-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
      max(28px, calc(env(safe-area-inset-top) + 22px))
      max(18px, env(safe-area-inset-right))
      max(34px, calc(env(safe-area-inset-bottom) + 24px))
      max(18px, env(safe-area-inset-left));
    background: transparent;
  }

  .portal-login-card {
    width: min(100%, 520px);
    margin: 66px 0 0;
    padding: 32px 26px;
    border-radius: 20px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22);
  }

  .portal-login-header {
    margin-bottom: 26px;
  }

  .portal-login-header h1 {
    font-size: clamp(40px, 11vw, 52px);
  }
}

/* Small iPhone widths */

@media (max-width: 430px) {
  .portal-login-stage {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .portal-login-card {
    margin-top: 54px;
    padding: 28px 22px;
    border-radius: 19px;
  }

  .portal-eyebrow {
    font-size: 11px;
  }

  .portal-login-header h1 {
    margin-bottom: 14px;
    font-size: 40px;
  }

  .portal-login-header p {
    font-size: 15px;
  }

  .portal-login-form {
    gap: 18px;
  }

  .portal-input-wrap {
    min-height: 54px;
  }

  .portal-input-wrap input {
    height: 52px;
    font-size: 16px;
  }

  .portal-input-icon {
    flex-basis: 48px;
  }

  .portal-password-wrap #togglePassword {
    min-width: 78px;
    padding: 0 14px;
  }

  .portal-primary-button {
    min-height: 54px;
  }

  .portal-login-help {
    margin-top: 22px;
    font-size: 13px;
  }
}

/* Short screens, including landscape phones */

@media (max-height: 720px) and (max-width: 800px) {
  .portal-login-card {
    margin-top: 18px;
  }
}

/* iPhone installed web-app refinements — v4.8.1 */

@media (display-mode: standalone) and (max-width: 800px) {
  body.portal-auth-login,
  .portal-login-shell,
  .portal-login-stage {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .portal-login-stage {
    align-items: flex-start;
    padding-top: max(
      20px,
      calc(env(safe-area-inset-top) + 14px)
    );
    padding-bottom: max(
      20px,
      calc(env(safe-area-inset-bottom) + 14px)
    );
  }

  .portal-login-card {
    width: min(100%, 480px);
    margin-top: 24px;
  }
}

@media (display-mode: standalone) and (max-width: 430px) {
  .portal-login-stage {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .portal-login-card {
    width: 100%;
    margin-top: 18px;
    padding: 26px 22px 24px;
    border-radius: 18px;
  }

  .portal-login-header {
    margin-bottom: 24px;
  }

  .portal-login-header h1 {
    font-size: 38px;
    line-height: 1;
  }

  .portal-login-header p {
    font-size: 15px;
    line-height: 1.45;
  }

  .portal-login-form {
    gap: 16px;
  }

  .portal-input-wrap {
    min-height: 52px;
  }

  .portal-input-wrap input {
    height: 50px;
  }

  .portal-primary-button {
    min-height: 52px;
  }

  .portal-login-help {
    margin-top: 20px;
  }
}

@media (display-mode: standalone) and (max-height: 760px) {
  .portal-login-card {
    margin-top: 6px;
  }

  .portal-login-header {
    margin-bottom: 18px;
  }

  .portal-login-form {
    gap: 14px;
  }
}

/* Remove iPhone standalone bottom strip — v4.8.2 */

@media (display-mode: standalone) and (max-width: 800px) {
  html,
  body.portal-auth-login,
  .portal-login-shell,
  .portal-login-stage {
    background:
      radial-gradient(
        circle at 88% 6%,
        rgba(223, 32, 41, 0.25),
        transparent 29%
      ),
      linear-gradient(160deg, #061525 0%, #092744 100%) !important;
  }

  html,
  body.portal-auth-login {
    min-height: 100%;
    height: 100%;
  }

  body.portal-auth-login {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: none;
  }

  .portal-login-shell {
    min-height: 100%;
  }

  .portal-login-stage {
    min-height: 100%;
    padding-bottom: max(
      24px,
      calc(env(safe-area-inset-bottom) + 24px)
    );
  }

  .portal-login-stage::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: calc(env(safe-area-inset-bottom) + 40px);
    background: #092744;
  }
}

/* Correct full-screen iPhone standalone viewport — v4.8.3 */

html {
  min-height: 100%;
  background: #071d35 !important;
}

@media (display-mode: standalone) and (max-width: 800px) {
  html {
    width: 100%;
    min-height: 100%;
    background: #071d35 !important;
  }

  body.portal-auth-login {
    position: static !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #071d35 !important;
  }

  .portal-login-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    background:
      radial-gradient(
        circle at 88% 6%,
        rgba(223, 32, 41, 0.25),
        transparent 29%
      ),
      linear-gradient(160deg, #061525 0%, #092744 100%) !important;
  }

  .portal-login-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    background: transparent !important;
  }

  .portal-login-stage::after {
    display: none !important;
    content: none !important;
  }
}

/* Remove remaining iPhone background seam — v4.8.4 */

@media (display-mode: standalone) and (max-width: 800px) {
  html,
  body.portal-auth-login,
  .portal-login-shell,
  .portal-login-stage {
    background: #071f38 !important;
  }

  .portal-login-shell,
  .portal-login-stage {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }
}

/* Center login card in iPhone standalone mode — v4.8.5 */

@media (display-mode: standalone) and (max-width: 800px) {
  .portal-login-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .portal-login-card {
    margin: 0 !important;
  }
}

/* Stabilize login form when iPhone keyboard opens — v4.8.6 */

@media (display-mode: standalone) and (max-width: 800px) {
  .portal-login-stage {
    align-items: center !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .portal-login-stage:focus-within {
    align-items: flex-start !important;
    padding-top: max(
      18px,
      calc(env(safe-area-inset-top) + 12px)
    );
  }

  .portal-login-stage:focus-within .portal-login-card {
    margin-top: 0 !important;
  }
}

@media (display-mode: standalone) and (max-width: 430px) {
  .portal-login-stage:focus-within .portal-login-card {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .portal-login-stage:focus-within .portal-login-header {
    margin-bottom: 18px;
  }

  .portal-login-stage:focus-within .portal-login-header h1 {
    font-size: 36px;
  }

  .portal-login-stage:focus-within .portal-login-header p {
    font-size: 14px;
  }

  .portal-login-stage:focus-within .portal-login-form {
    gap: 14px;
  }
}

/* Prevent iPhone keyboard from shifting the login card — v4.8.7 */

@media (display-mode: standalone) and (max-width: 800px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: max(
      86px,
      calc(env(safe-area-inset-top) + 52px)
    ) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    overflow-y: auto;
  }

  .portal-login-card,
  .portal-login-stage:focus-within .portal-login-card {
    margin: 0 auto !important;
    transform: none !important;
  }
}

@media (display-mode: standalone) and (max-height: 760px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    padding-top: max(
      28px,
      calc(env(safe-area-inset-top) + 14px)
    ) !important;
  }
}

/* Lock login form during iPhone keyboard changes — v4.8.8 */

@media (display-mode: standalone) and (max-width: 800px) {
  html,
  body.portal-auth-login {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    background: #071f38 !important;
  }

  .portal-login-shell {
    position: fixed !important;
    top: var(--visual-viewport-top, 0px);
    right: 0;
    left: 0;
    width: 100%;
    height: var(--visual-viewport-height, 100dvh);
    min-height: 0 !important;
    overflow: hidden !important;
    background: #071f38 !important;
  }

  .portal-login-stage,
  .portal-login-stage:focus-within {
    position: absolute !important;
    inset: 0;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: none;
    padding:
      max(64px, calc(env(safe-area-inset-top) + 40px))
      max(16px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left)) !important;
    background: #071f38 !important;
    -webkit-overflow-scrolling: touch;
  }

  .portal-login-card,
  .portal-login-stage:focus-within .portal-login-card {
    flex: 0 0 auto;
    width: min(100%, 480px);
    margin: 0 auto !important;
    transform: none !important;
  }
}

@media (display-mode: standalone) and (max-width: 430px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    padding-top: max(
      56px,
      calc(env(safe-area-inset-top) + 32px)
    ) !important;
  }
}

/* Stable iPhone keyboard layout — v4.8.9
   Do not resize or reposition the page with JavaScript. */

@media (display-mode: standalone) and (max-width: 800px) {
  html {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #071f38 !important;
  }

  body.portal-auth-login {
    position: static !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden !important;
    background: #071f38 !important;
  }

  .portal-login-shell {
    position: static !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #071f38 !important;
  }

  .portal-login-stage,
  .portal-login-stage:focus-within {
    position: static !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-y: auto !important;
    padding:
      max(72px, calc(env(safe-area-inset-top) + 44px))
      max(16px, env(safe-area-inset-right))
      max(24px, calc(env(safe-area-inset-bottom) + 16px))
      max(16px, env(safe-area-inset-left)) !important;
    background: #071f38 !important;
    scroll-behavior: auto !important;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }

  .portal-login-card,
  .portal-login-stage:focus-within .portal-login-card {
    position: static !important;
    flex: 0 0 auto;
    width: min(100%, 480px);
    margin: 0 auto !important;
    padding: 28px 22px !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .portal-login-card *,
  .portal-login-stage:focus-within .portal-login-card * {
    transition: none !important;
  }
}

@media (display-mode: standalone) and (max-width: 430px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    padding-top:
      max(62px, calc(env(safe-area-inset-top) + 36px)) !important;
  }
}

/* A shorter visible viewport indicates that the keyboard is open.
   Keep the card at the same top position instead of recentering it. */
@media (display-mode: standalone) and (max-width: 800px) and (max-height: 600px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    padding-top:
      max(18px, calc(env(safe-area-inset-top) + 8px)) !important;
  }

  .portal-login-card,
  .portal-login-stage:focus-within .portal-login-card {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}


/* ===== Login mobile styles ===== */
/*
 * LFC2 Member Portal
 * Dedicated iPhone login interface — v5.0
 */

@media (max-width: 800px) {
  html {
    width: 100%;
    min-height: 100%;
    background: #071f38;
    -webkit-text-size-adjust: 100%;
  }

  body.portal-auth-login {
    position: static !important;
    inset: auto !important;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: #102139;
    background: #071f38 !important;
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "SF Pro Display",
      "SF Pro Text",
      "Segoe UI",
      sans-serif;
  }

  .portal-login-shell {
    display: block !important;
    position: static !important;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible !important;
    background:
      radial-gradient(
        circle at 85% 4%,
        rgba(218, 32, 41, 0.22),
        transparent 28%
      ),
      linear-gradient(
        165deg,
        #061525 0%,
        #08233e 55%,
        #071f38 100%
      ) !important;
  }

  .portal-login-visual {
    display: none !important;
  }

  .portal-login-stage,
  .portal-login-stage:focus-within {
    display: block !important;
    position: static !important;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
      max(24px, calc(env(safe-area-inset-top) + 16px))
      max(20px, env(safe-area-inset-right))
      max(28px, calc(env(safe-area-inset-bottom) + 18px))
      max(20px, env(safe-area-inset-left)) !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .portal-login-card,
  .portal-login-stage:focus-within .portal-login-card {
    position: static !important;
    width: min(100%, 480px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
  }

  .portal-login-card::before {
    content: "13";
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 2px 0 20px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    color: #ffffff;
    background:
      linear-gradient(145deg, #df2029, #a91219);
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .portal-login-header {
    margin: 0 0 28px !important;
  }

  .portal-eyebrow {
    display: block;
    margin: 0 0 10px !important;
    color: #ff5961 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.3;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
  }

  .portal-login-header h1 {
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: clamp(38px, 10vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.045em !important;
  }

  .portal-login-header p {
    max-width: 350px;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .portal-login-form {
    display: grid !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  .portal-field {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  .portal-input-wrap {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    min-width: 0;
    min-height: 56px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
      border-color 150ms ease,
      box-shadow 150ms ease !important;
  }

  .portal-input-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.12),
      0 14px 30px rgba(0, 0, 0, 0.2) !important;
  }

  .portal-input-icon {
    display: grid !important;
    flex: 0 0 50px !important;
    place-items: center !important;
    color: #64748b !important;
  }

  .portal-input-wrap input {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 14px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: #102139 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    appearance: none;
    -webkit-appearance: none;
  }

  .portal-input-wrap input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
  }

  .portal-password-wrap #togglePassword {
    align-self: stretch !important;
    flex: 0 0 auto !important;
    min-width: 78px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-left: 1px solid #dbe3eb !important;
    border-radius: 0 !important;
    color: #0b2948 !important;
    background: #f4f7fa !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .portal-primary-button {
    width: 100% !important;
    min-height: 56px !important;
    margin: 2px 0 0 !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, #e42a33, #c81922) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .portal-primary-button:active {
    transform: scale(0.99);
  }

  .portal-primary-button:disabled {
    opacity: 0.65;
    cursor: wait;
  }

  .portal-form-message {
    margin: 0 0 18px !important;
    padding: 13px 15px !important;
    border: 1px solid rgba(255, 111, 119, 0.44) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    background: rgba(171, 22, 30, 0.46) !important;
    font-size: 14px !important;
    line-height: 1.45;
  }

  .portal-form-message[hidden] {
    display: none !important;
  }

  .portal-login-help {
    margin: 24px 0 0 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .portal-login-help a {
    color: #ffffff !important;
    font-weight: 750 !important;
    text-decoration-color: rgba(255, 255, 255, 0.46);
    text-underline-offset: 3px;
  }

  .portal-login-card *,
  .portal-login-stage:focus-within .portal-login-card * {
    animation: none !important;
  }
}

/*
 * Installed iPhone app:
 * keep the form near the top so opening the keyboard does not
 * cause the whole interface to be vertically recentered.
 */
@media (display-mode: standalone) and (max-width: 800px) {
  html,
  body.portal-auth-login {
    min-height: 100%;
    background: #071f38 !important;
  }

  .portal-login-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .portal-login-stage,
  .portal-login-stage:focus-within {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top:
      max(22px, calc(env(safe-area-inset-top) + 14px)) !important;
  }
}

/* Smaller iPhones */

@media (max-width: 390px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .portal-login-card::before {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 16px;
    font-size: 22px;
  }

  .portal-login-header {
    margin-bottom: 22px !important;
  }

  .portal-login-header h1 {
    font-size: 36px !important;
  }

  .portal-login-header p {
    font-size: 14px !important;
  }

  .portal-login-form {
    gap: 15px !important;
  }

  .portal-input-wrap {
    min-height: 52px !important;
  }

  .portal-input-wrap input {
    height: 50px !important;
    min-height: 50px !important;
  }

  .portal-primary-button {
    min-height: 52px !important;
  }

  .portal-login-help {
    margin-top: 18px !important;
  }
}

/* Short iPhone screens and landscape keyboard state */

@media (max-width: 800px) and (max-height: 650px) {
  .portal-login-stage,
  .portal-login-stage:focus-within {
    padding-top:
      max(14px, calc(env(safe-area-inset-top) + 6px)) !important;
  }

  .portal-login-card::before {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 13px;
    font-size: 19px;
  }

  .portal-login-header {
    margin-bottom: 17px !important;
  }

  .portal-login-header h1 {
    margin-bottom: 8px !important;
    font-size: 32px !important;
  }

  .portal-login-header p {
    font-size: 13px !important;
  }

  .portal-login-form {
    gap: 12px !important;
  }

  .portal-login-help {
    margin-top: 14px !important;
  }
}

/* Real company logo on mobile login — v5.0.1 */

@media (max-width: 800px) {
  .portal-login-card::before {
    display: none !important;
    content: none !important;
  }

  .portal-mobile-logo {
    display: block;
    margin: 2px 0 18px;
  }

  .portal-mobile-logo img {
    display: block;
    width: 118px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22));
  }
}

@media (max-width: 390px) {
  .portal-mobile-logo {
    margin-bottom: 14px;
  }

  .portal-mobile-logo img {
    width: 102px;
  }
}

@media (max-width: 800px) and (max-height: 650px) {
  .portal-mobile-logo {
    margin-bottom: 10px;
  }

  .portal-mobile-logo img {
    width: 86px;
  }
}

/* LFC2 mobile login logo — v5.0.3 */
@media (max-width: 800px) {
  .portal-login-card::before {
    display: none !important;
    content: none !important;
  }

  .portal-mobile-logo {
    display: block !important;
    width: 100%;
    margin: 0 0 18px;
  }

  .portal-mobile-logo img {
    display: block !important;
    width: 132px;
    max-width: 46%;
    height: auto;
    margin: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.24));
  }
}

@media (max-width: 390px) {
  .portal-mobile-logo img {
    width: 112px;
  }
}

/* LFC2 mobile logo — v5.0.4 */
@media (max-width: 800px) {
  .portal-login-card::before {
    display: none !important;
    content: none !important;
  }

  .portal-mobile-logo {
    display: block !important;
    width: 100%;
    margin: 0 0 18px !important;
  }

  .portal-mobile-logo img {
    display: block !important;
    width: 140px !important;
    max-width: 48% !important;
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.24));
  }
}

@media (max-width: 390px) {
  .portal-mobile-logo img {
    width: 118px !important;
  }
}

/* Center mobile login logo — v5.0.5 */
@media (max-width: 800px) {
  .portal-mobile-logo {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .portal-mobile-logo img {
    display: block !important;
    width: 140px !important;
    max-width: 48% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 390px) {
  .portal-mobile-logo img {
    width: 118px !important;
  }
}

/* Refined centered mobile branding layout — v5.0.6 */
@media (max-width: 800px) {
  .portal-mobile-logo {
    margin: 0 0 14px !important;
  }

  .portal-mobile-logo img {
    width: 122px !important;
    max-width: 42% !important;
  }

  .portal-login-header {
    max-width: 430px;
    margin: 0 auto 24px !important;
    text-align: center !important;
  }

  .portal-eyebrow {
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  .portal-login-header h1 {
    margin-bottom: 12px !important;
    font-size: clamp(36px, 9.5vw, 44px) !important;
    line-height: 1.02 !important;
    text-align: center !important;
  }

  .portal-login-header p {
    max-width: 360px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .portal-login-form {
    margin-top: 4px !important;
  }

  .portal-login-help {
    max-width: 360px;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

@media (max-width: 390px) {
  .portal-mobile-logo img {
    width: 108px !important;
  }

  .portal-login-header {
    margin-bottom: 21px !important;
  }

  .portal-login-header h1 {
    font-size: 35px !important;
  }

  .portal-login-header p {
    max-width: 320px !important;
  }

  .portal-login-help a {
    display: block;
    margin-top: 2px;
  }
}


/* ===== MFA mobile styles ===== */
/*
 * LFC2 Member Portal
 * Dedicated mobile MFA page — v5.0
 */

@media (max-width: 800px) {
  html {
    min-height: 100%;
    background: #071f38;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    color: #ffffff;
    background: #071f38 !important;
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "SF Pro Display",
      "SF Pro Text",
      "Segoe UI",
      sans-serif;
  }

  .portal-auth-shell,
  .portal-mfa-shell {
    display: block !important;
    min-height: 100vh;
    min-height: 100dvh;
    background:
      radial-gradient(
        circle at 85% 4%,
        rgba(218, 32, 41, 0.22),
        transparent 28%
      ),
      linear-gradient(
        165deg,
        #061525 0%,
        #08233e 55%,
        #071f38 100%
      ) !important;
  }

  .portal-auth-stage,
  .portal-mfa-stage {
    display: block !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
      max(24px, calc(env(safe-area-inset-top) + 16px))
      max(20px, env(safe-area-inset-right))
      max(28px, calc(env(safe-area-inset-bottom) + 18px))
      max(20px, env(safe-area-inset-left)) !important;
    background: transparent !important;
  }

  .portal-auth-card,
  .portal-mfa-card {
    width: min(100%, 480px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .portal-mfa-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
  }

  .portal-mfa-logo img {
    display: block;
    width: 122px;
    max-width: 42%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.24));
  }

  .portal-eyebrow {
    display: block;
    margin: 0 0 10px !important;
    color: #ff5961 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.3;
    letter-spacing: 0.16em !important;
    text-align: center;
    text-transform: uppercase;
  }

  h1 {
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: clamp(36px, 9.5vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    text-align: center;
  }

  .portal-mfa-intro,
  .portal-auth-card > p,
  .portal-mfa-card > p {
    max-width: 360px;
    margin: 0 auto 26px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: center;
  }

  form {
    display: grid !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  label,
  .portal-field {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  .portal-input-wrap {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    min-height: 56px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .portal-input-icon {
    display: grid !important;
    flex: 0 0 50px !important;
    place-items: center !important;
    color: #64748b !important;
  }

  input {
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    outline: 0 !important;
    color: #102139 !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    appearance: none;
    -webkit-appearance: none;
  }

  input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
  }

  button[type="submit"],
  .portal-primary-button {
    width: 100% !important;
    min-height: 56px !important;
    margin: 2px 0 0 !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background:
      linear-gradient(180deg, #e42a33, #c81922) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    appearance: none;
    -webkit-appearance: none;
  }

  .portal-mfa-help,
  .portal-login-help {
    max-width: 360px;
    margin: 24px auto 0 !important;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  .portal-mfa-help a,
  .portal-login-help a {
    color: #ffffff !important;
    font-weight: 750 !important;
    text-decoration-color: rgba(255, 255, 255, 0.46);
    text-underline-offset: 3px;
  }
}

@media (max-width: 390px) {
  .portal-auth-stage,
  .portal-mfa-stage {
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .portal-mfa-logo img {
    width: 108px;
  }

  h1 {
    font-size: 35px !important;
  }

  form {
    gap: 15px !important;
  }

  .portal-input-wrap {
    min-height: 52px !important;
  }

  input {
    height: 50px !important;
    min-height: 50px !important;
  }

  button[type="submit"],
  .portal-primary-button {
    min-height: 52px !important;
  }
}

/* =========================================================
   Dashboard scrolling correction — v5.2.1
   ========================================================= */

html:has(.dashboard) {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #f2f5f8;
}

body:has(.dashboard) {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  background: #f2f5f8;
}

.dashboard {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

.dashboard .main {
  position: relative !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

@media (max-width: 800px) {
  html:has(.dashboard),
  body:has(.dashboard) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .dashboard .main {
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding-bottom: max(
      32px,
      calc(env(safe-area-inset-bottom) + 24px)
    ) !important;
  }
}

/* Mobile sign-in help formatting — v5.2.2 */
@media (max-width: 800px) {
  .portal-login-help {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 22px auto 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  .portal-login-help a {
    display: inline-block !important;
    margin: 0 !important;
  }
}

/* Compact single-line mobile sign-in help — v5.2.3 */
@media (max-width: 800px) {
  .portal-login-help {
    display: block !important;
    max-width: none !important;
    margin: 18px auto 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .portal-login-help a {
    display: inline !important;
    margin: 0 0 0 3px !important;
    font-size: inherit !important;
  }
}

/* Add spacing below mobile sign-in button — v5.2.4 */
@media (max-width: 800px) {
  .portal-primary-button {
    margin-bottom: 12px !important;
  }
}

/* Space between Sign In button and help text — v5.2.5 */
@media (max-width: 800px) {
  .portal-login-help {
    margin-top: 28px !important;
  }
}

/* Guaranteed spacing below the Sign In button — v5.2.6 */
@media (max-width: 800px) {
  .portal-login-help-spacer {
    display: block !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
  }

  .portal-login-help {
    margin: 0 auto !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .portal-login-help a {
    display: inline !important;
    margin-left: 3px !important;
  }
}

/* Space below MFA Verify Code button — v5.2.7 */
@media (max-width: 800px) {
  .portal-mfa-help,
  .portal-login-help {
    margin-top: 22px !important;
  }
}

/* Shared authentication help spacer — v5.2.8 */
@media (max-width: 800px) {
  .portal-login-help-spacer {
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .portal-login-help-spacer + .portal-login-help {
    margin: 0 auto !important;
  }
}


/* =========================================================
   LFC2 Portal v6 final normalization
   One shared stylesheet for desktop, mobile, login, MFA,
   setup pages, and dashboard.
   ========================================================= */

/* Keep authentication help text predictable. */
.portal-login-help {
  text-align: center;
}

.portal-login-help-spacer {
  display: block;
  width: 100%;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
}

/* Mobile authentication normalization. */
@media (max-width: 800px) {
  body.portal-auth-login,
  body.portal-auth-mfa,
  body.portal-auth-mfa-verify {
    min-height: 100vh;
    min-height: 100dvh;
    background: #071f38;
  }

  .portal-auth-login .portal-login-help,
  .portal-auth-mfa .portal-login-help,
  .portal-auth-mfa-verify .portal-login-help {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .portal-auth-login .portal-login-help-spacer,
  .portal-auth-mfa .portal-login-help-spacer,
  .portal-auth-mfa-verify .portal-login-help-spacer {
    display: block !important;
    height: 24px !important;
    min-height: 24px !important;
  }
}

/* Dashboard must remain scrollable. */
html:has(.dashboard),
body:has(.dashboard) {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.dashboard,
.dashboard .main {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}

/* Successful sign-in message — v6.0.1 */
.portal-form-message.success {
  border-color: #86d19c !important;
  color: #135d2c !important;
  background: #eaf8ee !important;
}

@media (max-width: 800px) {
  .portal-form-message.success {
    border-color: rgba(126, 224, 153, 0.7) !important;
    color: #e3ffeb !important;
    background: rgba(23, 116, 55, 0.78) !important;
  }
}

/* Unified success message styling — login and MFA */
.portal-auth-login .portal-form-message.success,
.portal-auth-mfa .portal-form-message.success,
.portal-auth-mfa-verify .portal-form-message.success {
  border: 1px solid #86d19c !important;
  background: #eaf8ee !important;
  color: #135d2c !important;
  box-shadow: none !important;
}

@media (max-width: 800px) {
  .portal-auth-login .portal-form-message.success,
  .portal-auth-mfa .portal-form-message.success,
  .portal-auth-mfa-verify .portal-form-message.success {
    border: 1px solid rgba(126, 224, 153, 0.7) !important;
    background: rgba(23, 116, 55, 0.78) !important;
    color: #e3ffeb !important;
  }
}


/* Center login and MFA status-box text */
.portal-form-message {
  text-align: center !important;
}

/* Smaller dashboard welcome heading */
.dashboard h1,
.dashboard .welcome-title,
.dashboard .dashboard-welcome h1 {
  font-size: 2rem !important;
  line-height: 1.15 !important;
}

@media (max-width: 800px) {
  .dashboard h1,
  .dashboard .welcome-title,
  .dashboard .dashboard-welcome h1 {
    font-size: 1.6rem !important;
  }
}

/* =========================================================
   Desktop authentication layout correction — v6.0.12
   Prevent login and MFA pages from being clipped vertically.
   ========================================================= */
@media (min-width: 801px) {
  html:has(body.portal-auth-login),
  html:has(body.portal-auth-mfa),
  html:has(body.portal-auth-mfa-verify) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
  }

  body.portal-auth-login,
  body.portal-auth-mfa,
  body.portal-auth-mfa-verify {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .portal-auth-stage {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .portal-login-card,
  .portal-auth-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 38px !important;
    padding-bottom: 32px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo {
    max-height: 230px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .portal-auth-visual,
  .portal-auth-hero {
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
}

/* Tighter layout on shorter desktop screens. */
@media (min-width: 801px) and (max-height: 850px) {
  .portal-auth-stage {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .portal-login-card,
  .portal-auth-card {
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo {
    max-height: 180px !important;
  }

  .portal-auth-header h1 {
    font-size: 2.35rem !important;
  }

  .portal-auth-form {
    gap: 16px !important;
  }
}

/* More compact desktop login and MFA layout — v6.0.13 */
@media (min-width: 801px) {
  .portal-auth-stage {
    padding: 24px 32px !important;
  }

  .portal-login-card,
  .portal-auth-card {
    width: min(100%, 450px) !important;
    padding: 24px 30px 26px !important;
    border-radius: 20px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo {
    max-width: 300px !important;
    max-height: 165px !important;
    margin-bottom: 12px !important;
  }

  .portal-auth-header {
    margin-bottom: 22px !important;
  }

  .portal-auth-header h1 {
    font-size: 2.15rem !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  .portal-auth-header p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .portal-auth-form {
    gap: 14px !important;
  }

  .portal-field {
    gap: 7px !important;
  }

  .portal-field > span:first-child {
    font-size: 0.84rem !important;
  }

  .portal-input-wrap input {
    min-height: 48px !important;
  }

  .portal-primary-button {
    min-height: 48px !important;
  }

  .portal-login-help {
    margin-top: 18px !important;
    font-size: 0.84rem !important;
  }
}

@media (min-width: 801px) and (max-height: 850px) {
  .portal-login-card,
  .portal-auth-card {
    width: min(100%, 420px) !important;
    padding: 18px 26px 20px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo {
    max-width: 250px !important;
    max-height: 135px !important;
  }

  .portal-auth-header h1 {
    font-size: 1.9rem !important;
  }
}

/* Compact desktop authentication layout — v6.0.14 */
@media (min-width: 801px) {
  .portal-auth-stage {
    padding: 20px !important;
  }

  .portal-login-card,
  .portal-auth-card {
    width: 380px !important;
    max-width: calc(100vw - 48px) !important;
    padding: 22px 26px 24px !important;
    border-radius: 18px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo,
  .portal-auth-logo {
    display: block !important;
    width: 210px !important;
    max-width: 210px !important;
    height: 120px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    margin: 0 auto 10px !important;
  }

  .portal-auth-header {
    margin: 0 0 16px !important;
  }

  .portal-auth-header h1 {
    font-size: 1.75rem !important;
    line-height: 1.08 !important;
    margin: 6px 0 8px !important;
  }

  .portal-auth-header p {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .portal-auth-eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
  }

  .portal-auth-form,
  .portal-login-form {
    gap: 11px !important;
  }

  .portal-field {
    gap: 5px !important;
  }

  .portal-field > span:first-child {
    font-size: 0.78rem !important;
  }

  .portal-input-wrap,
  .portal-input-wrap input {
    min-height: 44px !important;
    height: 44px !important;
  }

  .portal-input-wrap input {
    font-size: 0.88rem !important;
  }

  .portal-primary-button {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 0.88rem !important;
  }

  .portal-login-help-spacer {
    height: 14px !important;
    min-height: 14px !important;
  }

  .portal-login-help {
    margin: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }
}

/* =========================================================
   Final desktop login and MFA layout — v6.0.15
   ========================================================= */
@media (min-width: 801px) {
  .portal-auth-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 32px 48px !important;
  }

  .portal-login-card,
  .portal-auth-card {
    width: 500px !important;
    max-width: calc(100vw - 80px) !important;
    min-height: 0 !important;
    padding: 34px 40px 30px !important;
    border-radius: 20px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo,
  .portal-auth-logo {
    display: block !important;
    width: auto !important;
    max-width: 240px !important;
    height: auto !important;
    max-height: 145px !important;
    object-fit: contain !important;
    margin: 0 auto 18px !important;
  }

  .portal-auth-header {
    margin: 0 0 26px !important;
  }

  .portal-auth-eyebrow {
    margin: 0 0 10px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em !important;
  }

  .portal-auth-header h1 {
    margin: 0 0 10px !important;
    font-size: 2.4rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .portal-auth-header p {
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .portal-auth-form,
  .portal-login-form {
    gap: 16px !important;
  }

  .portal-field {
    gap: 7px !important;
  }

  .portal-field > span:first-child {
    font-size: 0.82rem !important;
  }

  .portal-input-wrap,
  .portal-input-wrap input {
    min-height: 50px !important;
    height: 50px !important;
  }

  .portal-input-wrap input {
    font-size: 0.94rem !important;
  }

  .portal-primary-button {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 0.94rem !important;
  }

  .portal-login-help-spacer {
    height: 20px !important;
    min-height: 20px !important;
  }

  .portal-login-help {
    margin: 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

/* Keep the card usable on shorter desktop displays. */
@media (min-width: 801px) and (max-height: 820px) {
  .portal-auth-stage {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .portal-login-card,
  .portal-auth-card {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo,
  .portal-auth-logo {
    max-height: 110px !important;
    margin-bottom: 12px !important;
  }

  .portal-auth-header {
    margin-bottom: 18px !important;
  }

  .portal-auth-header h1 {
    font-size: 2.1rem !important;
  }
}

/* Reduce desktop authentication branding — v6.0.16 */
@media (min-width: 801px) {
  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo,
  .portal-auth-logo {
    max-width: 175px !important;
    max-height: 95px !important;
    margin-bottom: 14px !important;
  }

  .portal-auth-eyebrow {
    font-size: 0.66rem !important;
    letter-spacing: 0.13em !important;
    margin-bottom: 8px !important;
  }

  .portal-auth-header h1 {
    font-size: 1.8rem !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  .portal-auth-header p {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }
}

/* Small desktop authentication branding — v6.0.17 */
@media (min-width: 801px) {
  .portal-login-card img,
  .portal-auth-card img,
  .portal-mobile-logo,
  .portal-auth-logo {
    width: auto !important;
    max-width: 125px !important;
    height: auto !important;
    max-height: 68px !important;
    margin: 0 auto 10px !important;
  }

  .portal-auth-eyebrow {
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 6px !important;
  }

  .portal-auth-header h1 {
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
    margin: 0 0 6px !important;
    white-space: nowrap !important;
  }

  .portal-auth-header p {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  .portal-auth-header {
    margin-bottom: 18px !important;
  }
}

/* Smaller desktop Member Portal heading — v6.0.18 */
@media (min-width: 801px) {
  .portal-auth-header h1 {
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }
}

/* Correct desktop login and MFA heading sizing — v6.0.19 */
@media (min-width: 801px) {
  .portal-login-header h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
  }

  .portal-login-header p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .portal-login-header .portal-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
}

/* Balanced desktop login and MFA heading size — v6.0.20 */
@media (min-width: 801px) {
  .portal-login-header h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 7px !important;
  }
}

/* =========================================================
   Desktop: restore split layout, mobile-style form only
   ========================================================= */
@media (min-width: 801px) {
  body.portal-auth-login,
  body.portal-auth-mfa-verify {
    background: #ffffff !important;
  }

  .portal-auth-shell,
  .portal-login-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(460px, 0.8fr) !important;
    min-height: 100vh !important;
    background: #ffffff !important;
  }

  .portal-login-visual {
    display: block !important;
    min-height: 100vh !important;
  }

  .portal-auth-stage,
  .portal-login-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 40px !important;
    background: #f4f6f8 !important;
  }

  .portal-auth-card,
  .portal-login-card {
    width: 100% !important;
    max-width: 440px !important;
    padding: 34px 36px 30px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: #071f38 !important;
    box-shadow: 0 18px 50px rgba(7, 31, 56, 0.18) !important;
  }

  .portal-mobile-logo,
  .portal-mfa-logo {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 18px !important;
  }

  .portal-mobile-logo img,
  .portal-mfa-logo img {
    width: auto !important;
    max-width: 125px !important;
    height: auto !important;
    max-height: 80px !important;
    margin: 0 auto !important;
  }

  .portal-login-header {
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .portal-login-header .portal-eyebrow {
    color: rgba(255,255,255,0.65) !important;
    font-size: 10px !important;
  }

  .portal-login-header h1 {
    color: #ffffff !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
  }

  .portal-login-header p {
    color: rgba(255,255,255,0.72) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .portal-field > span:first-child {
    color: rgba(255,255,255,0.88) !important;
  }

  .portal-input-wrap {
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.08) !important;
  }

  .portal-input-wrap input {
    color: #ffffff !important;
    background: transparent !important;
  }

  .portal-input-wrap input::placeholder {
    color: rgba(255,255,255,0.45) !important;
  }

  .portal-input-icon {
    color: rgba(255,255,255,0.6) !important;
  }

  .portal-login-help {
    color: rgba(255,255,255,0.68) !important;
  }

  .portal-login-help a {
    color: #ffffff !important;
  }
}

/* =========================================================
   Desktop: light card with mobile-style form proportions
   ========================================================= */
@media (min-width: 801px) {
  body.portal-auth-login,
  body.portal-auth-mfa-verify {
    background: #ffffff !important;
  }

  .portal-auth-shell,
  .portal-login-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(460px, 0.8fr) !important;
    min-height: 100vh !important;
    background: #ffffff !important;
  }

  .portal-login-visual {
    display: block !important;
    min-height: 100vh !important;
  }

  .portal-auth-stage,
  .portal-login-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 40px !important;
    background: #f4f6f8 !important;
  }

  .portal-auth-card,
  .portal-login-card {
    width: 100% !important;
    max-width: 440px !important;
    padding: 34px 36px 30px !important;
    border: 1px solid #dfe5ea !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 50px rgba(7, 31, 56, 0.12) !important;
  }

  .portal-mobile-logo,
  .portal-mfa-logo {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 18px !important;
  }

  .portal-mobile-logo img,
  .portal-mfa-logo img {
    width: auto !important;
    max-width: 125px !important;
    height: auto !important;
    max-height: 80px !important;
    margin: 0 auto !important;
  }

  .portal-login-header {
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .portal-login-header .portal-eyebrow {
    color: #6b7785 !important;
    font-size: 10px !important;
  }

  .portal-login-header h1 {
    color: #071f38 !important;
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
  }

  .portal-login-header p {
    color: #66727f !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .portal-auth-form,
  .portal-login-form {
    gap: 16px !important;
  }

  .portal-field > span:first-child {
    color: #263746 !important;
    font-size: 13px !important;
  }

  .portal-input-wrap {
    min-height: 52px !important;
    height: 52px !important;
    border: 1px solid #d6dde4 !important;
    border-radius: 12px !important;
    background: #f8fafb !important;
  }

  .portal-input-wrap:focus-within {
    border-color: #9aa8b5 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(7, 31, 56, 0.08) !important;
  }

  .portal-input-wrap input {
    min-height: 52px !important;
    height: 52px !important;
    color: #142331 !important;
    font-size: 15px !important;
    background: transparent !important;
  }

  .portal-input-wrap input::placeholder {
    color: #929da7 !important;
  }

  .portal-input-icon {
    color: #74818d !important;
  }

  .portal-primary-button {
    min-height: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  .portal-login-help {
    color: #6b7785 !important;
  }

  .portal-login-help a {
    color: #071f38 !important;
  }
}

/* Remove all text and decorative labels from desktop image panel */
@media (min-width: 801px) {
  .portal-login-visual > * {
    display: none !important;
  }

  .portal-login-visual::before,
  .portal-login-visual::after {
    content: none !important;
    display: none !important;
  }
}

/* Desktop image gradient overlay */
@media (min-width: 801px) {
  .portal-login-visual {
    position: relative !important;
    overflow: hidden !important;
  }

  .portal-login-visual::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        rgba(7, 31, 56, 0.12) 0%,
        rgba(7, 31, 56, 0.04) 55%,
        rgba(7, 31, 56, 0.34) 100%
      ) !important;
  }
}

/* =========================================================
   Desktop full-screen image with floating authentication card
   ========================================================= */
@media (min-width: 801px) {
  html,
  body.portal-auth-login,
  body.portal-auth-mfa-verify {
    min-height: 100% !important;
  }

  body.portal-auth-login,
  body.portal-auth-mfa-verify {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #071f38 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .portal-auth-shell,
  .portal-login-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #071f38 !important;
    isolation: isolate !important;
  }

  .portal-login-visual {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  /* Full-screen gradient overlay */
  .portal-login-visual::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        90deg,
        rgba(3, 15, 28, 0.32) 0%,
        rgba(3, 15, 28, 0.46) 48%,
        rgba(3, 15, 28, 0.76) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3, 15, 28, 0.12) 0%,
        rgba(3, 15, 28, 0.28) 100%
      ) !important;
  }

  .portal-login-visual::before,
  .portal-login-visual > * {
    display: none !important;
    content: none !important;
  }

  .portal-auth-stage,
  .portal-login-stage {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 48px clamp(48px, 7vw, 120px) !important;
    background: transparent !important;
  }

  .portal-auth-card,
  .portal-login-card {
    width: 100% !important;
    max-width: 440px !important;
    padding: 34px 36px 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
}

/* Keep the form centered on narrower desktop windows */
@media (min-width: 801px) and (max-width: 1100px) {
  .portal-auth-stage,
  .portal-login-stage {
    justify-content: center !important;
    padding: 40px 28px !important;
  }
}

/* =========================================================
   Desktop: full-screen background image, no split layout
   ========================================================= */
@media (min-width: 801px) {
  body.portal-auth-login,
  body.portal-auth-mfa-verify {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #071f38 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .portal-auth-shell,
  .portal-login-shell {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: transparent !important;
    isolation: isolate !important;
  }

  .portal-login-visual {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -2 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .portal-login-visual::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(
        180deg,
        rgba(3, 15, 28, 0.28) 0%,
        rgba(3, 15, 28, 0.42) 100%
      ),
      linear-gradient(
        90deg,
        rgba(3, 15, 28, 0.18) 0%,
        rgba(3, 15, 28, 0.38) 55%,
        rgba(3, 15, 28, 0.62) 100%
      ) !important;
  }

  .portal-login-visual::after,
  .portal-login-visual > * {
    display: none !important;
    content: none !important;
  }

  .portal-auth-stage,
  .portal-login-stage {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 40px 24px !important;
    background: transparent !important;
  }

  .portal-auth-card,
  .portal-login-card {
    width: 100% !important;
    max-width: 440px !important;
    padding: 34px 36px 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
}

/* =========================================================
   Final authentication typography normalization
   ========================================================= */
body.portal-auth,
body.portal-auth input,
body.portal-auth button,
body.portal-auth label {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

.portal-login-header .portal-eyebrow {
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.13em !important;
}

.portal-login-header h1 {
  font-family: inherit !important;
  font-size: 26px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

.portal-login-header p {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

.portal-field > span:first-child {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.portal-input-wrap input {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

.portal-primary-button {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: normal !important;
}

.portal-form-message,
.portal-login-help {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Slightly smaller heading on narrow phones */
@media (max-width: 390px) {
  .portal-login-header h1 {
    font-size: 24px !important;
  }
}

/* =========================================================
   Self-hosted Inter variable font
   ========================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-variable.woff2")
    format("woff2-variations");
}

html,
body,
button,
input,
select,
textarea {
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

/* Desktop login and MFA card: clean solid white */
@media (min-width: 801px) {
  body.portal-auth .portal-auth-card,
  body.portal-auth .portal-login-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
  }
}