:root {
  --bg: #f6f0e2; --paper: #fffaf0; --ink: #2e2a22; --mute: #776e5f; --rule: #b9ad94; --accent: #c9651f; --bad: #b3261e;
  --serif: 'Songti SC', 'Noto Serif SC', 'STSong', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14172a; --paper: #1c2038; --ink: #ece7d9; --mute: #a8a291; --rule: #565c82; --accent: #e08a4a; --bad: #f2b8b5; }
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.card {
  width: 100%; max-width: 360px; background: var(--paper); border-radius: 20px;
  padding: 32px 28px 28px; text-align: center; box-shadow: 0 14px 34px -22px rgba(80, 60, 20, 0.5);
}
.lamp { display: block; margin: 0 auto 8px; object-fit: contain; }
h1 { margin: 0 0 22px; font: 700 24px/1.3 var(--serif); }
form { text-align: left; }
label { display: block; font-size: 13px; color: var(--mute); margin-bottom: 2px; }
input {
  width: 100%; height: 48px; padding: 0 2px; font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--rule); border-radius: 0;
}
input:focus { outline: 0; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
body[data-mode='code'] input { font: 600 22px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; }
button {
  width: 100%; height: 48px; margin-top: 18px; font: 600 16px/1 var(--sans); color: #fff; background: var(--accent);
  border: 0; border-radius: 12px; cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.msg { min-height: 1.6em; margin: 12px 0 0; font-size: 14px; color: var(--bad); text-align: center; }
.login-mark { display:grid;place-items:center;width:52px;height:60px;margin:0 auto 26px;border:1px solid #58724d;border-radius:4px 4px 22px 4px;color:#58724d;font:34px var(--serif); }
.card { max-width:420px;padding:46px 40px;border-radius:4px 4px 48px 4px; }
h1 { font-size:25px;line-height:1.7;margin-bottom:10px; }
.login-sub { font-size:11px;color:var(--mute);letter-spacing:.1em;margin-bottom:35px; }
button { border-radius:99px;background:var(--ink);color:var(--paper);font-size:14px; }
@media (max-width:480px) { .card { padding:35px 25px; }h1 { font-size:23px; } }