/* ================= ระบบออกแบบ (design tokens) =================
   ทุกค่าในไฟล์นี้ต้องมาจากชุดนี้ — ห้ามใส่ตัวเลข/สีลอย ๆ (แผนข้อ 12.8 หลักการที่ 7)
   - ตัวอักษร: มาตราส่วน 1.25 จาก 18px → 18 / 22 / 28 / 35 (ต่ำสุด 18px ตามแผนข้อ 5.3)
   - ระยะห่าง: ตาราง 8px → 4 / 8 / 16 / 24 / 32 / 48
   - มุมโค้ง: 3 ระดับ → 8 (ป้าย/ของเล็ก) / 12 (ปุ่ม ช่องกรอก กล่องข้อความ) / 20 (การ์ด แถว หน้าต่าง)
   - สี: ตั้งชื่อตามหน้าที่ ไม่ใช่ตามเฉดสี
   - ผัง: ทุกหน้าใช้คอลัมน์เดียวกัน (--page-w) ขอบซ้าย-ขวาตรงกันทุกแถบ (หัว ตัวอย่าง เนื้อหา แถบล่าง)
   - ความใกล้ชิด: ระยะโตตามระดับ — ในชิ้นเดียวกัน 8 < ระหว่างชิ้นในกลุ่ม 16 < ระหว่างกลุ่ม/การ์ด 32 */
:root {
  /* ตัวอักษร */
  --fs-1: 18px;   /* เนื้อหา ปุ่ม ป้าย คำอธิบาย */
  --fs-2: 22px;   /* หัวข้อการ์ด หัวข้อหน้า ปุ่มใหญ่ */
  --fs-3: 28px;   /* หัวข้อการ์ดหน้าแรก */
  --fs-4: 35px;   /* หัวข้อการ์ดหลัก ① */
  --font: "Sarabun", "Leelawadee UI", "Thonburi", "Tahoma", system-ui, sans-serif;

  /* ระยะห่าง */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --touch: 48px;  /* จุดแตะเล็กสุด */

  /* ผังหน้า */
  --page-w: 1100px;            /* ความกว้างคอลัมน์เนื้อหา */
  --gutter: var(--s-5);        /* ขอบซ้าย-ขวาของคอลัมน์ */
  --pad-card: var(--s-4);      /* ระยะในการ์ด */
  --gap-section: var(--s-4);   /* ระหว่างการ์ด — ต้องไม่น้อยกว่าระยะในการ์ด จึงอ่านออกว่าเป็นคนละกลุ่ม */
  /* แถบเต็มจอ (หัว ตัวอย่าง แถบล่าง) — เนื้อในชิดขอบเดียวกับคอลัมน์ */
  --band-x: max(var(--gutter), calc((100% - var(--page-w)) / 2 + var(--gutter)));

  /* มุมโค้ง */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 20px;

  /* สีพื้น */
  --bg: #f4f5f8;          /* พื้นหน้า */
  --surface: #fff;        /* การ์ด ปุ่ม ช่องกรอก */
  --surface-flat: #fafbfc;/* การ์ดที่แตะไม่ได้ */
  --neutral: #e9ebef;     /* แถบเทา: ตัวอย่าง แถบหน้า ราง seg ปุ่มกดไม่ได้ */
  /* ตัวอักษรและเส้น */
  --ink: #1b2430;
  --muted: #4b5563;
  --line: #dde1ea;        /* เส้นแบ่ง ขอบการ์ด */
  --line-strong: #b6c0cf; /* ขอบปุ่ม ช่องกรอก */
  /* สีหลัก */
  --accent: #1d5fd1;
  --accent-strong: #164aa6;
  --accent-soft: #eaf1fc;
  --accent-soft-2: #d6e4fb;
  --on-accent: #fff;
  --focus: #7aa7ef;
  /* ความหมาย: เรียบร้อย / ควรดู / ทำต่อไม่ได้ / คำแนะนำ */
  --ok: #17663f;          /* เขียวเข้มพอบนพื้นเขียวอ่อน (≥ 4.5:1) */
  --ok-bg: #e7f5ec;
  --ok-line: #a9d8bd;
  --warn: #7a4100;        /* ตัวอักษรเตือน (เข้มพอบนพื้นเหลือง) */
  --warn-bg: #fff3dc;
  --warn-bg-strong: #ffe2a8;
  --warn-mark: #e08a00;   /* แถบซ้าย วงกลม ! ขอบ "ต้องตรวจ" */
  --bad: #c62828;
  --bad-strong: #9b1c1c;
  --bad-bg: #fdecea;
  --bad-bg-strong: #f9c9c4;
  --info-ink: #163e8a;

  /* เงาและการเคลื่อนไหว */
  --shadow-1: 0 1px 2px rgba(20,24,32,.06), 0 2px 8px rgba(20,24,32,.08);   /* ยกขึ้น = แตะได้ */
  --shadow-2: 0 2px 4px rgba(20,24,32,.08), 0 8px 20px rgba(20,24,32,.12);  /* ชี้ */
  --shadow-3: 0 10px 40px rgba(0,0,0,.25);                                  /* หน้าต่าง */
  --shadow-primary: 0 2px 8px rgba(29,95,209,.35);
  --ring: 0 0 0 3px var(--focus);
  --fx: .15s ease-out;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: var(--fs-1)/1.5 var(--font); }
