:root{
  --navy:#0b376f;
  --navy-strong:#062e62;
  --blue:#1268c9;
  --blue-bright:#1475e8;
  --ink:#102e56;
  --muted:#6782a3;
  --line:#c9d9ec;
  --surface:rgba(255,255,255,.94);
  --font:"Helvetica Neue", Helvetica, Arial, "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  min-width:320px;
  font-family:var(--font);
  color:var(--ink);
  background:#eaf3f9;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
.hidden{display:none!important}

.login-page{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}

.scene{
  position:absolute;
  z-index:-3;
  inset:0;
  background-color:#eaf3f9;
  background-image:url("img/mrt-login-background.png?v=1520");
  background-image:image-set(
    url("img/mrt-login-background.webp?v=1520") type("image/webp"),
    url("img/mrt-login-background.png?v=1520") type("image/png")
  );
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  filter:saturate(1.04) contrast(1.025);
}

.login-page::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(248,252,255,.05) 0%,
      rgba(248,252,255,.03) 43%,
      rgba(245,250,255,.34) 55%,
      rgba(246,250,255,.71) 69%,
      rgba(248,251,255,.83) 83%,
      rgba(249,252,255,.88) 100%);
}

.login-page::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-96px;
  right:-102px;
  width:610px;
  height:610px;
  border-radius:50%;
  pointer-events:none;
  opacity:.72;
  background:
    radial-gradient(circle at center, transparent 0 82px, rgba(32,116,211,.08) 83px 84px, transparent 85px 122px, rgba(32,116,211,.07) 123px 124px, transparent 125px 162px, rgba(32,116,211,.055) 163px 164px, transparent 165px 205px, rgba(32,116,211,.045) 206px 207px, transparent 208px);
}

.brand-lockup{
  position:absolute;
  z-index:3;
  top:clamp(24px,3.2vh,40px);
  left:clamp(28px,3.4vw,66px);
  display:flex;
  align-items:flex-start;
  gap:14px;
  color:var(--navy);
}

.brand-mark{
  width:56px;
  height:56px;
  flex:0 0 auto;
  display:block;
  object-fit:contain;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding-top:1px;
}

.brand-copy strong{
  font-size:clamp(22px,1.58vw,31px);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:700;
}

.brand-copy span{
  margin-top:3px;
  color:#4a6f99;
  font-size:clamp(11px,.70vw,12.5px);
  line-height:1.1;
  font-weight:500;
  white-space:nowrap;
  letter-spacing:-.01em;
}

.login-shell{
  position:absolute;
  z-index:2;
  top:50%;
  right:clamp(34px,5vw,96px);
  width:clamp(380px,27.5vw,430px);
  transform:translateY(-50%);
}

.login-heading{
  margin:0 0 18px;
  text-align:center;
}

.login-heading h1{
  margin:0;
  color:var(--navy-strong);
  font-size:clamp(31px,2.15vw,42px);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
}

.login-heading p{
  margin:8px 0 0;
  color:#5f7da2;
  font-size:clamp(13px,.92vw,17px);
  line-height:1.35;
  font-weight:500;
}

.login-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(192,211,234,.94);
  border-radius:6px;
  background:var(--surface);
  box-shadow:
    0 20px 48px rgba(35,78,128,.12),
    0 1px 0 rgba(255,255,255,.92) inset;
  backdrop-filter:blur(18px) saturate(112%);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
}

.auth-tabs{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  height:58px;
  margin:0 30px 21px;
  border-bottom:1px solid #d6e2ef;
}

.auth-tab{
  position:relative;
  min-width:0;
  padding:3px 6px 0;
  border:0;
  outline:0;
  background:transparent;
  color:#315477;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  font-weight:600;
}

.auth-tab::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:3px;
  border-radius:2px 2px 0 0;
  background:transparent;
  transform:scaleX(.45);
  transition:background-color .16s ease,transform .16s ease;
}

.auth-tab.is-active{
  color:#0d66ca;
}

.auth-tab.is-active::after{
  background:#146fe1;
  transform:scaleX(1);
}

.auth-tab:focus-visible{
  box-shadow:0 0 0 3px rgba(20,111,225,.15) inset;
}

.login-form{
  padding:0 30px 24px;
}

.session-notice,
.login-error{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:4px;
  font-size:13px;
  line-height:1.35;
}

.session-notice{
  color:#775818;
  border:1px solid #f1d38c;
  background:#fff8e5;
}

.login-error{
  color:#9e2f39;
  border:1px solid #f0bdc2;
  background:#fff2f3;
}

