:root { --bg: #EEF1EF; --card: #FDFCF9; --bd: #DDE4E1; --ink: #2E3A44; --ink2: #4C5F6B; --muted: #7E939C; --bad: #A8473B; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121416; --card: #1B1E21; --bd: #2C3236; --ink: #E7ECEA; --ink2: #B9C6C4; --muted: #8A9A9F; --bad: #E58B7E; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--ink);
  font: 15px/1.5 Manrope, "Segoe UI", system-ui, sans-serif; }
.box { width: min(400px, 100%); background: var(--card); border: 1px solid var(--bd); border-radius: 18px; padding: 30px 28px 22px;
  box-shadow: 0 14px 40px rgba(46, 58, 68, .08); text-align: center; }
.logo { width: 46px; height: 46px; }
h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 24px; margin: 10px 0 6px; }
.lead { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.step { display: grid; gap: 10px; }
.hidden { display: none !important; }
input { font: inherit; font-size: 15px; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--bd); background: var(--bg); color: var(--ink); width: 100%; }
input:focus { outline: 2px solid var(--ink2); outline-offset: 1px; }
#code { letter-spacing: 6px; text-align: center; font-size: 20px; font-weight: 700; }
#code::placeholder { letter-spacing: normal; font-size: 15px; font-weight: 400; }
button { font: inherit; font-weight: 700; font-size: 15px; padding: 12px; border-radius: 12px; border: 0; background: var(--ink); color: var(--card); cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
button.link { background: none; color: var(--ink2); font-weight: 500; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.ts:empty { display: none; }
.ts { min-height: 65px; }
.err { min-height: 20px; margin: 12px 0 0; color: var(--bad); font-size: 13.5px; }
.foot { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.foot a { color: var(--ink2); }