:root { --bg: #fff; --fg: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; color: #111; background: #f7f7f7; }
.scan-page { max-width: 480px; margin: 0 auto; padding: 0 0 64px; }
.tag-hero { background: var(--bg); color: var(--fg); padding: 48px 24px 32px; text-align: center; }
.tag-hero .glyph { font-size: 144px; line-height: 1; font-weight: 900; letter-spacing: -0.04em; }
.tag-hero h1 { margin: 16px 0 8px; font-size: 28px; }
.tag-hero .note { margin: 0; opacity: 0.85; }
.ping { padding: 32px 24px; background: #fff; }
.ping h2 { margin-top: 0; font-size: 22px; }
.ping label { display: block; margin: 16px 0; font-size: 14px; color: #444; }
.ping label .req { color: #C8102E; }
.ping label .opt { color: #777; font-weight: 400; font-size: 12px; }
.ping input[type=text], .ping input:not([type=checkbox]):not([type=hidden]), .ping textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
  border: 1px solid #ccc; border-radius: 8px; background: #fafafa;
}
.ping textarea { resize: vertical; }
.ping label.check { display: flex; align-items: center; gap: 8px; }
.ping button { display: block; width: 100%; padding: 14px; font: 600 16px ui-sans-serif, system-ui, sans-serif;
  background: #111; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.ping button:disabled { opacity: 0.5; }
footer { text-align: center; padding: 32px 24px; color: #888; }
.thanks { padding: 64px 24px; text-align: center; }
.thanks h2 { font-size: 28px; margin-bottom: 8px; }