.form-row{
  margin:0 0 17px;
}

.form-row>label{
  display:block;
  margin:0 0 8px;
  color:#183b66;
  font-size:14px;
  line-height:1.2;
  font-weight:600;
}

.input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  height:49px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.88);
  box-shadow:0 1px 3px rgba(25,62,104,.025) inset;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}

.input-wrap:focus-within{
  border-color:#3a86dc;
  background:#fff;
  box-shadow:0 0 0 3px rgba(20,111,225,.10);
}

.input-wrap input{
  width:100%;
  min-width:0;
  height:47px;
  padding:0 50px 0 14px;
  border:0;
  outline:0;
  background:transparent;
  color:#16385f;
  font-size:14px;
  line-height:1;
  font-weight:500;
}

.input-wrap input::placeholder{
  color:#758ba7;
  opacity:1;
}

.input-wrap>svg{
  position:absolute;
  top:50%;
  right:15px;
  width:22px;
  height:22px;
  color:#4f75a3;
  transform:translateY(-50%);
  pointer-events:none;
}

.show-pass{
  position:absolute;
  top:0;
  right:0;
  width:50px;
  height:47px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0 6px 6px 0;
  outline:0;
  background:transparent;
  color:#4f75a3;
  cursor:pointer;
}

.show-pass svg{
  width:22px;
  height:22px;
}

.show-pass:focus-visible{
  box-shadow:0 0 0 3px rgba(20,111,225,.15) inset;
}

.show-pass.is-visible{
  color:var(--blue);
}

.form-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 18px;
}

.remember{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#355779;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  font-weight:500;
  user-select:none;
}

.remember input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.checkbox-ui{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid #b9c9dc;
  border-radius:4px;
  color:transparent;
  background:#fff;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.checkbox-ui svg{
  width:14px;
  height:14px;
}

.remember input:checked+.checkbox-ui{
  border-color:#1268c9;
  color:#fff;
  background:#1268c9;
  box-shadow:0 3px 7px rgba(18,104,201,.2);
}

.remember input:focus-visible+.checkbox-ui{
  box-shadow:0 0 0 3px rgba(20,111,225,.17);
}

.text-link{
  color:#0b67d0;
  font-size:13px;
  line-height:1;
  font-weight:600;
  text-decoration:none;
}

.text-link:hover,
.help-line a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

.primary-btn{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0 20px;
  border:0;
  border-radius:5px;
  outline:0;
  color:#fff;
  background:#1268c9;
  box-shadow:0 10px 22px rgba(18,104,201,.22);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  font-weight:700;
  transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.primary-btn svg{
  width:22px;
  height:22px;
  flex:0 0 auto;
}

.primary-btn:hover{
  background:#0f5eb7;
  box-shadow:0 12px 25px rgba(18,104,201,.28);
}

.primary-btn:active{
  transform:translateY(1px);
}

.primary-btn:focus-visible{
  box-shadow:0 0 0 4px rgba(20,111,225,.20),0 10px 22px rgba(18,104,201,.22);
}

.primary-btn:disabled{
  opacity:.68;
  cursor:wait;
  transform:none;
}

.help-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:14px 0 0;
  color:#8294aa;
  font-size:12px;
  line-height:1.2;
  font-weight:500;
}

.help-line a{
  color:#266ec0;
  font-weight:600;
  text-decoration:none;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
  margin:25px 0 0;
}

.trust-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-width:0;
  color:var(--navy);
}

.trust-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(208,224,242,.9);
  border-radius:9px;
  color:#0e69ce;
  background:rgba(255,255,255,.82);
  box-shadow:0 7px 18px rgba(36,85,138,.07);
  backdrop-filter:blur(8px);
}

.trust-icon svg{
  width:22px;
  height:22px;
}

.trust-item>span:last-child{
  min-width:0;
}

.trust-item strong{
  display:block;
  margin-top:2px;
  color:#153d6b;
  font-size:12px;
  line-height:1.15;
  font-weight:700;
  white-space:nowrap;
}

.trust-item small{
  display:block;
  margin-top:5px;
  color:#6e87a5;
  font-size:10.5px;
  line-height:1.35;
  font-weight:500;
}

.copyright{
  margin:26px 0 0;
  color:#738ca9;
  text-align:center;
  font-size:11px;
  line-height:1.2;
  font-weight:500;
}

.qr-modal{
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}

.qr-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,25,53,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.qr-card{
  position:relative;
  width:min(430px,100%);
  padding:25px;
  border:1px solid rgba(198,215,235,.95);
  border-radius:8px;
  background:rgba(255,255,255,.98);
  box-shadow:0 30px 80px rgba(8,36,75,.25);
}

