:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --line: #d1d5db;
  --accent: #1d4ed8;
  --accent-ink: #ffffff;
  --err: #b91c1c;
  --req: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Microsoft YaHei", sans-serif;
  padding: 16px;
}

.card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}

.intro h1 { font-size: 1.25rem; margin: 0 0 4px; }
.intro h2 { font-size: 1.05rem; margin: 0 0 12px; color: var(--muted); font-weight: 600; }
.intro .section { font-weight: 700; margin: 12px 0 8px; }
.intro p { margin: 8px 0; font-size: 0.95rem; }
.intro em { color: var(--muted); font-style: italic; }

form { margin-top: 20px; }
.field { margin-bottom: 18px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
.req { color: var(--req); }
.hint { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

input[type=text], input[type=email], select {
  width: 100%;
  padding: 12px;
  font-size: 16px; /* >=16px prevents iOS zoom-on-focus */
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
input[readonly] { background: #f3f4f6; color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.sigwrap { position: relative; }
#sigpad {
  width: 100%;
  height: 180px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
  touch-action: none; /* stop page scroll while drawing */
  display: block;
}
.clear {
  position: absolute;
  top: 8px; right: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.submit {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.submit:disabled { opacity: 0.6; cursor: default; }

.err { color: var(--err); font-size: 0.85rem; margin: 6px 0 0; min-height: 0; }
.formerr { text-align: center; margin-top: 12px; }

/* Honeypot: visually and semantically hidden, still submittable by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thanks { text-align: center; padding: 24px 0; }
.thanks h2 { margin: 0 0 8px; }

@media (max-width: 480px) {
  body { padding: 8px; }
  .card { padding: 16px; border-radius: 10px; }
}