/* หน้าชั่วคราวของขั้น 2 (ล็อกอิน · ยินยอม) · ฟอนต์ของระบบเครื่อง — ฟอนต์สมุดจริงมาในขั้น 3 */
:root { --ink: #1d2127; --muted: #5e656f; --bg: #f3f1ec; --card: #fff; --accent: #1e4d7b; --bad: #b3261e; --note: #fff4c2; --btn-ink: #fff; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8eaed; --muted: #9aa1ab; --bg: #111316; --card: #1d2026; --accent: #8fb6e3; --bad: #ff8a80; --note: #3b3214; --btn-ink: #10233a; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", sans-serif; }
.card { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 22px; margin: 8px 0 16px; }
.muted { color: var(--muted); font-size: 14px; }
.error { color: var(--bad); font-weight: 600; }
.draft { background: var(--note); padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.policy { background: var(--card); padding: 12px 16px; border-radius: 12px; max-height: 50vh; overflow: auto; }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0; }
.check input { width: 22px; height: 22px; margin-top: 2px; }
.btn { display: inline-block; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 10px; background: var(--accent);
  color: var(--btn-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
/* หน้าจ่ายเงิน / วิธีใช้ (TASK-006) */
h2 { font-size: 18px; margin: 4px 0 8px; }
.good { color: #1b7f3b; font-weight: 600; }
.notice { background: var(--card); border: 1.5px solid var(--accent); border-radius: 12px; padding: 8px 16px; margin: 12px 0; }
.notice ul { padding-left: 18px; margin: 4px 0; }
.notice li { margin: 4px 0; }
.plan { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-radius: 12px; padding: 10px 12px; margin: 8px 0; cursor: pointer; }
.plan input { width: 22px; height: 22px; margin-top: 3px; }
.links { margin-top: 24px; }
.links a, .howto a { color: var(--accent); }
table.history { width: 100%; border-collapse: collapse; font-size: 14px; }
table.history th, table.history td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--muted); vertical-align: top; }
.howto h2 { margin-top: 20px; }
/* /howto/ รุ่นฟรี (TASK-022): เลขหัวข้อให้ CSS นับเอง · หัวข้อที่ซ่อนตามสวิตช์ไม่อยู่ในหน้า จึงไม่ถูกนับ */
.howto-num { counter-reset: howto-h2; }
.howto-num h2 { counter-increment: howto-h2; }
.howto-num h2::before { content: counter(howto-h2) ". "; }
/* TASK-023 B2: ชื่อปุ่ม/หน้า (ตัวหนา) ไม่ตัดกลางคำ ขึ้นบรรทัดใหม่ทั้งก้อน · ก้อนที่ยาวกว่าบรรทัดเอง (เช่นอีเมล) ตัดในก้อนได้ */
.howto-num strong { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { .good { color: #6fd38f; } }

/* นโยบาย · ข้อมูลของฉัน · ลบบัญชี (TASK-007) */
.policy h2 { font-size: 17px; margin: 20px 0 6px; }
.policy table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.policy th, .policy td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--muted); vertical-align: top; }
.policy-meta, .howto-lead { color: var(--muted); }
textarea.data { width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; background: var(--card); color: var(--ink);
  border: 1px solid var(--muted); border-radius: 8px; padding: 8px; }
.btn.danger { background: var(--bad); }
input.confirm { font-size: 18px; padding: 8px; width: 8em; border: 1.5px solid var(--muted); border-radius: 8px;
  background: var(--card); color: var(--ink); }

/* ช่วยค่าเซิร์ฟเวอร์ (TASK-011) · QR ดำบนขาวเสมอ (สีอยู่ใน SVG) · กว้างอย่างน้อย 240px บนมือถือ */
/* TASK-015: หัวเล็กสีส้ม · ประโยคนำตัวหนาสีน้ำเงิน · คำขอบคุณกลางหน้าตัวหนา */
.support .kicker { color: #e8692b; font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.support .kicker + h1 { margin-top: 2px; }
.support .lead { color: var(--accent); font-weight: 700; }
.support .thanks { text-align: center; font-weight: 700; margin: 20px 0; }
.support .qr { width: min(100%, 320px); min-width: 240px; margin: 16px auto 8px; background: #fff; border-radius: 8px; }
.support .qr svg { display: block; width: 100%; height: auto; }
.support .qr-name { text-align: center; margin-top: 0; }
.support a { color: var(--accent); }
/* TASK-016: ท่อนข้อความ (span.nw) เป็นก้อนเดียว ไม่ตัดกลางท่อน (ผลเท่า white-space:nowrap เมื่อท่อนพอดีบรรทัด)
 * ขึ้นบรรทัดใหม่ได้แค่ที่เว้นวรรคหรือ <wbr> ระหว่างท่อน · ท่อนที่ยาวกว่าบรรทัดเอง (ไม่ควรมีบนจอ 320) ตัดในท่อนได้ ไม่ล้นจอ */
.support .nw { display: inline-block; max-width: 100%; white-space: normal; }