:root{
  --sun:#FF7A1A;--sun-deep:#EF5F06;--ember:#FF3D2E;--gold:#FFB23E;
  --cream:#FFF8F2;--cream-2:#FFEFE2;--paper:#fff;
  --ink:#2A2016;--ink-2:#6E5C4C;--muted:#9A8b7c;--line:#F2E6D8;
  --clay:#C8692B;--clay-soft:#FBEEE2;--clay-deep:#A9531F;--leaf:#1E9E6A;--red:#E5544B;
  --fd:'Mitr',sans-serif;--fb:'Prompt',sans-serif;
  --sh:0 12px 34px -22px rgba(120,70,20,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden}
body{font-family:var(--fb);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{display:none}
button,input{font-family:inherit}
button svg{pointer-events:none}   /* ไอคอนในปุ่มไม่กินคลิก → กดโดนตัวปุ่มเสมอ (กันปุ่มยืนยันกดไม่ติด) */

header{position:sticky;top:0;z-index:40;background:rgba(255,248,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:10px;padding:11px 12px}
.ib{width:44px;height:44px;border:none;background:transparent;display:grid;place-items:center;color:var(--ink);flex:none;cursor:pointer}
.htitle{font-family:var(--fd);font-weight:600;font-size:17px;flex:1}
.hbadge{font-family:var(--fd);font-weight:700;font-size:12px;color:#fff;background:linear-gradient(120deg,var(--sun),var(--sun-deep));padding:4px 9px;border-radius:9px}

/* stepper */
.steps{display:flex;align-items:center;padding:16px 22px 6px;gap:0}
.sdot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:600;font-size:13px;background:var(--cream-2);color:var(--muted);border:2px solid transparent;transition:.3s}
.sdot.on{background:linear-gradient(140deg,var(--sun),var(--sun-deep));color:#fff}
.sdot.done{background:var(--leaf);color:#fff}
.sdot svg{width:15px;height:15px}
.sline{flex:1;height:3px;border-radius:2px;background:var(--cream-2);margin:0 4px;transition:.3s}
.sline.on{background:var(--sun)}
.slabels{display:flex;justify-content:space-between;padding:6px 16px 0;font-size:10.5px;color:var(--ink-2);font-family:var(--fd)}
.slabels span{width:25%;text-align:center}
.slabels span.on{color:var(--clay-deep)}

/* .page outer padding + .card box/gap come from shared/css (--sp-* tokens) — no per-page override */
.step{display:none;animation:fade .35s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* step head now uses the shared uniform .title; .sp = step lead paragraph */
.sp{font-size:13.5px;color:var(--ink-2);margin:0 0 16px}

/* camera viewport */
.cam{position:relative;border-radius:20px;overflow:hidden;background:#1a140e;aspect-ratio:1.58;display:grid;place-items:center}
/* วิดีโอวางทับเต็มกรอบแบบ absolute → ความสูงยึดตาม aspect-ratio ของ .cam ไม่ให้ภาพ "เลื้อยขึ้น" ตอนสตรีมโหลด + crop ตรงกับรูปที่ถ่าย (.shot) เป๊ะ */
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1a140e}
.cam .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:2}
.cam .ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7a6a58;text-align:center;padding:20px}
.cam .ph svg{width:46px;height:46px;margin-bottom:8px}
.cam .ph span{display:block;font-size:12.5px}
/* id frame overlay */
.idframe{position:absolute;inset:12% 8%;border-radius:14px;box-shadow:0 0 0 100vmax rgba(20,15,10,.42);pointer-events:none}
.idframe:before,.idframe:after,.idframe i:before,.idframe i:after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--gold)}
.idframe:before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:12px 0 0 0}
.idframe:after{top:-2px;right:-2px;border-left:none;border-bottom:none;border-radius:0 12px 0 0}
.idframe i:before{bottom:-2px;left:-2px;border-right:none;border-top:none;border-radius:0 0 0 12px}
.idframe i:after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 12px 0}
.scanline{position:absolute;left:8%;right:8%;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);border-radius:3px;top:12%;animation:scan 2.4s ease-in-out infinite;pointer-events:none}
@keyframes scan{0%,100%{top:14%;opacity:.4}50%{top:84%;opacity:1}}
/* kyc-camhint = dedicated readable hint (renamed from .camhint which is shared by wcn/wth) */
.kyc-camhint{display:flex;gap:8px;align-items:flex-start;margin-top:12px;background:var(--clay-soft);border-radius:12px;padding:11px 13px;font-size:12.5px;color:#7A3A12;line-height:1.5}
.kyc-camhint svg{flex:none;color:var(--clay);margin-top:1px}
/* the hint lives inside a wizard .step, and layout.css has .step span{color:#fff} → the text
   was rendered white (invisible). inherit takes the readable container colour (wins by source
   order: kyc-verify.css is linked after layout.css). */
.kyc-camhint span{color:inherit}
.idstatus{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;font-family:var(--fd);font-weight:500;font-size:13.5px;color:var(--ink-2)}
.idstatus .dt{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:blink 1s infinite}
.idstatus.ok{color:var(--leaf)}
.idstatus.ok .dt{background:var(--leaf);animation:none}
@keyframes blink{50%{opacity:.25}}
.idframe.aligned{transition:.25s}
.idframe.aligned:before,.idframe.aligned:after,.idframe.aligned i:before,.idframe.aligned i:after{border-color:var(--leaf)}
.capflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.capflash.on{animation:flash .55s ease}
@keyframes flash{0%{opacity:0}22%{opacity:.92}100%{opacity:0}}

.pbtn{width:100%;height:54px;border:none;border-radius:15px;background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:500;font-size:16px;box-shadow:0 12px 24px -12px rgba(239,95,6,.9);cursor:pointer;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px}
.pbtn:active{transform:translateY(1px)}
.pbtn svg{width:19px;height:19px}
.pbtn[disabled]{opacity:.55}
.gbtn{width:100%;height:46px;border:1.5px solid var(--line);border-radius:13px;background:#fff;color:var(--ink-2);font-family:var(--fd);font-weight:500;font-size:14px;margin-top:9px;cursor:pointer}
/* ปุ่มรอง → กลายเป็นปุ่ม "ไปต่อ" เมื่อยืนยันใบหน้าแล้วและย้อนกลับมาหน้านี้ */
.gbtn.go{border-color:transparent;color:#fff;background:linear-gradient(120deg,var(--leaf),#0f7a4f);box-shadow:0 12px 24px -14px rgba(15,122,79,.9)}

/* processing overlay */
.proc{position:absolute;inset:0;background:rgba(26,20,14,.72);display:none;place-items:center;flex-direction:column;gap:12px;color:#fff}
.proc.on{display:grid}
.spin{width:44px;height:44px;border:4px solid rgba(255,255,255,.25);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.proc span{font-family:var(--fd);font-size:14px}

/* review fields */
/* review status chip + notice — light-2026, high-contrast readable text */
.autobadge{display:inline-flex;align-items:center;gap:6px;background:#E6F6EE;color:#137B52;font-family:var(--fd);font-weight:600;font-size:12px;padding:6px 12px;border-radius:20px;margin-bottom:14px}
.autobadge svg{width:14px;height:14px}
.autobadge.warn{background:#FFF4E5;color:#B26A00}
.autobadge.bad{background:#FDECEA;color:#C0392B}
.verifyline{display:flex;align-items:flex-start;gap:10px;font-family:var(--fb);font-size:13px;line-height:1.55;padding:12px 14px;border-radius:13px;margin:0 0 14px}
.verifyline>span:first-child{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:12px;color:#fff;margin-top:1px}
/* the text span sits inside a .step, and layout.css .step span{color:#fff} would whiten it
   (invisible). inherit takes the verifyline's readable state colour; keeps the icon circle white. */
.verifyline>span:last-child{color:inherit}
.verifyline b{font-family:var(--fd);font-weight:600}
.verifyline.ok{background:#EAF7F0;color:#137B52;border:1px solid #BFE6D3}
.verifyline.ok>span:first-child{background:#1E9E6A}
.verifyline.info{background:#EEF4FF;color:#173A6C;border:1px solid #CFE0FB}
.verifyline.info>span:first-child{background:#3B6FD4}
.verifyline.warn{background:#FFF7E8;color:#8A5A00;border:1px solid #FFE0A6}
.verifyline.warn>span:first-child{background:#E8870A}
.verifyline.bad{background:#FCEBEA;color:#B23A32;border:1px solid #F3C9C5}
.verifyline.bad>span:first-child{background:#D8433A}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--fd);font-weight:500;font-size:13px;margin-bottom:5px;color:var(--ink)}
.inp{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-size:15px;color:var(--ink);background:#fff;outline:none}
.inp:focus{border-color:var(--sun)}
.inp.filled{background:#FBFFFC;border-color:#CBEBD9}
.inp.err{border-color:var(--red);background:#FCEBEA}
/* ชื่อ/นามสกุล สองช่องเรียงคู่ */
.frow{display:flex;gap:10px}
.frow .field{flex:1;min-width:0}
/* รูปบัตรที่ถ่ายมา แสดงคู่กับข้อมูลที่ OCR อ่านได้ (ให้ผู้ใช้เทียบ) */
.idpreview{margin:-2px 0 14px}
.idpreview-card{position:relative;border-radius:14px;overflow:hidden;background:#1a140e;aspect-ratio:1.58;border:1px solid var(--line);box-shadow:0 12px 28px -20px rgba(120,70,20,.6)}
.idpreview-card img{width:100%;height:100%;object-fit:cover;display:block}
.idpreview-tag{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(30,158,106,.94);color:#fff;font-family:var(--fd);font-weight:500;font-size:11px;padding:4px 10px;border-radius:20px}
.idpreview-tag svg{width:12px;height:12px}
.idpreview-redo{width:100%;margin-top:9px;height:44px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--clay-deep);font-family:var(--fd);font-weight:500;font-size:13px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.idpreview-redo:active{transform:translateY(1px)}
.idpreview-redo svg{width:15px;height:15px}

/* 360 face scan */
.facewrap{display:flex;flex-direction:column;align-items:center;padding:6px 0}
.facering{position:relative;width:250px;height:250px}
.facering .cvid{position:absolute;inset:20px;border-radius:50%;overflow:hidden;background:#1a140e;display:grid;place-items:center;transform:translateZ(0)}
.facering .cvid video,.facering .cvid .fshot{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;max-width:none;object-fit:cover;transform:translate(-50%,-50%) scaleX(-1)}
.facering .cvid .fshot{display:none;z-index:2}
.facering .cvid .fph{position:relative;z-index:3;color:#7a6a58;text-align:center}
.facering .cvid .fph svg{width:52px;height:52px}
.facering svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.facering .track{fill:none;stroke:var(--cream-2);stroke-width:6}
.facering .prog{fill:none;stroke:url(#fg);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.dots{position:absolute;inset:0}
.dots i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cream-2);top:50%;left:50%;margin:-4.5px}
.dots i.lit{background:var(--sun);box-shadow:0 0 8px rgba(255,122,26,.8)}
.faceinst{font-family:var(--fd);font-weight:600;font-size:17px;color:var(--clay-deep);margin-top:16px;text-align:center;min-height:24px}
.facesub{font-size:12.5px;color:var(--muted);margin-top:2px;text-align:center}

/* success */
.done{text-align:center}
.donecircle{width:96px;height:96px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(140deg,var(--leaf),#0f7a4f);display:grid;place-items:center;color:#fff;animation:pop .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.donecircle svg{width:46px;height:46px}
.done h2{font-family:var(--fd);font-weight:600;font-size:22px;margin:0 0 6px}
.done p{font-size:14px;color:var(--ink-2);margin:0 0 4px}
.donebox{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:18px 0;text-align:left;box-shadow:var(--sh)}
.dstat{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);padding:4px 0}
.dstat svg{color:var(--gold);flex:none}

#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#2A2016;color:#fff;font-size:13.5px;padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.28s;z-index:9995;font-family:var(--fd)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== เอกสารทางการ: ข้อตกลง + ลงนาม (step 4) ===== */
.doc{border:1px solid #E4DCCB;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 18px 44px -30px rgba(30,42,68,.55)}
.doc-band{display:flex;align-items:center;gap:13px;padding:15px 16px 16px;background:linear-gradient(120deg,#1B2A4A,#26385C);color:#fff;position:relative}
.doc-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#B8912E,#E0BC5E,#B8912E)}
.doc-seal{flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));line-height:0}
.doc-ttl .th{font-family:var(--fd);font-weight:600;font-size:18px;line-height:1.25}
.doc-ttl .en{font-size:9.5px;letter-spacing:.14em;color:#C8D2E4;margin-top:3px}
.doc-meta{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#FAF7F1;border-bottom:1px solid #EFE7D8;flex-wrap:wrap}
.doc-meta .dm{font-size:11px}.doc-meta .dm span{color:#9A8b7c;display:block}.doc-meta .dm b{font-family:'Prompt',monospace;font-size:12.5px;color:#1B2A4A}
.doc-badge{margin-left:auto;font-size:11px;font-weight:700;color:#5A4405!important;background:#FBE39C;border:1px solid #E4C356;padding:5px 11px;border-radius:8px;letter-spacing:.2px}
.parties{display:flex;align-items:stretch;gap:8px;padding:14px 16px 4px}
.parties .pty{flex:1;min-width:0;border:1px solid #EAE1CF;border-radius:12px;padding:10px 12px;background:#FCFAF5}
.parties .pl{font-size:10.5px;color:#9A8b7c}
.parties .pty b{display:block;font-family:var(--fd);font-weight:500;font-size:13px;color:#2A2016;margin-top:2px;line-height:1.3;word-break:break-word}
.parties .pty small{font-size:10.5px;color:#9A8b7c}
.parties .parr{display:grid;place-items:center;flex:none}
.terms-h{display:flex;align-items:baseline;justify-content:space-between;padding:10px 16px 8px}
.terms-h span{font-family:var(--fd);font-weight:600;font-size:13.5px;color:#1B2A4A}
.terms-h i{font-style:normal;font-size:11px;color:var(--clay-deep)}
.agmt{margin:0 16px;border:1px solid #E7DECC;border-radius:12px;background:#FFFDF8;height:250px;overflow-y:auto;padding:14px 15px;font-size:13.5px;line-height:1.72;color:#3E3324;-webkit-overflow-scrolling:touch}
.agmt::-webkit-scrollbar{width:6px}.agmt::-webkit-scrollbar-thumb{background:#DCCDB2;border-radius:6px}
.agmt-head{font-family:var(--fd);font-weight:600;font-size:13.5px;color:#8A6D1E;margin-bottom:10px;line-height:1.45;padding-bottom:9px;border-bottom:1px solid #EFE4CE}
.agmt p{margin:0 0 11px}
.agmt-end{text-align:center;color:#B79E82;font-size:11.5px;margin-top:14px;padding-top:10px;border-top:1px dashed #E7DECC;letter-spacing:.03em}
.agmt-hint{text-align:center;font-size:12px;color:var(--clay-deep);margin:9px 16px 4px;font-weight:500;transition:.2s}
.agmt-hint.done{color:#1E9E6A}
.agree{display:flex;gap:10px;align-items:flex-start;margin:10px 16px 4px;font-size:12.5px;color:#3E3324;line-height:1.55;opacity:.62;pointer-events:none;transition:.2s;cursor:pointer}
.agree.on{opacity:1;pointer-events:auto}
.agree input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:#1B2A4A}
.sign-block{margin:12px 16px 18px;border:1px dashed #CBB9A6;border-radius:13px;padding:13px;background:#FCFAF5}
.sign-label{font-family:var(--fd);font-weight:500;font-size:13px;color:#1B2A4A;margin-bottom:8px}
.sigpad{position:relative;border:1px solid #DED0B8;border-radius:11px;background:#fff;height:160px;overflow:hidden}
.sigpad canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.sigpad .sigline{position:absolute;left:18px;right:18px;bottom:32px;border-bottom:1.5px solid #C9B896;pointer-events:none}
.sigpad .sigph{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;color:#B9A78A;pointer-events:none}
.sigpad .sigph.hide{display:none}
.sigclear{position:absolute;top:8px;right:8px;border:1px solid #E0D0B4;background:#fff;color:#8A6D1E;font-family:'Prompt',sans-serif;font-size:12px;padding:13px 14px;border-radius:9px;z-index:2;cursor:pointer}
.sign-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;font-size:11px;color:#9A8b7c;flex-wrap:wrap}
.sign-foot b{color:#2A2016;font-weight:500}
.pbtn:disabled{opacity:.5;box-shadow:none;cursor:default}

/* ===== status gate: loading / verified / pending / error (DB-wired · shown when scan flow is hidden) ===== */
.kstate{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px 22px 24px;text-align:center;box-shadow:var(--sh);animation:fade .35s ease}
.kstate .kst-ic{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;color:#fff;animation:pop .5s cubic-bezier(.2,1.5,.4,1) both}
.kstate .kst-ic svg{width:42px;height:42px}
.kstate .kst-ic.ok{background:linear-gradient(140deg,var(--leaf),#0f7a4f)}
.kstate .kst-ic.wait{background:linear-gradient(140deg,var(--gold),var(--sun-deep))}
.kstate .kst-ic.err{background:linear-gradient(140deg,#F0796A,var(--red))}
.kstate .kst-ttl{font-family:var(--fd);font-weight:600;font-size:21px;margin:0 0 6px;color:var(--ink)}
.kstate .kst-msg{font-size:14px;color:var(--ink-2);margin:0 auto;max-width:34ch;line-height:1.6}
.kstate .kst-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px auto 0;max-width:320px;padding:11px 15px;background:var(--cream);border:1px solid var(--line);border-radius:12px;font-size:13px}
.kstate .kst-meta span{color:var(--muted)}
.kstate .kst-meta b{font-family:var(--fd);font-weight:500;color:var(--ink)}
.kstate .kst-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:320px;height:50px;margin:20px auto 0;border:none;border-radius:14px;background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:500;font-size:15px;text-decoration:none;box-shadow:0 12px 24px -14px rgba(239,95,6,.9);cursor:pointer}
.kstate .kst-btn:active{transform:translateY(1px)}
.kstate.loading{padding:44px 22px}
.kstate .kst-spin{width:44px;height:44px;margin:0 auto 16px;border:4px solid var(--cream-2);border-top-color:var(--sun);border-radius:50%;animation:spin .8s linear infinite}
.kstate.loading .kst-msg{color:var(--ink-2)}

/* ===== reason banner (ปฏิเสธ/ขอทำใหม่ → re-submit) — sits at top of step 1 card ===== */
.kreason{border:1px solid #F3C9C5;background:#FCEBEA;border-radius:13px;padding:13px 14px;margin-bottom:16px}
.kreason .kr-h{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;font-size:14px;color:#B23A32}
.kreason .kr-h svg{width:18px;height:18px;flex:none}
.kreason .kr-b{margin-top:7px;font-size:13px;color:#7a3b36;line-height:1.55;background:#fff;border:1px solid #F3D3CF;border-radius:9px;padding:9px 11px}
.kreason .kr-f{margin-top:8px;font-size:12px;color:#9a5b54}

/* real KYC images (verified hero + step-1 id-card guide) */
.kst-hero-img{width:120px;height:120px;object-fit:contain;margin:0 auto 6px;display:block}
.idph-guide{max-width:230px;width:74%;height:auto;display:block;margin:0 auto 8px}