[hidden] { display: none !important; }

/* แถบบนสุด: ตรึงทุกหน้าเหมือนกัน · เลื่อนลงแล้ว "ลดรูป" (js/stickybar.js) — ลดเฉพาะข้อความ ปุ่มคงขนาดและคำเดิม
   พื้นทึบ + เงาบาง ไม่ใช้โปร่งใส (เนื้อหาข้างหลังจะทะลุมาซ้อนตัวหนังสือ อ่านยาก) */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--band-x); background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; transition: padding var(--fx), box-shadow var(--fx); }
.bar h1 { font-size: var(--fs-2); margin: 0; }
body.bar-compact:not(.doc-open) .bar { padding-block: var(--s-1); box-shadow: var(--shadow-1); }
body.bar-compact:not(.doc-open) .bar h1 { font-size: var(--fs-1); }
body.bar-compact:not(.doc-open) .bar .privacy, body.bar-compact:not(.doc-open) .bar .hide-compact { display: none; }
body.bar-compact:not(.doc-open) .steps li:not(.on) { font-size: 0; gap: 0; padding-right: var(--s-1); }
body.bar-compact:not(.doc-open) .steps li:not(.on)::before { font-size: var(--fs-1); }
/* เลื่อนไปหาช่อง/โฟกัส: ไม่ให้จมใต้แถบที่ตรึงอยู่ */
html { scroll-padding-top: calc(var(--bar-h, 64px) + var(--mini-h, 0px) + var(--s-3)); }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.privacy { color: var(--ok); }

.muted { color: var(--muted); }
.status-none { color: var(--muted); }

/* ---------- ข้อความแจ้ง: พื้นสี + แถบซ้าย + ไอคอน — เห็นได้ทันทีโดยไม่ต้องอ่าน ----------
   ok = เรียบร้อย · warn = ควรดู · bad/error = ทำต่อไม่ได้จนกว่าจะแก้ · note = คำแนะนำ */
.status-ok, .status-warn, .status-bad, .error, .note, .warn-line {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-2); border-left: 6px solid; font-weight: 600; line-height: 1.45;
}
.status-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.status-warn, .warn-line { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-mark); }
.status-bad, .error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
/* กล่องข้อความหลายกล่องต่อกัน = กลุ่มเดียวกัน เว้น 8 */
:is(.status-ok, .status-warn, .status-bad, .error, .note, .status-none) + :is(.status-ok, .status-warn, .status-bad, .error, .note, .status-none, .check-row) { margin-top: var(--s-2); }
.note { background: var(--accent-soft); color: var(--info-ink); border-color: var(--accent); font-weight: 400; }
/* ไอคอนวงกลม ! / i — ใช้ร่วมกันทุกกล่องข้อความ */
.status-warn::before, .warn-line::before, .status-bad::before, .error::before, .note::before,
.unsaved-banner > span::before, .doc-banner::before {
  content: "!"; flex: none; display: inline-grid; place-items: center; width: var(--s-4); height: var(--s-4); margin-top: 2px;
  border-radius: 50%; color: var(--on-accent); font-size: var(--fs-1); font-weight: 800; line-height: 1;
}
.status-warn::before, .warn-line::before, .unsaved-banner > span::before, .doc-banner::before { background: var(--warn-mark); }
.status-bad::before, .error::before { background: var(--bad); }
.note::before { content: "i"; background: var(--accent); font-family: Georgia, serif; }

