/* One column, large targets, high contrast. The people filling this in are doing it once,
   often on a phone, often not young — so nothing here is subtle and nothing is hidden
   behind an icon. */
:root{--ink:#16202a;--muted:#5d6b7a;--line:#d5dde5;--bg:#f6f8fa;--card:#fff;
      --accent:#1b5e9c;--accent-d:#134572;--ok:#1e7a46;--warn:#8a5a00}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:"Sarabun","Noto Sans Thai",system-ui,-apple-system,sans-serif;
     font-size:17px;line-height:1.65}
header{background:var(--accent);color:#fff;padding:14px 18px}
header a{color:#fff;text-decoration:none}
header .t{font-size:19px;font-weight:600}
header .s{opacity:.85;font-size:14px}
main{max-width:820px;margin:0 auto;padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:18px;margin:0 0 16px}
h1{font-size:24px;margin:.2em 0 .4em} h2{font-size:19px;margin:1.4em 0 .5em}
h2:first-child{margin-top:.2em}
label{display:block;margin:12px 0 4px;font-weight:600;font-size:15px}
.hint{color:var(--muted);font-size:14px;font-weight:400;margin:2px 0 6px}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff}
textarea{min-height:120px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.choice{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--line);
        border-radius:8px;margin:6px 0;background:#fff;cursor:pointer}
.choice input{margin-top:4px;width:18px;height:18px}
.choice:has(input:checked){border-color:var(--accent);background:#eef5fb}
button,.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
     padding:12px 20px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;
     text-decoration:none}
button:hover,.btn:hover{background:var(--accent-d)}
.btn.ghost{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.ref{font-family:ui-monospace,monospace;font-size:20px;font-weight:700;letter-spacing:.5px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:14px}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:13px;
      background:#eef2f6;color:var(--muted)}
.pill.ok{background:#e6f4ec;color:var(--ok)} .pill.warn{background:#fdf3e2;color:var(--warn)}
.note{background:#eef5fb;border:1px solid #cfe0f0;border-radius:10px;padding:12px 14px;
      font-size:15px}
footer{color:var(--muted);font-size:14px;text-align:center;padding:24px}