/* ============================================================
   สัญญาร่วมลงทุน — สไตล์
   แนวคิด: หน้าจอคือ "แผ่นสัญญา" จริง ๆ วางอยู่บนโต๊ะสีเข้ม
   ผู้ใช้กรอกลงในตัวเอกสาร ไม่ใช่ฟอร์มแยก
   ============================================================ */

:root {
  --stage:      #191C22;
  --stage-2:    #22262F;
  --stage-line: #333945;
  --paper:      #FFFDF9;
  --paper-2:    #F4F0E7;
  --rule:       #D8D2C4;
  --ink:        #191C22;
  --ink-2:      #4A505C;
  --ink-3:      #7C8494;
  --seal:       #8C1D18;
  --seal-2:     #B0433C;
  --ok:         #1F6B4B;
  --radius:     3px;
  --sheet-w:    680px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  font-family: "Sarabun", -apple-system, "Segoe UI", sans-serif;
  background: var(--stage);
  color: #E6E8EC;
  font-size: 16px;
  line-height: 1.7;
  padding-bottom: 108px;
}

/* ---------- แถบบน ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(25, 28, 34, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stage-line);
}
.topbar-in {
  max-width: var(--sheet-w); margin: 0 auto;
  padding: 12px 16px 10px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--seal-2);
}
.brand-t {
  font-family: "Noto Serif Thai", serif;
  font-size: 15px; font-weight: 600; color: #F2F0EA;
}

/* ราง 4 ขั้น */
.rail { display: flex; gap: 4px; margin-top: 10px; }
.rail-step { flex: 1; min-width: 0; }
.rail-bar { height: 3px; background: var(--stage-line); border-radius: 2px; }
.rail-step.done .rail-bar { background: var(--seal); }
.rail-step.now  .rail-bar { background: var(--seal-2); }
.rail-lb {
  font-size: 11px; color: var(--ink-3); margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-step.now .rail-lb { color: #E6E8EC; font-weight: 600; }

/* ---------- โครง ---------- */
.wrap { max-width: var(--sheet-w); margin: 0 auto; padding: 18px 12px 0; }
.step { display: none; animation: rise .28s ease both; }
.step.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.intro {
  padding: 4px 6px 18px;
}
.intro h1 {
  font-family: "Noto Serif Thai", serif;
  font-size: 26px; line-height: 1.4; font-weight: 600; color: #F5F3EE;
}
.intro p { color: var(--ink-3); font-size: 15px; margin-top: 8px; }

/* ---------- แผ่นกระดาษ ---------- */
.paper {
  background: var(--paper);
  color: var(--ink);
  padding: 46px 44px 40px;
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px rgba(0,0,0,.45);
  position: relative;
}
.paper::before {   /* แถบตราประทับด้านซ้าย */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--seal); border-radius: var(--radius) 0 0 var(--radius);
}
@media (max-width: 560px) { .paper { padding: 30px 20px 28px; } }

.paper .blk { margin-bottom: 20px; }
.paper .blk:last-child { margin-bottom: 0; }

.doc-title {
  font-family: "Noto Serif Thai", serif;
  font-size: 27px; font-weight: 700; text-align: center; letter-spacing: .01em;
}
.doc-sub  { text-align: center; font-size: 18px; margin-top: 6px; }
.doc-date { text-align: center; font-size: 15px; color: var(--ink-2); margin-top: 4px; }

.party-h {
  font-weight: 600; margin-top: 6px;
  font-size: 15px; letter-spacing: .01em;
}
.party-b { font-size: 15px; margin-top: 2px; }
.party-n { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.lead    { font-size: 15px; text-indent: 1.5em; }

.paper h2 {
  font-family: "Noto Serif Thai", serif;
  font-size: 17px; font-weight: 700; margin-bottom: 4px;
  padding-bottom: 3px; border-bottom: 1px solid var(--rule);
}
.paper .n { font-size: 15px; margin-top: 5px; }
.paper .bul { margin: 5px 0 0 1.5em; font-size: 15px; }
.paper .bul li { margin-top: 2px; }

/* ช่องว่าง / ค่าที่กรอกแล้ว */
.blank {
  display: inline-block; border-bottom: 1px dotted var(--ink-3);
  height: 1.15em; vertical-align: -2px; margin: 0 2px;
}
.ink {
  font-weight: 600; color: var(--seal);
  border-bottom: 1px solid var(--rule); padding: 0 3px;
}

/* ช่องกรอกที่ฝังในเอกสาร */
.fld {
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--seal);
  background: #FFF6EE; border: 0; border-bottom: 1.5px solid var(--seal-2);
  padding: 2px 5px; margin: 2px; border-radius: 2px 2px 0 0;
  max-width: 100%; min-width: 6ch;
}
.fld:focus { outline: 2px solid var(--seal-2); outline-offset: 1px; background: #FFEDE0; }
.fld.filled { background: #F1F5F0; border-bottom-color: var(--ok); }
.fld.sel { min-width: 9ch; }
.fld.miss { background: #FFE7E4; }
.fld::placeholder { color: #C09E96; font-weight: 400; }

/* เอกสารแนบท้าย */
.attach { border: 1px solid var(--rule); padding: 14px 16px; background: var(--paper-2); }
.at-h { font-size: 16px; border: 0; margin-bottom: 0; }
.at-n { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.at-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.at-t th {
  text-align: left; font-weight: 500; color: var(--ink-2);
  width: 34%; padding: 4px 8px 4px 0; vertical-align: top;
}
.at-t td { padding: 4px 0; }

/* ลงชื่อ */
.signs { padding-top: 6px; }
.sign-h { font-weight: 600; margin-bottom: 14px; }
.sig-row { margin-bottom: 26px; }
.sig-space { height: 86px; position: relative; }   /* เว้นที่ให้เซ็นด้วยปากกา */
.sig-line { border-bottom: 1px dotted var(--ink-2); height: 1px; max-width: 380px; }
.sig-cap { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.sig-name { font-size: 14px; margin-top: 1px; }
.sig-img {
  position: absolute; left: 14px; bottom: 1px;
  max-height: 84px; max-width: 330px;
}

/* ---------- แถบล่าง ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(34, 38, 47, .97);
  border-top: 1px solid var(--stage-line);
  backdrop-filter: blur(8px);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.dock-in {
  max-width: var(--sheet-w); margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
}
.dock-note { font-size: 13px; color: var(--ink-3); flex: 1; line-height: 1.4; }
.dock-note b { color: #E6E8EC; }

button {
  font-family: inherit; font-size: 15px; font-weight: 600;
  border: 0; border-radius: var(--radius); padding: 11px 18px;
  cursor: pointer; transition: background .15s, opacity .15s;
}
button:disabled { opacity: .4; cursor: not-allowed; }
.b-main  { background: var(--seal); color: #FFF6F4; }
.b-main:not(:disabled):hover { background: #A2231D; }
.b-ghost { background: transparent; color: #C9CEDA; border: 1px solid var(--stage-line); }
.b-ghost:not(:disabled):hover { background: var(--stage-2); }
.b-sm { padding: 8px 12px; font-size: 14px; }
button:focus-visible { outline: 2px solid var(--seal-2); outline-offset: 2px; }

/* ---------- การ์ดบนเวที ---------- */
.card {
  background: var(--stage-2); border: 1px solid var(--stage-line);
  border-radius: var(--radius); padding: 18px; margin-top: 16px;
}
.card h3 {
  font-family: "Noto Serif Thai", serif; font-size: 17px; font-weight: 600;
  color: #F2F0EA; margin-bottom: 4px;
}
.card p.hint { font-size: 14px; color: var(--ink-3); }

.lbl { display: block; font-size: 14px; color: var(--ink-3); margin: 12px 0 4px; }
.inp {
  width: 100%; font-family: inherit; font-size: 15px; color: #E6E8EC;
  background: #171A21; border: 1px solid var(--stage-line);
  border-radius: var(--radius); padding: 10px 12px;
}
.inp:focus { outline: 2px solid var(--seal-2); outline-offset: 1px; }

/* แผ่นเซ็น */
.padwrap {
  margin-top: 10px; background: var(--paper); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
#sigpad { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.pad-base {
  position: absolute; left: 24px; right: 24px; bottom: 34px;
  border-bottom: 1px dotted #A9A292; pointer-events: none;
}
.pad-hint {
  position: absolute; left: 24px; bottom: 12px; font-size: 13px;
  color: #A9A292; pointer-events: none;
}
.padbar { display: flex; gap: 8px; margin-top: 10px; }

/* อัพโหลด */
.drop {
  margin-top: 10px; border: 1.5px dashed var(--stage-line); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--seal-2); background: #262B35; }
.drop.has { border-style: solid; border-color: var(--ok); background: #1D2A24; }
.drop-t { font-size: 15px; font-weight: 600; color: #E6E8EC; }
.drop-s { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.drop input[type=file] { display: none; }
.thumb { max-height: 110px; margin: 10px auto 0; border-radius: 2px; display: block; }

.ref {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  color: var(--seal-2); letter-spacing: .05em;
}

.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  background: #0F1216; color: #F0F2F5; border: 1px solid var(--stage-line);
  padding: 11px 18px; border-radius: var(--radius); font-size: 14px;
  z-index: 90; max-width: 90vw; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { border-color: var(--seal-2); color: #FFD9D5; }

.done-mark {
  font-family: "Noto Serif Thai", serif; font-size: 22px; color: var(--ok);
  text-align: center; margin-bottom: 6px;
}

/* พื้นที่เตรียมภาพสำหรับ PDF (ไม่ให้ผู้ใช้เห็น แต่ต้อง render จริง) */
#pdfstage {
  position: fixed; left: -20000px; top: 0; width: var(--sheet-w);
  background: var(--paper); color: var(--ink); padding: 0;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- แทปเจ้าของ ---------- */
.brand { position: relative; }
.b-owner {
  margin-left: auto; background: transparent; color: var(--ink-3);
  border: 1px solid var(--stage-line); padding: 4px 12px;
  font-size: 12px; font-weight: 500; border-radius: 999px;
}
.b-owner:hover { color: #E6E8EC; border-color: var(--seal-2); }

.admin-mode .step:not(#admin) { display: none !important; }
#admin { display: none; }
#admin.active { display: block; }

.adm-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.adm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.adm-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.inp-sm { width: auto; flex: 0 1 auto; padding: 7px 10px; font-size: 14px; }
#admSearch { flex: 1 1 180px; min-width: 140px; }

.row-card {
  background: var(--stage-2); border: 1px solid var(--stage-line);
  border-left: 3px solid var(--stage-line);
  border-radius: var(--radius); padding: 14px 16px; margin-top: 10px;
}
.row-card.st-uploaded { border-left-color: var(--seal); }
.row-card.st-checked  { border-left-color: var(--ok); }
.row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.row-name { font-size: 16px; font-weight: 600; color: #F2F0EA; }
.row-ref { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink-3); }
.badge {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #2E3440; color: var(--ink-3); margin-left: 8px; vertical-align: 2px;
}
.badge.b-up { background: #3A2220; color: #E8A9A3; }
.badge.b-ok { background: #1D2A24; color: #8FCBAE; }
.row-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px 18px; margin-top: 8px; font-size: 14px;
}
.row-grid span { color: var(--ink-3); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.row-actions .b-del { border-color: #5A2B27; color: #E8A9A3; }
.row-empty { color: var(--ink-3); font-size: 14px; padding: 18px 4px; }