/* ปุ่ม 3 ระดับ: primary = ทำสิ่งนี้ (สีเต็ม) · outline/ปกติ = ทางเลือกอื่น (ขอบชัด) · ghost = ไปหน้าอื่น/เครื่องมือเล็ก (พื้นฟ้าอ่อน)
   ทุกปุ่มต้องดูออกว่าเป็นปุ่ม — ไม่มีปุ่มที่เป็นแค่ตัวหนังสือ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--touch); padding: 0 var(--s-4); border: 2px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
/* กดไม่ได้ = สีเทาทึบ (ไม่ใช่แค่จาง) + มีข้อความบอกเหตุผลใกล้ ๆ เสมอ · ตัวอักษรเทาเข้มพอให้ยังอ่านออก */
.btn:disabled { background: var(--neutral); border-color: var(--line-strong); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn.primary:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-primary); }
.btn.outline:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn.ghost:not(:disabled) { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); }
.btn.danger:not(:disabled) { color: var(--bad); }
.btn.ghost.danger:not(:disabled) { background: var(--bad-bg); }
.btn.small { padding: 0 var(--s-3); }
.btn.big { min-height: calc(var(--touch) + var(--s-2)); padding: 0 var(--s-5); font-size: var(--fs-2); }
.btn.wide { width: 100%; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--pad-card); }
/* หัวการ์ด = ป้ายบอกว่าส่วนนี้คืออะไร (แตะไม่ได้) → ตัวเล็ก + แคปซูลตัวเลขแบบเดียวกับหน้าแรก ไม่กินที่ */
.card h2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-1); margin: 0 0 var(--s-3); }
.card h2 .muted { font-weight: 400; }
/* แคปซูลตัวเลขลำดับ — ใช้ร่วมกันทั้งหัวการ์ดและการ์ดหน้าแรก */
.num { display: inline-grid; place-items: center; flex: none; min-width: var(--s-5); height: var(--s-5); padding: 0 var(--s-2); border-radius: var(--r-3); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-1); font-weight: 700; }

.field { display: block; margin: var(--s-3) 0; font-weight: 600; color: var(--ink); }
.field .muted { font-weight: 400; }
.field input, .field textarea, select { display: block; width: 100%; margin-top: var(--s-1); min-height: var(--touch); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); }
.field textarea { resize: vertical; min-height: calc(var(--touch) + var(--s-3)); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* ปุ่มเลือกแบบแบ่งช่อง (3 ขนาด ฯลฯ) — เห็นชัดว่าเลือกอะไร แตะเดียวจบ */
.seg { display: inline-flex; padding: var(--s-1); border-radius: var(--r-2); background: var(--neutral); gap: var(--s-1); flex-wrap: wrap; }
.seg button { min-height: var(--touch); min-width: 88px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-1); background: transparent; font: inherit; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-1); font-weight: 600; color: var(--ink); }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-3) 0; flex-wrap: wrap; }

dialog { border: 0; border-radius: var(--r-3); padding: var(--s-4); width: min(440px, calc(100% - var(--s-5))); box-shadow: var(--shadow-3); }
dialog::backdrop { background: rgba(20,24,35,.45); }
dialog h3 { margin: 0 0 var(--s-2); font-size: var(--fs-2); }
dialog input[type=password] { width: 100%; min-height: var(--touch); padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-2); font: inherit; margin: var(--s-2) 0; }
dialog input[type=password]:focus, .field input:focus, .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3); }