.qr-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.qr-kicker{
  display:block;
  margin:0 0 5px;
  color:#1268c9;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.qr-head h2{
  margin:0;
  color:#123761;
  font-size:21px;
  line-height:1.18;
  letter-spacing:-.025em;
}

.qr-close{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  padding:0 0 2px;
  border:1px solid #d6e1ee;
  border-radius:5px;
  color:#55718f;
  background:#fff;
  cursor:pointer;
  font-size:24px;
  line-height:1;
}

.qr-box{
  width:236px;
  height:236px;
  display:grid;
  place-items:center;
  margin:23px auto 14px;
  padding:12px;
  border:1px solid #d5e2f0;
  border-radius:6px;
  background:#fff;
}

.qr-box img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.qr-status{
  color:#1f5f9f;
  text-align:center;
  font-size:13px;
  line-height:1.35;
  font-weight:600;
}

.qr-note{
  margin:13px 0 0;
  color:#617893;
  text-align:center;
  font-size:12px;
  line-height:1.45;
}

.qr-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:20px;
}

.qr-actions button{
  min-height:42px;
  border-radius:5px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}

.qr-refresh{
  border:1px solid #1268c9;
  color:#fff;
  background:#1268c9;
}

.qr-cancel{
  border:1px solid #c8d7e8;
  color:#355879;
  background:#fff;
}

@media (max-width:1280px){
  .scene{background-position:45% center}
  .login-page::before{
    background:linear-gradient(90deg,rgba(248,252,255,.04) 0%,rgba(248,252,255,.08) 36%,rgba(246,250,255,.52) 54%,rgba(248,251,255,.85) 73%,rgba(249,252,255,.92) 100%);
  }
  .login-shell{right:28px;width:404px}
  .brand-lockup{left:28px}
}

@media (max-height:780px) and (min-width:821px){
  .login-shell{
    transform:translateY(-50%) scale(.91);
    transform-origin:center right;
  }
  .brand-lockup{
    transform:scale(.9);
    transform-origin:left top;
  }
}

@media (max-height:690px) and (min-width:821px){
  .login-shell{
    transform:translateY(-50%) scale(.82);
  }
}

@media (max-width:820px){
  body{overflow:auto}
  .login-page{
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    padding:116px 18px 28px;
  }
  .scene{
    position:fixed;
    background-position:38% center;
  }
  .login-page::before{
    position:fixed;
    background:linear-gradient(180deg,rgba(247,251,255,.60) 0%,rgba(247,251,255,.82) 28%,rgba(247,251,255,.92) 100%);
  }
  .brand-lockup{
    position:absolute;
    top:20px;
    left:20px;
  }
  .brand-mark{
    width:56px;
    height:56px;
  }
  .brand-copy strong{font-size:27px}
  .brand-copy span{font-size:11px;white-space:normal}
  .login-shell{
    position:relative;
    top:auto;
    right:auto;
    width:min(466px,100%);
    margin:0 0 0 auto;
    transform:none;
  }
}

@media (max-width:520px){
  .login-page{padding:108px 12px 22px}
  .brand-lockup{left:14px;gap:11px}
  .brand-mark{width:50px;height:50px}
  .brand-copy strong{font-size:24px}
  .brand-copy span{font-size:10.5px;white-space:normal}
  .login-heading h1{font-size:28px}
  .login-heading p{font-size:12px}
  .auth-tabs{margin:0 18px 19px}
  .auth-tab{font-size:13px}
  .login-form{padding:0 18px 21px}
  .form-options{gap:12px}
  .remember,.text-link{font-size:12px}
  .trust-grid{gap:7px}
  .trust-item{display:block;text-align:center}
  .trust-icon{margin:0 auto 7px}
  .trust-item strong{white-space:normal}
  .trust-item small{font-size:9.5px}
  .qr-card{padding:20px}
  .qr-box{width:210px;height:210px}
}


@media (min-width:1800px) and (min-height:850px){
  /* On wide screens the original 2:1 illustration looks too distant. */
  .scene{
    background-size:auto 112%;
    background-position:44% center;
  }
  .brand-lockup{
    top:30px;
    left:48px;
    transform:scale(1.10);
    transform-origin:left top;
  }
  .login-shell{
    right:clamp(72px,4.6vw,104px);
    width:420px;
    transform:translateY(-50%) scale(1.08);
    transform-origin:center right;
  }
  .login-page::after{
    top:-112px;
    right:-118px;
    width:660px;
    height:660px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}