/* 登录页 —— 沿用主界面那套「设备面板」的语汇：
   一块阳极氧化面板，上面一盏 tally 灯，输错就变红。 */
:root {
  --ink: #17150f; --bay: #1e1b15; --panel: #262218; --rule: #3b3427;
  --text: #ece5d6; --text-dim: #a2977f; --text-faint: #6f6653;
  --signal: #d98c2b; --signal-hi: #f0a63f; --signal-ink: #1a1408;
  --err: #c0563f;
  --font-panel: "Bahnschrift", "Bahnschrift SemiCondensed", "Segoe UI", sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI",
               "Microsoft YaHei", system-ui, sans-serif;
  --font-data: "Cascadia Mono", "Consolas", ui-monospace, monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --ink: #e8e4da; --bay: #f2efe7; --panel: #fbf9f4; --rule: #d8d1c0;
    --text: #23201a; --text-dim: #6b6455; --text-faint: #928a77;
    --signal: #a8620d; --signal-hi: #8f5308; --signal-ink: #fff7ea; --err: #a53c26;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--ink); color: var(--text);
  font: 14px/1.6 var(--font-body);
  display: grid; place-items: center; padding: 24px;
}
.gate { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.plate {
  background: var(--bay); border: 1px solid var(--rule); border-radius: 4px;
  padding: 30px 32px 26px; width: min(360px, 92vw); text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.lamp {
  width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--signal); box-shadow: 0 0 12px -1px var(--signal);
  animation: idle 2.6s ease-in-out infinite;
}
.lamp.bad { background: var(--err); box-shadow: 0 0 12px -1px var(--err); animation: none; }
@keyframes idle { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lamp { animation: none; } }

h1 {
  font: 600 15px/1.3 var(--font-panel); letter-spacing: .12em; margin: 0 0 6px;
}
.sub { margin: 0 0 22px; font-size: 12.5px; color: var(--text-faint); }

form { display: flex; flex-direction: column; gap: 10px; }
input {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--rule); border-radius: 3px; padding: 11px 12px;
  font: 15px/1 var(--font-data); letter-spacing: .12em; text-align: center;
}
input:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
input::placeholder { color: var(--text-faint); letter-spacing: normal; font-family: var(--font-body); }

.go {
  border: 1px solid var(--signal); background: var(--signal); color: var(--signal-ink);
  border-radius: 3px; padding: 11px 14px; cursor: pointer;
  font: 600 13px/1 var(--font-panel); letter-spacing: .14em; text-transform: uppercase;
}
.go:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.go:disabled { opacity: .45; cursor: not-allowed; }
.go:focus-visible { outline: 2px solid var(--text-dim); outline-offset: 2px; }

.msg { min-height: 1.4em; margin: 14px 0 0; font-size: 12.5px; color: var(--err); }
.msg.ok { color: var(--text-dim); }
.foot { margin: 0; font-size: 11.5px; color: var(--text-faint); }