/* ---------- หน้าแรก: 3 การ์ด ---------- */
.home { max-width: var(--page-w); margin: 0 auto; padding: var(--s-5) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-section); }
.home-card { display: flex; flex-direction: column; gap: var(--s-2); min-height: 180px; padding: var(--pad-card); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); color: inherit; text-decoration: none; }
.home-card h2 { margin: 0; font-size: var(--fs-3); display: flex; align-items: center; gap: var(--s-2); }
/* "ไปต่อ →" ของแต่ละการ์ดทำเป็นปุ่ม (ทั้งการ์ดก็แตะได้) */
.home-card .go { margin-top: auto; align-self: flex-start; padding: var(--s-2) var(--s-4); border: 2px solid var(--accent); border-radius: var(--r-2); color: var(--accent); font-weight: 700; }
.home-card .sign-status { font-size: var(--fs-2); font-weight: 600; }
.home-card.main { grid-column: 1 / -1; min-height: 200px; }
.home-card.main h2 { font-size: var(--fs-4); }
.home-card.main.ready { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.home-card.main .go { background: var(--accent); color: var(--on-accent); font-size: var(--fs-2); }
.home-card.main.ready .go { background: var(--surface); border-color: var(--surface); color: var(--accent); }
.home-card.main.ready .sign-status { color: var(--on-accent); }
.home-card.main.ready .num { background: rgba(255,255,255,.2); color: var(--on-accent); }
.home-card.todo { border: 2px solid var(--accent); }
.home-card.off { opacity: .7; }
.sig-thumbs { display: flex; gap: var(--s-3); align-items: center; }
.sig-thumbs img { height: var(--s-6); max-width: 45%; object-fit: contain; }
.home-foot { grid-column: 1 / -1; text-align: center; }

/* ---------- หน้าจัดการลายเซ็น ---------- */
.profile-pick { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.profile-pick select { width: auto; min-width: 200px; margin: 0; }

/* ตัวอย่างเต็ม: อยู่ต่อจากลายมือชื่อ ในคอลัมน์เดียวกับการ์ด */
.preview { padding: var(--s-3) var(--pad-card) var(--pad-card); background: var(--neutral); border-radius: var(--r-3); }
/* ตัวอย่างลดรูป: เลื่อนผ่านตัวอย่างเต็มแล้ว ตรึงใต้แถบบน เหลือเฉพาะกรอบลายเซ็นขนาดจริง (js/settings.js) */
/* แถบลดรูป = "ส่วนล่างของตัวอย่างเต็ม" ขนาดและตำแหน่งเท่ากันทุกจุด (ขอบคอลัมน์ ระยะใน ช่องไฟ ระยะรอบลายเซ็น)
   สลับตอนกรอบลายเซ็นของตัวอย่างเต็มเลื่อนมาถึงตำแหน่งเดียวกับในแถบพอดี → ดูเหมือนกรอบลายเซ็นหยุดติดอยู่ ไม่กระโดด */
.preview-mini { position: fixed; left: var(--band-x); right: var(--band-x); top: var(--bar-h, 64px); z-index: 15; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: 0 var(--pad-card) var(--pad-card); background: var(--neutral); border-radius: 0 0 var(--r-3) var(--r-3); box-shadow: var(--shadow-1); visibility: hidden; }
body.mini-on .preview-mini { visibility: visible; }
.mini-sig { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; /* ชิดล่างเหมือนในกระดาษ */ padding: var(--s-2) var(--s-4) var(--s-4); background: var(--surface); border-radius: 0 0 2px 2px; overflow: hidden; }
/* แถบลดรูปโผล่ = ตัวอย่างเต็มข้างหลังหายทันที (ไม่ซ้อนสองชุด) · ยังกินที่เท่าเดิม เนื้อหาจึงไม่กระตุก */
body.mini-on .preview { visibility: hidden; }
.mini-sig > div { min-width: 0; }
.mini-sig canvas { display: block; max-width: 100%; height: auto !important; }
.preview-head { margin-bottom: var(--s-2); }
.preview-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); } /* หัวข้อ + คำอธิบายบรรทัดเดียว */
.preview-title { font-weight: 600; color: var(--muted); }
.preview-pages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
/* กระดาษตัวอย่าง: มุมเกือบเหลี่ยมเหมือนกระดาษจริง (ข้อยกเว้นของมาตราส่วนมุมโค้ง) */
.paper { position: relative; display: flex; flex-direction: column; height: 260px; padding: var(--s-4); background: var(--surface); border-radius: 2px; box-shadow: var(--shadow-1); overflow: hidden; }
/* แคปซูลภาษา "ไทย" / "EN" — ชุดเดียวทั้งแอป: lang-pill อยู่ในแถว · lang-tag ลอยมุมขวาบนของภาพ */
.lang-pill, .lang-tag { display: inline-block; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r-1); background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; white-space: nowrap; }
/* จุดที่ไม่อยู่ในภาพ (หน้าอื่น) — ขอบประ พื้นขาว */
.lang-pill.other { background: var(--surface); border-color: var(--accent); border-style: dashed; }
.thumb-tags { position: absolute; top: var(--s-2); right: var(--s-2); left: var(--s-2); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); pointer-events: none; }
.lang-tag { position: absolute; top: var(--s-2); right: var(--s-2); }
.field .lang-pill { margin-right: var(--s-1); }
/* ช่องแรกของแต่ละคอลัมน์ชิดหัวการ์ด (ไม่มีแถว "ไทย / English" แยกแล้ว) */
.two-col > div > .field:first-child { margin-top: 0; }
/* ตัวอักษรเอกสารตัวอย่างขนาดจริง 16pt / 12pt ให้เทียบกับลายเซ็น (ข้อยกเว้นของมาตราส่วนตัวอักษร — จำลองกระดาษจริง) */
.doc-text { margin: 0; padding-right: var(--s-6); font-size: 16pt; line-height: 1.6; text-indent: var(--s-6); }
.doc-text.en { font-family: Georgia, "Times New Roman", serif; font-size: 12pt; }
.paper-sig { margin-top: auto; align-self: flex-end; max-width: 100%; }
.paper-sig canvas { display: block; max-width: 100%; height: auto !important; }

