* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #F6F6F4;
  --panel: #FFFFFF;
  --line: #E3E2DD;
  --line-2: #D3D1C7;
  --ink: #22211F;
  --ink-2: #5F5E5A;
  --ink-3: #8C8A83;
  --blue: #185FA5;
  --blue-dark: #0C447C;
  --red: #A32D2D;
  --red-bg: #FBEDED;
}

html, body {
  margin: 0; padding: 0; min-height: 100%; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
}

body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 24px 16px;
  background-image:
    radial-gradient(circle at 15% 10%, #EAF1F8 0, rgba(234,241,248,0) 55%),
    radial-gradient(circle at 85% 90%, #F2EEE2 0, rgba(242,238,226,0) 50%);
}

.wrap { width: 100%; max-width: 372px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 20px;
  box-shadow: 0 6px 28px rgba(34, 33, 31, .07);
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand .mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 500; letter-spacing: 1px;
}
.brand h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.brand p { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--ink-2); }
.field input {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: #FBFBF9; color: var(--ink); outline: none;
  font-family: inherit; transition: border-color .12s, background .12s;
}
.field input:focus { border-color: var(--blue); background: #fff; }
.field input::placeholder { color: #B4B2A9; }

.pwd { position: relative; }
.pwd input { padding-right: 52px; }
.eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--ink-3);
  font-size: 12px; padding: 6px 8px; cursor: pointer; font-family: inherit;
}
.eye:hover { color: var(--blue); }

.err {
  min-height: 18px; font-size: 12px; color: var(--red);
  line-height: 1.5; margin-bottom: 8px;
}
.err.show {
  background: var(--red-bg); border: 1px solid #EFC7C7;
  border-radius: 8px; padding: 7px 10px;
}

.go {
  width: 100%; padding: 11px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--blue); border-radius: 9px;
  background: var(--blue); color: #fff; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.go:hover { background: var(--blue-dark); }
.go:disabled { opacity: .6; cursor: default; }

.foot {
  margin: 16px 0 0; font-size: 11px; color: var(--ink-3);
  line-height: 1.7; text-align: center;
}

@media (max-width: 420px) {
  .card { padding: 22px 18px 16px; border-radius: 12px; }
}