:root {
  color-scheme: light;
  font-family: Geist, Inter, "Microsoft YaHei UI", "PingFang SC", "Segoe UI", system-ui, sans-serif;
  color: #171d2c;
  background: #f5f5f0;
}
* { box-sizing: border-box; }
body {
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 24px 16px;
  background:
    repeating-radial-gradient(ellipse at 96% 28%, transparent 0 20px, #6778a529 21px 22px, transparent 23px 35px),
    linear-gradient(147deg, #232f49, #151d2e 64%);
}
.login { width: min(100%, 420px); }
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
  color: #fff;
  font-size: 19px;
  font-weight: 730;
  letter-spacing: -.02em;
}
.brand img { border-radius: 11px; }
.brand em { color: #f3b57e; font-style: normal; }
.card {
  border-radius: 21px;
  background: #fff;
  border: 1px solid #dfe4ec;
  padding: clamp(21px, 5vw, 32px);
  box-shadow: 0 28px 80px #0b112660;
}
h1 { margin: 0 0 7px; font-size: clamp(25px, 7vw, 34px); letter-spacing: -.04em; }
.intro { margin: 0 0 25px; font-size: 14px; line-height: 1.65; color: #545e72; }
form { display: grid; min-width: 0; gap: 8px; }
label { font-size: 13px; font-weight: 630; }
input {
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 10px 11px;
  border: 1px solid #cdd3de;
  border-radius: 9px;
  font: inherit;
}
input + label { margin-top: 9px; }
input:focus-visible, button:focus-visible { outline: 2px solid #5469ef; outline-offset: 2px; }
button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #4056df;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button:hover { background: #3348cc; }
button:disabled { opacity: .65; cursor: default; }
.status { margin: 0; min-height: 18px; color: #933022; font-size: 13px; line-height: 1.5; }