.settings-main { max-width: var(--page-w); margin: 0 auto; padding: var(--s-4) var(--gutter) var(--s-6); display: flex; flex-direction: column; gap: var(--gap-section); }
details.card summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: var(--touch); }
details.card summary::-webkit-details-marker { display: none; }
details.card summary h2 { margin: 0; }
details.card summary h2::after { content: " ▸"; color: var(--muted); }
details.card[open] summary h2::after { content: " ▾"; }

.pad-box { position: relative; border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-2) var(--s-3); }
.pad-box.done { border-color: var(--ok); }
.pad-head { display: flex; align-items: center; justify-content: space-between; }
.pad-tools { display: flex; gap: var(--s-1); }
.pad { display: block; width: 100%; height: 170px; margin-top: var(--s-2); border-radius: var(--r-1); background: var(--surface-flat) repeating-linear-gradient(transparent 0 129px, var(--line-strong) 129px 130px, transparent 130px 170px); touch-action: none; cursor: crosshair; }
.pad-box.done .pad-hint { visibility: hidden; }
.pad-hint { position: absolute; left: 0; right: 0; bottom: var(--s-3); text-align: center; pointer-events: none; }
.save-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; }
/* ช่องที่ยังขาด (แสดงหลังกดบันทึก) */
.need { outline: 3px solid var(--bad); outline-offset: 2px; }

/* ---------- หน้าลงนาม (การ์ด ①) ---------- */
/* แถบขั้นตอน ①–③ */
.steps { display: flex; gap: var(--s-2); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border-radius: var(--r-3); color: var(--muted); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--neutral); font-size: var(--fs-1); font-weight: 700; }
.steps li.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.steps li.on::before { background: var(--accent); color: var(--on-accent); }
.signer-pick { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.signer-pick select { width: auto; margin: 0; min-height: var(--touch); }
.signer-name { color: var(--muted); }
.link { color: var(--accent); cursor: pointer; text-decoration: underline; display: inline-block; }

.view { max-width: var(--page-w); margin: 0 auto; padding: var(--s-5) var(--gutter) 120px; }
.row-btns { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.list-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.list-head h2 { margin: 0; font-size: var(--fs-2); flex: 1; min-width: 200px; }
.warn-line { margin: 0 0 var(--s-3); }
.unsaved-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); border-left: 6px solid var(--warn-mark); background: var(--warn-bg); color: var(--warn); font-weight: 600; flex-wrap: wrap; }
.unsaved-banner > span { display: flex; align-items: flex-start; gap: var(--s-2); }

