:root { --ink:#14202e; --muted:#5b6b7d; --line:#d8e0e8; --bg:#f4f7fa; --brand:#1e4f8f; --danger:#b3261e; --ok:#0f7b3f; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif; background:var(--bg); color:var(--ink); }
.wrap { max-width: 560px; margin:0 auto; padding:16px; }
h1 { font-size:1.25rem; margin:0 0 4px; }
.sub { color:var(--muted); font-size:.9rem; margin:0 0 16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; }
label { display:block; font-weight:600; margin:12px 0 4px; }
input[type=text], input[type=tel], input[type=email], select {
  width:100%; padding:12px; font-size:1rem; border:1px solid var(--line); border-radius:8px; background:#fff; }
button { width:100%; padding:14px; font-size:1.05rem; font-weight:700; border:0; border-radius:10px;
  background:var(--brand); color:#fff; cursor:pointer; }
button[disabled] { opacity:.5; cursor:not-allowed; }
button.ghost { background:#fff; color:var(--brand); border:1px solid var(--brand); }
.radio-row { display:flex; gap:8px; }
.radio-row label { flex:1; margin:0; padding:12px; text-align:center; border:1px solid var(--line);
  border-radius:8px; background:#fff; font-weight:600; cursor:pointer; }
.radio-row input { display:none; }
.radio-row input:checked + span { color:var(--brand); }
.radio-row label:has(input:checked) { border-color:var(--brand); background:#eaf2fd; }
.hint { color:var(--muted); font-size:.85rem; margin-top:4px; }
.msg { padding:12px; border-radius:8px; margin:12px 0; display:none; }
.msg.error { display:block; background:#fdecea; color:var(--danger); border:1px solid #f3c2bd; }
.msg.info  { display:block; background:#eaf2fd; color:var(--brand); border:1px solid #c3d9f5; }
.slot-list { max-height:260px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.slot { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.slot:last-child { border-bottom:0; }
.slot[aria-selected=true] { background:#eaf2fd; }
.slot.taken { color:#9aa7b4; cursor:not-allowed; }
.slot .seat { float:right; font-variant-numeric:tabular-nums; }
.big { text-align:center; }
.big .num { font-size:3.6rem; font-weight:800; letter-spacing:2px; line-height:1.1; color:var(--brand); }
.big .lbl { color:var(--muted); font-size:.9rem; }
.pair { display:flex; gap:12px; }
.pair > div { flex:1; text-align:center; border:1px solid var(--line); border-radius:10px; padding:12px; background:#fff; }
.pair .v { font-size:1.8rem; font-weight:800; }
.countdown { font-variant-numeric:tabular-nums; font-weight:700; }