:root {
  --bg: #f4f2ee; --panel: #fbfaf7; --ink: #1c1b19; --ink-2: #3a3832; --muted: #6b675f;
  --line: #e2ded6; --line-2: #d9d4ca; --accent: #1f5f8b; --accent-dark: #174a6d; --danger: #a5452f;
  --mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
input, button { font-family: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: 440px; margin: 0 auto; padding: 56px 16px 40px; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 18px 2px; font-weight: 600; font-size: 16px; }
.card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.card h1 { margin: 0; font: 600 20px/1.25 'IBM Plex Sans', sans-serif; }
.lead { margin: -6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
label small { font-weight: 400; color: var(--muted); font-size: 12px; }
input:not([type=checkbox]) { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; font-size: 15px; color: var(--ink); outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,95,139,.15); }
input[name=code] { font: 500 20px var(--mono); letter-spacing: .12em; }
input::placeholder { color: #b8b2a6; }
.primary { height: 42px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.primary:hover { background: var(--accent-dark); }
.primary:disabled { opacity: .5; cursor: default; }
.secondary { height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.secondary:hover { border-color: var(--accent); color: var(--accent); }
.link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12.5px; cursor: pointer; }
.link:hover { text-decoration: underline; }
.error { margin: 0; padding: 8px 10px; border-radius: 6px; background: #f7e2dc; color: var(--danger); font-size: 13px; }
a { color: var(--accent); }
@media (max-width: 460px) {
  .wrap { padding-top: 28px; }
}
.hint { margin: -4px 0 0; color: var(--muted); font-size: 12.5px; }
a.link { text-align: center; align-self: center; text-decoration: none; }