/* สถานะใช้คำเสมอ สีความหมายเดียวทั้งแอป (แผนข้อ 5.3) */
.badge { display: inline-block; padding: 2px var(--s-2); border-radius: var(--r-1); font-weight: 700; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge.warn { background: var(--warn-bg-strong); color: var(--warn); }
.badge.bad { background: var(--bad-bg-strong); color: var(--bad-strong); }
.badge.grey { background: var(--neutral); color: var(--muted); }

.folder-list, .file-list, .run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.folder-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.folder-name { font-size: var(--fs-2); font-weight: 600; }

/* รายการไฟล์: การ์ด 2 คอลัมน์ ภาพย่อใหญ่ใกล้ขนาดจริง (อ่านข้อความใต้ลายเซ็นออก) · iPad แนวตั้งเหลือคอลัมน์เดียว */
.file-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.file-row { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.file-row.st-review { border: 2px solid var(--warn-mark); }
.file-row.st-done { border-color: var(--ok-line); }
.file-row .thumb { position: relative; display: grid; place-items: center; aspect-ratio: 480 / 220; border: 1px solid var(--line); border-radius: var(--r-1); overflow: hidden; background: var(--neutral); }
.file-row .thumb canvas { width: 100%; height: 100%; display: block; }
.file-main { flex: 1; }
.file-title { font-weight: 600; overflow-wrap: anywhere; }
.file-status { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-1) 0; }
.reason { font-weight: 600; }
.reason.warn { color: var(--warn); }
.reason.bad { color: var(--bad); }
.file-ctl { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.file-ctl .seg button { min-width: 88px; }
.file-ctl .seg button:disabled { opacity: .45; cursor: default; }
.file-ctl .seg button[aria-pressed="true"]:first-child { background: var(--accent); color: var(--on-accent); }
.file-ctl .seg button[aria-pressed="true"]:last-child { background: var(--muted); color: var(--on-accent); }

/* ปุ่มหลักมุมล่างขวา ตำแหน่งเดิมทุกหน้า */
.list-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); padding: var(--s-3) var(--band-x); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); flex-wrap: wrap; }
.foot-main { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.foot-main .muted { text-align: right; }

/* เปิดดูไฟล์ */
body.doc-open { overflow: hidden; }
/* หน้าดูเอกสารเป็นพื้นที่ทำงานเต็มจอ — แถบหัวชิดขอบเดียวกับแถบเอกสาร (ไม่ใช่คอลัมน์กลาง) */
body.doc-open .bar { padding-inline: var(--s-3); }
.doc-view { max-width: none; padding: 0; height: calc(100vh - 69px); display: flex; flex-direction: column; }
.doc-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.doc-banner { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-left: 6px solid var(--warn-mark); background: var(--warn-bg); color: var(--warn); font-weight: 600; }
/* วิธีจัดกรอบที่วางแล้ว (แสดงแทนแถบเตือนเมื่อไม่มีปัญหา) */
.doc-banner.tip { border-left-color: var(--accent); background: var(--accent-soft); color: var(--info-ink); font-weight: 400; }
.doc-banner.tip::before { content: "i"; background: var(--accent); font-family: Georgia, serif; }
.place-hint { padding: var(--s-2) var(--s-3); background: var(--accent); color: var(--on-accent); font-weight: 700; text-align: center; font-size: var(--fs-2); }
.doc-body { flex: 1; display: flex; min-height: 0; }
.page-strip { flex: none; width: calc(var(--touch) + 2 * var(--s-2) + 1px); overflow-x: hidden; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-2); overflow-y: auto; background: var(--neutral); border-right: 1px solid var(--line); }
.strip-page { position: relative; flex: none; width: var(--touch); min-height: var(--touch); border: 1px solid var(--line-strong); border-radius: var(--r-1); background: var(--surface); font: inherit; cursor: pointer; }
.strip-page.has::after { content: ""; position: absolute; right: var(--s-1); bottom: var(--s-1); width: 10px; height: 10px; background: var(--accent); }
.strip-page.maybe { border: 2px dashed var(--warn-mark); }
.pages { flex: 1; overflow: auto; padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.pages.placing .page { cursor: crosshair; }
.empty { margin: auto; text-align: center; color: var(--muted); font-size: var(--fs-2); }
.doc-actions { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--surface); border-top: 1px solid var(--line); flex-wrap: wrap; }
.doc-actions .spacer { flex: 1; }
.doc-why { color: var(--muted); }
#docPlace.active { border: 2px solid var(--accent); background: var(--accent-soft); }

.page { position: relative; background: var(--surface); box-shadow: var(--shadow-1); flex: none; }
.page canvas { display: block; width: 100%; height: 100%; }
.page-no { position: absolute; left: 0; top: calc(-1 * var(--s-5)); color: var(--muted); }

