.login-page {
  min-height:100dvh
}

.login-topbar {
  height:76px;
  background:#152031;
  color:#e7edf6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px
}

.login-brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.4px
}

.login-brand svg {
  height:33px;
  width:30px;
  background:#3563e9;
  border-radius:6px;
  padding:6px;
  fill:none;
  stroke:#fff;
  stroke-width:1.4;
  stroke-linejoin:round
}

.login-topbar>span {
  color:#8496b0;
  font-size:11px
}

.login-main {
  min-height:calc(100dvh - 76px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:65px 24px
}

.login-card {
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid #e0e6f0;
  border-radius:9px;
  padding:34px 37px 24px;
  box-shadow:0 5px 18px #20375505
}

.login-caption {
  font-size:8px;
  letter-spacing:1.5px;
  color:#9ba7b8;
  font-weight:600
}

.login-card h1 {
  font-size:27px;
  margin-top:11px;
  margin-bottom:10px
}

.login-card-header>p {
  font-size:11px;
  line-height:1.8;
  color:#8290a4;
  margin-bottom:26px
}

.login-form>label:not(.remember-field) {
  display:block;
  color:#52647d;
  font-size:11px;
  font-weight:500;
  margin:19px 0 8px
}

.login-form>input {
  display:block;
  width:100%;
  min-height:43px;
  border:1px solid #d9e2ef;
  background:#fbfcfe;
  color:#243852;
  border-radius:5px;
  padding:10px 12px;
  font-size:13px
}

.login-form>input:focus {
  border-color:#7090e4;
  outline:2px solid #eaf0ff;
  outline-offset:0
}

.remember-field {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  margin:20px 0 25px;
  color:#8090a6;
  font-size:10px;
  min-height:25px
}

.remember-field input {
  accent-color:#3563e9;
  margin:0;
  width:15px;
  height:15px
}

.login-form>.primary-button {
  width:100%;
  font-size:11px;
  min-height:43px;
  justify-content:space-between
}

.login-form>.primary-button>span {
  font-size:18px;
  font-weight:400;
  line-height:1
}

.privacy-note {
  border-top:1px solid #e7ecf3;
  padding-top:17px;
  margin-top:27px;
  font-size:9px;
  color:#8796a9
}

.privacy-note summary {
  cursor:pointer;
  min-height:25px
}

.privacy-note p {
  line-height:1.9;
  margin-top:8px
}

.field-error {
  font-size:10px;
  color:#b9674d;
  margin-top:7px
}

.login-footer {
  font-size:9px;
  color:#9aa8ba;
  margin:22px 0 0
}

.login-footer span {
  margin:0 9px;
  color:#c8d0dc
}

@media(max-width:600px) {
  .login-topbar {
    padding:0 23px;
    height:67px
  }
  .login-brand {
    font-size:15px;
    gap:8px
  }
  .login-topbar>span {
    font-size:8px
  }
  .login-brand svg {
    height:28px;
    width:26px
  }
  .login-main {
    min-height:calc(100dvh - 67px);
    padding:40px 20px
  }
  .login-card {
    padding:30px 25px 22px
  }
  .login-card h1 {
    font-size:26px
  }
  .login-form>input {
    font-size:16px;
    min-height:47px
  }
  .login-form>.primary-button {
    min-height:47px
  }
  .privacy-note {
    font-size:10px
  }
}

.login-topbar{background:#f7fbff;color:var(--text);border-bottom:1px solid var(--border)}.login-brand{font-size:28px;font-weight:700;color:var(--primary);gap:6px}.login-brand b{color:var(--text)}.login-brand svg{background:none;padding:0;fill:var(--primary);stroke:var(--primary)}.login-topbar>span{font-size:14px;color:#526b8c}.login-card{max-width:460px;border-radius:14px;border-color:var(--border);box-shadow:0 5px 22px #214b7b0e}.login-caption{font-size:12px;color:#526b8c;letter-spacing:1px}.login-card h1{font-size:32px}.login-card-header>p,.login-form>label:not(.remember-field){font-size:14px;color:#526b8c}.login-form>input{font-size:16px;min-height:48px;border-radius:8px}.remember-field{font-size:14px;color:#526b8c;min-height:44px}.remember-field input{height:18px;width:18px;accent-color:var(--primary)}.login-form>.primary-button{font-size:16px;min-height:48px;justify-content:center}.privacy-note{font-size:12px;color:#526b8c}.privacy-note summary{min-height:36px}.login-footer{font-size:12px;color:#526b8c}.form-error{font-size:14px;color:#b73240;background:#fff0f1;border-radius:8px;padding:12px}.field-error{font-size:12px}
@media(max-width:600px){.login-brand{font-size:25px}.login-topbar>span{font-size:12px}.login-card{padding:28px 22px}}@media(max-width:380px){.login-topbar>span{display:none}}