:root {
  --bg: #f7f8fa;
  --border: #d6d9de;
  --ink: #1f2937;
  --accent: #cf232a; /* red accent for brand continuity */
  --muted: #6b7280;
  --ok: #0ea5e9;
}

* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0; background: var(--bg); color: var(--ink);
}

.site-header, .site-footer {
  padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid var(--border);
}
.site-footer { border-top: 1px solid var(--border); border-bottom: none; text-align: center; color: var(--muted); }

.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { width: 64px; height: 64px; object-fit: cover; }
.brand h1 { margin: 0; font-size: 1.4rem; line-height: 1.2; }
.brand p { margin: 0.15rem 0 0; color: var(--muted); }

.contact { margin-top: 0.5rem; display: grid; grid-template-columns: repeat(3, auto); gap: 0.75rem; font-size: 0.95rem; }
@media (max-width: 720px) { .contact { grid-template-columns: 1fr; } }

main { max-width: 1000px; margin: 1rem auto; padding: 0 1rem; }
form { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }

h2, h3 { margin: 1rem 0 0.5rem; }
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-wide { grid-column: 1 / -1; }
label { font-weight: 600; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], textarea {
  border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 1rem;
}
textarea { resize: vertical; }

.check { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; }

.pattern-pad {
  display: grid; grid-template-columns: repeat(3, 64px); gap: 16px; padding: 8px; margin: 0.5rem 0 0.25rem;
}
.pattern-pad .dot {
  width: 64px; height: 64px; border: 2px solid var(--border); border-radius: 50%;
  background: #fff; position: relative; cursor: pointer;
}
.pattern-pad .dot.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(207,35,42,0.2); }

.helptext { color: var(--muted); font-size: 0.9rem; }

.sig-wrap { border: 1px dashed var(--border); border-radius: 8px; padding: 0.5rem; background: #fafafa; }
canvas { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; border: 1px solid var(--border); }

.actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
button {
  border: none; background: var(--accent); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer;
}
button.secondary { background: #111827; color: #fff; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

dialog {
  border: none; border-radius: 12px; padding: 0; width: min(800px, 92vw);
}
dialog article { padding: 1rem; }
dialog::backdrop { background: rgba(0,0,0,0.4); }

/* Print styles */
@media print {
  header, .actions, .site-footer, #viewTerms, #closeTerms { display: none !important; }
  body { background: #fff; }
  form { border: none; }
}