/* กรอบลายเซ็น: ทึบ = วางแล้ว (ลากย้าย/ลากมุมปรับขนาด) · เส้นประจาง = "อาจเป็นจุดเซ็น" */
.sig-frame { position: absolute; outline: 2px solid var(--accent); outline-offset: 1px; background: rgba(29,95,209,.05); touch-action: none; cursor: move; }
.sig-frame.small { outline-color: var(--warn-mark); }
.sig-frame img { width: 100%; height: 100%; display: block; pointer-events: none; }
/* จุดจับบนกรอบ: วงกลมเห็น 34px แต่พื้นที่แตะจริง 50px (::after ขยายออกรอบ ๆ) — นิ้วบน iPad แตะโดนง่าย */
.sig-frame .resize { position: absolute; right: -17px; bottom: -17px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-2); cursor: nwse-resize; touch-action: none; }
.sig-frame .remove { position: absolute; right: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface); background: var(--bad); color: var(--on-accent); font-size: var(--fs-1); font-weight: 800; line-height: 1; box-shadow: var(--shadow-2); cursor: pointer; }
.sig-frame .resize::after, .sig-frame .remove::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.sig-frame .lang { position: absolute; left: -2px; top: calc(-1 * var(--s-6)); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-1); border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-weight: 700; cursor: pointer; }
.sig-frame .lang::after { content: ""; position: absolute; inset: calc(-1 * var(--s-1)); }
.sig-frame.maybe { outline: 2px dashed var(--warn-mark); background: rgba(224,138,0,.08); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); min-width: 150px; }
.maybe-label { color: var(--warn); font-weight: 600; text-align: center; }
.not-spot { padding: 0 var(--s-3); border: 1px solid var(--warn-mark); border-radius: var(--r-1); background: var(--surface); color: var(--warn); font: inherit; font-weight: 600; cursor: pointer; min-height: var(--touch); }

/* แผ่นยืนยันเลื่อนขึ้นจากด้านล่าง */
dialog.sheet { margin: auto auto 0; width: min(640px, 100%); max-height: 90vh; border-radius: var(--r-3) var(--r-3) 0 0; padding: var(--s-4) var(--s-4) var(--s-5); }
dialog.sheet[open] { animation: sheet-up .22s ease-out; }
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-thumbs { display: flex; gap: var(--s-3); margin: var(--s-3) 0; }
.sheet-thumbs img { height: var(--s-6); max-width: 45%; object-fit: contain; }
.sheet-key, .sheet-bio { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-2) 0; }
.sheet-bio p { margin: 0; font-weight: 600; }
.sheet-clock { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0; }
.sheet-clock p { margin: 0; }
#acceptSheet { width: min(var(--page-w), 100%); }
.accept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: var(--s-3); max-height: 50vh; overflow-y: auto; margin: var(--s-3) 0; }
.accept-grid figure { position: relative; margin: 0; }
.accept-grid canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-1); display: block; }
.accept-grid figcaption { margin-top: var(--s-1); overflow-wrap: anywhere; }

/* ความคืบหน้า + ผลลัพธ์ */
.run-card { max-width: 760px; margin: 0 auto; }
.progress { height: 12px; border-radius: var(--r-1); background: var(--neutral); overflow: hidden; margin: var(--s-3) 0; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.run-list { gap: var(--s-2); margin: var(--s-3) 0; }
.run-list li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; overflow-wrap: anywhere; }
.run-list li::before { width: var(--s-4); flex: none; font-weight: 700; }
.run-list li.wait::before { content: "○"; color: var(--muted); }
.run-list li.now::before { content: "…"; color: var(--accent); }
.run-list li.ok::before { content: "✓"; color: var(--ok); }
.run-list li.fail::before { content: "✕"; color: var(--bad); }
.run-list li.fail { color: var(--bad); }
.run-list li.skip::before { content: "—"; color: var(--muted); }
.run-list li.head { margin-top: var(--s-2); font-weight: 600; }
.run-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }

