:root { --paper: #D9D8D3; --paper-white: #EEEDE8; --ink: #141414; --ink-soft: #3A3A38; --hairline: #B4B3AD; --cobalt: #1F3FD1; --cobalt-deep: #16309F; --vermilion: #F0412A;
  --f-display: "Sofia Sans Condensed", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: grid; place-items: center; padding: 24px 16px; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
  background-image: repeating-linear-gradient(180deg, transparent 0 11px, rgba(20,20,20,.07) 11px 12px); }
.card { width: min(420px, 100%); background: var(--paper-white); border: 1.5px solid var(--ink); padding: 32px 28px 30px; }
.mark { width: 36px; height: 36px; display: block; margin-bottom: 18px; }
h1 { font-family: var(--f-display); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; }
.sub { margin: 0 0 24px; color: var(--ink-soft); font-size: 15px; }
label { display: block; font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
input { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); font: inherit; }
input:focus { outline: 2px solid var(--vermilion); outline-offset: 1px; }
.err { min-height: 22px; margin: 14px 0 6px; color: var(--vermilion); font-size: 14px; font-weight: 700; }
button { width: 100%; height: 46px; border: 1.5px solid var(--cobalt); border-radius: 0; background: var(--cobalt); color: var(--paper-white); font: 700 16px var(--f-body); cursor: pointer; }
button:hover:not(:disabled) { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
button:disabled { opacity: .6; cursor: default; }
button:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }