:root {
  color-scheme: dark;
  --paper: #100d18;
  --ink: #f5effb;
  --muted: #b5a9c2;
  --line: #3e304a;
  --green: #bd82f2;
  --green-dark: #d4a9ff;
  --lime: #604178;
  --white: #1a1424;
  --coral: #ff8296;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(189, 130, 242, .10) .7px, transparent .7px);
  background-size: 17px 17px;
}
button, input, select { font: inherit; }
.shell { max-width: 1160px; min-height: 100vh; margin: 0 auto; padding: 26px 36px 22px; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.topbar-spacer { flex: 1; }
.language-label { color: var(--muted); font-size: 12px; }
.language-select { min-height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--white); }
.form-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 620px); justify-content: center; align-items: center; padding: 46px 0 55px; }
.intro { align-self: center; max-width: 350px; }
.eyebrow, .step-kicker { margin: 0 0 14px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: 0; }
h1, h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: 0; }
h1 { max-width: 520px; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; }
.intro-copy { max-width: 320px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.privacy-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.privacy-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.privacy-mark { color: var(--green); font-size: 11px; line-height: 1.5; }
.form-panel { width: 100%; max-width: 620px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: 5px; background: rgba(26, 20, 36, .96); box-shadow: 0 18px 55px rgba(0, 0, 0, .35); }
.progress-row { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.progress-track { height: 3px; flex: 1; overflow: hidden; background: #30243b; }
.progress-track span { display: block; width: 25%; height: 100%; background: var(--green); transition: width 180ms ease-out; }
.progress-label { min-width: 38px; color: var(--muted); text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.step { display: none; animation: appear 180ms ease-out; }
.step.active { display: block; }
@keyframes appear { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
h2 { font-size: 30px; line-height: 1.12; }
.step-copy { margin: 12px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.upload-zone { min-height: 136px; margin-top: 24px; padding: 20px; border: 1px dashed #77588d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; cursor: pointer; background: #21182d; }
.upload-zone:focus-within, .upload-zone:hover { border-color: var(--green); background: #2b1d39; }
.upload-icon { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--green); font-size: 23px; line-height: 1; }
.upload-zone > span:nth-child(2) { font-size: 14px; font-weight: 600; }
.upload-zone small { color: var(--muted); font-size: 11px; }
.photo-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.photo-preview img { display: block; width: 100%; max-height: 340px; border: 1px solid var(--line); border-radius: 3px; object-fit: contain; background: #100d18; }
.photo-preview .file-summary { flex: 0 0 auto; }
.photo-preview { align-items: flex-start; flex-direction: column; }
.uploaded-preview { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--green); font-size: 12px; }
.uploaded-preview img { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 3px; object-fit: cover; }
.submission-qr-block { margin-top: 20px; }
.submission-qr-block p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.qr-code { width: fit-content; max-width: 100%; padding: 10px; border-radius: 3px; background: #fff; }
.qr-code canvas { display: block; width: min(220px, 100%); height: auto; image-rendering: pixelated; }
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.file-summary { margin: 9px 0 0; color: var(--green); font-size: 12px; overflow-wrap: anywhere; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.field { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; }
.field input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: #120e1a; outline: none; }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(189, 130, 242, .16); }
.age-field { grid-column: 1 / -1; max-width: 150px; }
.actions { display: flex; justify-content: flex-end; margin-top: 24px; }
.actions.split { justify-content: space-between; gap: 12px; }
.button { min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font-size: 13px; font-weight: 700; }
.button.primary { color: #160e20; background: var(--green); }
.button.primary:hover:not(:disabled) { background: var(--green-dark); }
.button.primary:disabled { cursor: not-allowed; opacity: .42; }
.button.quiet { border-color: var(--line); color: var(--ink); background: transparent; }
.button.quiet:hover { background: #2b2036; }
.field-error { min-height: 18px; margin: 8px 0 0; color: var(--coral); font-size: 12px; }
.global-error { margin-top: 10px; }
.allergen-list { margin: 0; padding: 0; border: 0; }
.allergen-list legend { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.check-row { min-height: 48px; display: flex; gap: 12px; align-items: center; border-top: 1px solid #30243b; font-size: 14px; }
.check-row:last-child { border-bottom: 1px solid #30243b; }
.check-row input { width: 19px; height: 19px; accent-color: var(--green); }
.stop-kicker { color: var(--coral); }
.stop-symbol, .done-symbol { width: 48px; height: 48px; margin: 10px 0 18px; display: grid; place-items: center; border-radius: 50%; background: #3a1c31; color: var(--coral); font-size: 25px; }
.done-symbol { background: var(--lime); color: var(--ink); font-size: 27px; font-weight: 700; }
.footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.footer a { color: var(--green); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .shell { padding: 14px 16px 16px; }
  .topbar { min-height: 40px; }
  .language-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .form-layout { display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 22px 0 26px; }
  .intro { max-width: none; }
  .eyebrow { margin-bottom: 8px; }
  h1 { max-width: 460px; font-size: 34px; }
  .intro-copy { margin-top: 10px; font-size: 13px; line-height: 1.5; }
  .privacy-note { margin-top: 14px; padding-top: 10px; }
  .form-panel { max-width: none; padding: 22px 18px; }
  .progress-row { margin-bottom: 26px; }
  h2 { font-size: 27px; }
  .step-copy { margin-bottom: 18px; }
  .upload-zone { min-height: 138px; }
  .footer { margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}