:root {
  --ink: #17293d;
  --ink-2: #3a4d63;
  --paper: #f4f0e8;
  --paper-2: #ece5d7;
  --surface: #ffffff;
  --seal: #9e2b25;
  --seal-deep: #7c1f1b;
  --line: #e2dccd;
  --line-strong: #cfc7b4;
  --muted: #7b8390;
  --safe: #3f8a5a;
  --rush: #c05a2f;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --num: "SF Mono", "Roboto Mono", "Menlo", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: radial-gradient(1000px 460px at 80% -10%, rgba(158,43,37,.05), transparent 60%), var(--paper);
  -webkit-font-smoothing: antialiased;
}
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--line); border-top: 4px solid var(--seal); border-radius: 14px;
  padding: 30px 28px; box-shadow: 0 10px 40px rgba(23,41,61,.10);
}
.auth-seal {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 25%, #b8352d, var(--seal) 55%, var(--seal-deep));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  font-family: var(--serif); font-size: 24px; font-weight: 700;
}
.auth-card h1 { font-family: var(--serif); font-size: 22px; margin: 0 0 4px; text-align: center; }
.auth-sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; text-align: center; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; }
.field input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px;
  font-size: 15px; font-family: var(--sans); outline: none; color: var(--ink); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--seal); box-shadow: 0 0 0 3px rgba(158,43,37,.12); }
.btn {
  width: 100%; padding: 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #22384f, var(--ink)); color: #fff;
  font-size: 15px; font-weight: 600; font-family: var(--sans);
  box-shadow: 0 2px 10px rgba(23,41,61,.22);
}
.btn:hover { box-shadow: 0 4px 16px rgba(23,41,61,.28); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.msg { font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.msg.err { color: var(--rush); } .msg.ok { color: var(--safe); }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.auth-foot a { color: var(--seal); text-decoration: none; font-weight: 600; }

/* 滑块 */
.cap-wrap { margin: 6px 0 4px; }
.cap-track { position: relative; width: 300px; max-width: 100%; height: 42px; background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.cap-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(158,43,37,.14); }
.cap-gap { position: absolute; top: 0; height: 100%; width: 42px; border: 2px dashed var(--line-strong); border-radius: 9px; box-sizing: border-box; }
.cap-handle { position: absolute; left: 0; top: 0; width: 42px; height: 42px; background: var(--seal); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 9px; cursor: grab; user-select: none; font-size: 20px; }
.cap-handle.ok { background: var(--safe); } .cap-handle.bad { background: var(--rush); }
.cap-tip { font-size: 12px; color: var(--muted); margin-top: 6px; cursor: pointer; }
.cap-tip.ok { color: var(--safe); } .cap-tip.bad { color: var(--rush); }