:root {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #17202a;
  background: #e9edf0;
  font-synthesis: none;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #e9edf0; }
button, input { font: inherit; letter-spacing: 0; }

.auth-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: #e9edf0;
}

.auth-shell::after { content: ""; position: fixed; z-index: 0; inset: 0 0 0 68%; background: #dfe5e7; }

.auth-panel {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  padding: 34px 36px 36px;
  background: #ffffff;
  border: 1px solid #cfd7db;
  border-radius: 6px;
  box-shadow: 0 18px 50px #34434c1a;
}

.auth-mark { width: 40px; height: 4px; margin-bottom: 26px; background: #087f5b; }
.auth-kicker { margin: 0 0 7px; color: #69747d; font-size: 10px; font-weight: 800; }
h1 { margin: 0; font-size: 25px; line-height: 1.25; }
.auth-copy { margin: 10px 0 27px; color: #69747d; font-size: 13px; }
label { display: block; margin-bottom: 8px; color: #515d66; font-size: 11px; font-weight: 700; }

input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  color: #17202a;
  background: #fbfcfc;
  border: 1px solid #cfd7db;
  border-radius: 5px;
  outline: none;
}

input:focus { border-color: #5d9e8c; box-shadow: 0 0 0 3px #dceee9; }
.auth-status { min-height: 31px; margin: 7px 0 0; color: #69747d; font-size: 11px; line-height: 1.5; }
.auth-status[data-tone="error"] { color: #aa3939; }

button {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  background: #087f5b;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

button:hover:not(:disabled) { background: #066649; }
button:disabled { cursor: wait; opacity: .65; }

@media (max-width: 520px) {
  .auth-shell { padding: 16px; }
  .auth-shell::after { display: none; }
  .auth-panel { padding: 28px 24px 30px; }
}