:root {
  color-scheme: light;
  --field-blue: #155eef;
  --field-blue-dark: #004eeb;
  --field-ink: #101828;
  --field-muted: #475467;
  --field-line: #d0d5dd;
  --field-soft: #f8fafc;
  --field-success: #067647;
  --field-warn: #b54708;
  --field-danger: #b42318;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: #fff; }
body.field-body {
  min-width: 320px;
  margin: 0;
  background: #fff;
  color: var(--field-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; }
button, input, select { min-height: 48px; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #84adff;
  outline-offset: 2px;
}
.field-app { min-height: 100dvh; }
.field-shell { width: min(100%, 1080px); margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 16px; border-bottom: 1px solid var(--field-line); }
.field-title { margin: 0; font-size: clamp(20px, 4vw, 28px); line-height: 1.2; }
.field-context { margin: 4px 0 0; color: var(--field-muted); font-size: 14px; }
.field-grid { display: grid; gap: 16px; margin-top: 16px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-card { padding: 18px; border: 1px solid var(--field-line); border-radius: 10px; background: #fff; }
.field-card.soft { background: var(--field-soft); }
.field-card h2, .field-card h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.3; }
.field-card p { margin: 8px 0; }
.field-stack { display: grid; gap: 12px; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.field-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.field-choice-row.choice-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-choice-row .field-choice { width: 100%; }
.field-row.between { justify-content: space-between; }
.field-label { display: grid; gap: 6px; font-weight: 700; color: #344054; }
.field-label small, .field-help { color: var(--field-muted); font-weight: 400; font-size: 14px; }
.field-input, .field-select { width: 100%; padding: 10px 12px; border: 1px solid #98a2b3; border-radius: 7px; background: #fff; color: var(--field-ink); }
.field-input[readonly] { background: #f2f4f7; }
.field-button { min-height: 48px; padding: 10px 16px; border: 1px solid var(--field-blue); border-radius: 7px; background: var(--field-blue); color: #fff; font-weight: 700; cursor: pointer; }
.field-button:hover:not(:disabled) { background: var(--field-blue-dark); }
.field-button.secondary { border-color: #667085; background: #fff; color: #344054; }
.field-button.danger { border-color: var(--field-danger); background: #fff; color: var(--field-danger); }
.field-button:disabled { cursor: not-allowed; opacity: .55; }
.field-button.full { width: 100%; }
.field-choice { min-height: 48px; padding: 9px 13px; border: 1px solid #98a2b3; border-radius: 7px; background: #fff; color: #344054; font-weight: 700; cursor: pointer; }
.field-choice[aria-pressed="true"] { border-color: var(--field-blue); background: #eff4ff; color: var(--field-blue-dark); }
.field-status { padding: 12px; border: 1px solid var(--field-line); border-radius: 7px; background: #f8fafc; color: #344054; }
.field-status.success { border-color: #6ce9a6; background: #ecfdf3; color: #05603a; }
.field-status.warn { border-color: #fec84b; background: #fffaeb; color: #93370d; }
.field-status.error { border-color: #fda29b; background: #fef3f2; color: #b42318; }
.field-status[hidden], .field-hidden { display: none !important; }
.field-stat-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.field-stat { padding: 12px; border: 1px solid var(--field-line); border-radius: 7px; background: #fff; }
.field-stat strong { display: block; font-size: 24px; line-height: 1.15; }
.field-stat span { display: block; color: var(--field-muted); font-size: 13px; }
.field-video { width: 100%; max-height: 52dvh; background: #101828; border-radius: 8px; object-fit: cover; }
.field-canvas { display: block; width: min(100%, 300px); height: auto; margin: 12px auto; image-rendering: pixelated; }
.field-table-wrap { overflow-x: auto; border: 1px solid var(--field-line); border-radius: 7px; }
.field-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.field-table th, .field-table td { padding: 10px; border-bottom: 1px solid var(--field-line); text-align: left; vertical-align: middle; }
.field-table th { background: #f9fafb; color: #344054; font-size: 14px; }
.field-table tr:last-child td { border-bottom: 0; }
.field-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.field-tabs .field-button { flex: 1 1 140px; }
.field-badge-card { max-width: 360px; margin: 16px auto; padding: 20px; border: 2px solid var(--field-ink); text-align: center; }
.field-badge-print-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.field-consent { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--field-line); border-radius: 7px; color: #344054; font-weight: 600; }
.field-consent input { flex: 0 0 auto; min-width: 22px; min-height: 22px; margin-top: 1px; }
.field-badge-card strong { display: block; font-size: 24px; letter-spacing: .06em; }
.field-revisit { margin-top: 12px; }
.field-loading { width: min(100%, 560px); margin: 15vh auto; padding: 24px; border: 1px solid var(--field-line); border-radius: 10px; text-align: center; }
@media (max-width: 620px) {
  .field-shell { padding-top: 12px; }
  .field-head { align-items: flex-start; flex-direction: column; }
  .field-grid.two, .field-stat-list { grid-template-columns: 1fr; }
  .field-card { padding: 16px; }
  .field-button, .field-choice { width: 100%; }
  .field-row > .field-button, .field-row > .field-choice { flex: 1 1 100%; }
  .field-row.field-choice-row > .field-choice { flex: initial; }
}
@media print {
  .field-head, .field-tabs, .field-no-print, .field-status, .field-print-hide { display: none !important; }
  .field-shell { width: 100%; padding: 0; }
  .field-card { border: 0; }
}