:root { --fg:#1f2937; --muted:#6b7280; --line:#d1d5db; --bg:#f3f4f6; --card:#fff; --accent:#2563eb; --err:#dc2626; --ok:#16a34a; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif; color:var(--fg); background:var(--bg); }
main { max-width: 640px; margin: 32px auto; padding: 0 16px; }
form { background:var(--card); border-radius:12px; padding:28px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
h1 { margin:0 0 20px; font-size:1.5rem; }
.field { margin-bottom:18px; }
label.title { display:block; font-weight:600; margin-bottom:6px; }
.req::after { content:" *"; color:var(--err); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
textarea { min-height:140px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.row input[type=text] { flex:1 1 200px; }
.radios { display:flex; gap:14px; }
.hint { color:var(--muted); font-size:.85rem; margin-top:4px; }
.check { display:flex; gap:8px; align-items:flex-start; }
.check input { margin-top:4px; }
a { color:var(--accent); }
button { width:100%; padding:12px; border:0; border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
#msg { margin-top:14px; min-height:1.5em; }
#msg.err { color:var(--err); }
#msg.ok { color:var(--ok); }