.login label {
  color: #17224a;
  font-weight: 700;
  margin-bottom: 18px;
}

.login input {
  min-height: 48px;
  margin-top: 9px;
  padding: 12px 15px;
  border-radius: 11px;
  border-color: #bfcae0;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 8px 24px #12224d0a;
}

.login input:hover {
  border-color: #a9b8d3;
}

.login input:focus {
  outline: 0;
  border-color: var(--hk-yellow-2);
  box-shadow:
    0 0 0 3px #ffcc1830,
    0 12px 28px #12224d12,
    0 1px 0 #ffffff inset;
}

.login .password-control {
  display: block;
  position: relative;
  margin-top: 9px;
}

.login .password-control input {
  margin-top: 0;
  padding-right: 56px;
  border-radius: 11px;
}

.login .password-control .password-toggle {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #475a7b;
}

.login .password-control .password-toggle:hover {
  background: #eef3fb;
  color: var(--hk-navy);
}

:root[data-theme="dark"] .login label {
  color: #eef4ff;
}

:root[data-theme="dark"] .login input {
  background: linear-gradient(180deg, #101d42 0%, #0c1738 100%);
  border-color: #3d4d7a;
  box-shadow:
    0 1px 0 #ffffff10 inset,
    0 14px 32px #00000018;
}

:root[data-theme="dark"] .login input:hover {
  border-color: #526391;
}

:root[data-theme="dark"] .login input:focus {
  border-color: var(--hk-yellow);
  box-shadow:
    0 0 0 3px #ffcc1838,
    0 18px 34px #00000024,
    0 1px 0 #ffffff12 inset;
}

:root[data-theme="dark"] .login .password-control .password-toggle {
  background: #15244f;
  color: #d7e2fb;
}

:root[data-theme="dark"] .login .password-control .password-toggle:hover {
  background: #1c2f66;
  color: #ffffff;
}