:root { --ink: #1b2a4a; --muted: #5b6785; --brand: #2563eb; --brand-ink: #fff; --accent: #f97362;
  --bg: #f4f6fb; --card: #fff; --line: #dfe4ef; --err: #b42318; --err-bg: #fef3f2; --ok: #12b76a; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
.top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: 1.1rem; background: var(--card); border-bottom: 1px solid var(--line); }
.logo { width: 26px; height: 32px; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 35% 30%, #ffb3a8, var(--accent)); position: relative; }
.logo::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 2px; height: 8px; background: var(--muted); }
.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; margin: 0 0 16px; }
.center { text-align: center; }
h1 { font-size: 1.4rem; margin: 0 0 8px; }
h2 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lead { color: var(--muted); margin: 0 0 16px; }
.sub { color: var(--muted); font-size: .92rem; margin: 0 0 4px; }
.field { display: block; margin: 12px 0; font-weight: 600; }
.field input, .field textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.field input:focus, .field textarea:focus { outline: 3px solid #bfd3fe; border-color: var(--brand); }
.code-input { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; }
.q { border: 0; padding: 0; margin: 14px 0; }
.q legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.yn { display: flex; gap: 10px; }
.wrap-pills { flex-wrap: wrap; }
.pill input, .check input { position: absolute; opacity: 0; }
.pill span { display: inline-block; min-width: 84px; text-align: center; padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; }
.pill input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pill input:focus-visible + span, .check input:focus-visible + span { outline: 3px solid #bfd3fe; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 420px) { .checks { grid-template-columns: 1fr; } }
.check { display: block; position: relative; }
.check span { display: block; padding: 10px 12px 10px 42px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; position: relative; }
.check span::before { content: ""; position: absolute; left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--muted); border-radius: 5px; }
.check input:checked + span { border-color: var(--brand); background: #eef4ff; }
.check input:checked + span::before { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 3px #fff; }
.reveal { padding-left: 4px; }
.btn { display: block; width: 100%; margin-top: 18px; padding: 14px; font: inherit; font-weight: 700; color: var(--brand-ink); background: var(--brand); border: 0; border-radius: 12px; cursor: pointer; }
.btn:hover { filter: brightness(1.05); }
.link-btn { background: none; border: 0; color: var(--brand); font: inherit; padding: 8px 0; cursor: pointer; text-decoration: underline; }
.again { margin-top: 8px; text-align: center; }
.error { color: var(--err); background: var(--err-bg); padding: 10px 12px; border-radius: 10px; }
.error-box { border-color: #fecdca; background: var(--err-bg); }
.error-box h2 { color: var(--err); margin-top: 0; text-transform: none; letter-spacing: 0; }
.error-box ul { margin: 0; padding-left: 20px; }
.sig { width: 100%; height: auto; aspect-ratio: 3 / 1; border: 2px dashed var(--line); border-radius: 10px; background: #fff; touch-action: none; }
.big-check { width: 64px; height: 64px; line-height: 64px; margin: 4px auto 12px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 2rem; }
.foot { max-width: 640px; margin: 0 auto; padding: 8px 16px 32px; color: var(--muted); font-size: .85rem; text-align: center; }
[hidden] { display: none !important; }
.shutter { position: relative; overflow: hidden; font-size: 1.2rem; padding: 22px; }
.shutter input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.preview { display: block; width: 100%; max-width: 420px; margin: 16px auto 0; border-radius: 12px; }