* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --ink: #1a1a1a;
  --gray: #6b6b6b;
  --line: #dcdcdc;
  --soft: #f6f6f4;
  --mark: #8a6a3d;
  --err: #a33;
  --ok: #2d6a4f;
}
body {
  font-family:
    "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  background: #fbfbfa;
  color: var(--ink);
  font-size: 13.5px;
}
.auth-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 20px;
}
.auth-card {
  width: 392px;
  background: #fff;
  border: 1px solid var(--line);
}
.auth-card.password {
  width: 426px;
}
.auth-head {
  border-bottom: 2px solid var(--ink);
  padding: 26px 32px 20px;
}
.auth-brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
}
.auth-brand em {
  font-style: normal;
  color: var(--mark);
}
.auth-head h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
}
.auth-head p {
  font-size: 12px;
  color: var(--gray);
  margin-top: 7px;
  line-height: 1.7;
  letter-spacing: 0.5px;
}
.auth-body {
  padding: 26px 32px 30px;
}
.auth-field {
  margin-bottom: 19px;
}
.auth-field label {
  display: block;
  font-size: 11.5px;
  color: var(--gray);
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.auth-field i {
  font-style: normal;
  color: var(--err);
  margin-left: 3px;
}
.auth-field input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--gray);
  background: transparent;
  font: inherit;
  font-size: 14px;
  padding: 7px 2px;
  color: var(--ink);
}
.auth-field input:focus {
  outline: 0;
  border-bottom: 2px solid var(--mark);
  padding-bottom: 6px;
}
.auth-field input::placeholder {
  color: #b8b8b8;
}
.auth-alert {
  border: 1px solid var(--err);
  border-left-width: 3px;
  background: #fdf6f6;
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--err);
  margin-bottom: 19px;
  line-height: 1.7;
}
.auth-alert[hidden] {
  display: none;
}
.auth-alert b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.auth-code {
  display: block;
  font:
    11px ui-monospace,
    Menlo,
    monospace;
  color: #8a5555;
  margin-top: 5px;
}
.auth-button {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 12px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  margin-top: 5px;
}
.auth-button:disabled {
  background: #c4c4c4;
  cursor: not-allowed;
}
.auth-foot {
  border-top: 1px solid var(--line);
  padding: 14px 32px;
  font-size: 11.5px;
  color: var(--gray);
  display: flex;
  justify-content: space-between;
}
.password .auth-foot {
  justify-content: center;
}
.auth-forced {
  border-left: 3px solid var(--mark);
  background: var(--soft);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.75;
  margin-bottom: 21px;
}
.auth-forced b {
  color: var(--mark);
}
.password-rules {
  margin: -6px 0 20px;
  padding: 11px 14px;
  background: var(--soft);
  border: 1px solid #ececea;
}
.password-rules .title {
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.password-rules li {
  list-style: none;
  font-size: 12px;
  color: var(--gray);
  line-height: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.password-rules .icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  position: relative;
}
.password-rules li.pass {
  color: var(--ok);
}
.password-rules li.pass .icon {
  border-color: var(--ok);
  background: var(--ok);
}
.password-rules li.pass .icon:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border-right: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(40deg);
}
.password-rules li.fail {
  color: var(--err);
}
.password-rules li.fail .icon {
  border-color: var(--err);
}
@media (max-width: 480px) {
  .auth-stage {
    padding: 20px 14px;
  }
  .auth-card,
  .auth-card.password {
    width: 100%;
  }
  .auth-head,
  .auth-body {
    padding-left: 24px;
    padding-right: 24px;
  }
}