/* ประวัติ */
.history-table { width: 100%; border-collapse: collapse; }
.history-table th, .history-table td { padding: var(--s-2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.history-table th { color: var(--muted); font-weight: 600; }
.check-row { display: flex; align-items: center; gap: var(--s-2); min-height: var(--touch); }
.check-row input { width: var(--s-4); height: var(--s-4); }

/* ================= เอฟเฟกต์การตอบสนอง — ชุดเดียวทั้งแอป =================
   กติกา: ทุกอย่างที่แตะได้ต้องตอบสนองเหมือนกัน
   1) พัก   — การ์ด/แถวที่แตะได้ "ยกขึ้น" (มีเงา) · การ์ดที่แตะไม่ได้แบนราบ
   2) ชี้    — (เฉพาะเมาส์) ขอบฟ้า + ยกสูงขึ้นอีกนิด
   3) กด    — ยุบลงเล็กน้อย (สำคัญที่สุดบน iPad เพราะไม่มี "ชี้")
   4) โฟกัส — วงแหวนฟ้าเมื่อใช้คีย์บอร์ด
   5) เปลี่ยนสถานะ — นุ่มนวล 0.15 วินาที */

/* สิ่งที่แตะได้ทั้งหมด */
.btn, .seg button, a.home-card, .folder-row, .strip-page, details.card summary,
.sig-frame .remove, .sig-frame .lang, .not-spot, .link, .home-card .go {
  transition: background-color var(--fx), border-color var(--fx), color var(--fx), box-shadow var(--fx), transform var(--fx);
  -webkit-tap-highlight-color: transparent;
}

/* 1) พัก: แตะได้ = มีเงา · แตะไม่ได้ = แบน */
a.home-card, .folder-row { box-shadow: var(--shadow-1); }
div.home-card { box-shadow: none; background: var(--surface-flat); }

/* 2) ชี้ (เมาส์เท่านั้น — iPad ไม่ค้างสถานะ hover) */
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
  .btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn.ghost:hover:not(:disabled) { background: var(--accent-soft-2); }
  .seg button:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(255,255,255,.7); color: var(--ink); }
  a.home-card:hover, .folder-row:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
  a.home-card:hover .go { background: var(--accent-soft); }
  a.home-card.main:hover .go { background: var(--accent-strong); }
  a.home-card.main.ready:hover .go { background: var(--accent-soft); }
  .strip-page:hover { border-color: var(--accent); background: var(--accent-soft); }
  details.card summary:hover h2 { color: var(--accent); }
  .sig-frame .lang:hover { background: var(--accent-soft-2); }
  .sig-frame .remove:hover { background: var(--bad-strong); }
  .not-spot:hover { background: var(--warn-bg); }
}

/* 3) กด: ยุบลง — ปุ่มเล็กลงนิด การ์ด/แถวกลับลงราบ */
.btn:active:not(:disabled), .seg button:active:not(:disabled), .strip-page:active,
.sig-frame .lang:active, .not-spot:active { transform: scale(.96); }
.btn.primary:active:not(:disabled) { box-shadow: none; }
a.home-card:active, .folder-row:active { transform: scale(.99); box-shadow: none; border-color: var(--accent); }
.sig-frame .remove:active { transform: scale(.88); }

/* 4) โฟกัสด้วยคีย์บอร์ด — วงแหวนเดียวกันทุกที่ */
.btn:focus-visible, .seg button:focus-visible, a.home-card:focus-visible, .folder-row:focus-visible,
.strip-page:focus-visible, details.card summary:focus-visible, .sig-frame .lang:focus-visible,
.sig-frame .remove:focus-visible, .not-spot:focus-visible, .link:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* ปิดการเคลื่อนไหวสำหรับผู้ที่ตั้งเครื่องให้ลดภาพเคลื่อนไหว (สีและขอบยังเปลี่ยนตามปกติ) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  a.home-card:hover, .folder-row:hover, a.home-card:active, .folder-row:active,
  .btn:active, .seg button:active, .strip-page:active, .sig-frame .remove:active,
  .sig-frame .lang:active, .not-spot:active { transform: none !important; }
}

/* ================= จอแคบ / จอเตี้ย ================= */
/* iPad แนวตั้ง / จอแคบ */
@media (max-width: 900px) {
  :root { --gutter: var(--s-3); }
  .file-list { grid-template-columns: minmax(0, 1fr); }
  .steps li:not(.on) { font-size: 0; gap: 0; padding-right: var(--s-1); }
  .steps li:not(.on)::before { font-size: var(--fs-1); }
  .view { padding-bottom: 140px; }
  .doc-view { padding: 0; }
  .home { grid-template-columns: 1fr; padding-top: var(--s-4); }
  .preview-pages { gap: var(--s-2); }
  .paper { height: 220px; padding: var(--s-3); }
  .preview-mini { gap: var(--s-2); }
  .mini-sig { padding: var(--s-2) var(--s-3) var(--s-3); }
  .settings-main { padding-top: var(--s-4); }
}
/* จอเตี้ยมาก: ไม่ตรึงตัวอย่างลดรูป ไม่ให้บังช่องกรอก (เหลือตรึงแค่แถบบน) */
@media (max-height: 700px) {
  .preview-mini { display: none; }
}
@media (max-width: 640px) {
  .two-col, .preview-pages { grid-template-columns: 1fr; }
  .preview-mini { display: none; }
  .page-strip { display: none; }
}