:root{
  --desk:#FBF7EE; --panel:#FFFFFF; --text:#1D1D1F; --muted:#5E5E66; --line:#ECE3CF; --line-strong:#DCCFAE;
  --field:#FFFFFF; --accent:#F5A524; --accent-hover:#E8961A; --accent-ink:#1D1D1F; --accent-strong:#D98A0B; --accent-text:#9A5B00;
  --danger:#B42318; --pro:#7A4B00; --pro-bg:#FFEBC2; --tint:#FFF3D6; --tint-2:#FFEBC2; --focus:#A35F00;
  --shadow:0 1px 2px rgba(120,80,0,.05),0 8px 24px rgba(120,80,0,.07);
  --paper:#FFFFFF; --paper-ink:#1B2130; --paper-muted:#5A6373; --paper-line:#D5DAE1;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --desk:#17181B; --panel:#212226; --text:#F2F2F3; --muted:#B4B4BB; --line:#34353A; --line-strong:#45464C;
    --field:#1B1C1F; --accent:#F5A524; --accent-hover:#FFB848; --accent-ink:#1D1D1F; --accent-strong:#F5A524; --accent-text:#FFC65C;
    --danger:#FF8A80; --pro:#FFD38A; --pro-bg:#3A2D12; --tint:#2A281F; --tint-2:#34301F; --focus:#FFC65C;
    --shadow:0 8px 24px rgba(0,0,0,.35);
    --paper:#FFFFFF; --paper-ink:#1B2130; --paper-muted:#5A6373; --paper-line:#D5DAE1;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --desk:#17181B; --panel:#212226; --text:#F2F2F3; --muted:#B4B4BB; --line:#34353A; --line-strong:#45464C;
  --field:#1B1C1F; --accent:#F5A524; --accent-hover:#FFB848; --accent-ink:#1D1D1F; --accent-strong:#F5A524; --accent-text:#FFC65C;
  --danger:#FF8A80; --pro:#FFD38A; --pro-bg:#3A2D12; --tint:#2A281F; --tint-2:#34301F; --focus:#FFC65C;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --paper:#FFFFFF; --paper-ink:#1B2130; --paper-muted:#5A6373; --paper-line:#D5DAE1;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--desk);color:var(--text);
  font-family:Inter,"IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;font-size:15px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.top{max-width:1320px;margin:0 auto;padding:20px 20px 8px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.top h1{margin:0;font-size:1.6rem;line-height:1.2;font-weight:600}
.top p{margin:4px 0 0;color:var(--muted);font-size:.92rem;max-width:62ch}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:500}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.6;cursor:progress}
.status{max-width:1320px;margin:0 auto;padding:0 20px;min-height:1.4em;color:var(--muted);font-size:.9rem}

.layout{max-width:1320px;margin:0 auto;padding:8px 20px 40px;display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){.layout{grid-template-columns:minmax(0,1fr)}}

.form{display:flex;flex-direction:column;gap:14px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;gap:4px}
.seg button{border:0;background:none;border-radius:7px;padding:9px 6px;cursor:pointer;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
fieldset{margin:0;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:14px 14px 16px;min-width:0}
legend{font-weight:600;padding:0 6px;margin-left:-6px}
.hint{color:var(--muted);font-size:.85rem;margin:2px 0 10px}
.warn{color:var(--pro);background:var(--pro-bg);border-radius:6px;padding:8px 10px;font-size:.85rem;margin:10px 0 0}
label{display:block;font-size:.88rem;color:var(--muted);margin:10px 0 4px}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
input[type=color]{padding:2px;height:38px;width:64px}
input[type=file]{padding:6px;font-size:.85rem}
textarea{resize:vertical;min-height:64px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pro{display:inline-block;font-size:.72rem;font-weight:600;color:var(--pro);background:var(--pro-bg);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.convert{margin-top:12px;width:100%}
.imgrow{display:flex;gap:10px;align-items:center;margin-top:6px}
.imgrow img{max-height:40px;max-width:120px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:2px}
.link{background:none;border:0;padding:4px 0;color:var(--danger);cursor:pointer;font-size:.85rem}
.check{display:flex;gap:8px;align-items:center;color:var(--text);font-size:.92rem;margin-top:12px}
.check input{width:auto}
.choices{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.choices label{display:flex;gap:8px;align-items:center;margin:0;color:var(--text);font-size:.92rem}
.choices input{width:auto}
.item{border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}
.item:first-child{border-top:0;margin-top:0;padding-top:0}
.item-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem}
.item-grid{display:grid;grid-template-columns:1fr .9fr 1.3fr;gap:8px;margin-top:6px}
.item-grid label{margin:0 0 4px}
.add{margin-top:12px;width:100%;border-style:dashed}
[hidden]{display:none !important}

.preview{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
.fit{position:relative;overflow:hidden}
.paper-host{transform-origin:top left;width:794px}

/* ---------- document ---------- */
.paper{--pen:#2443A8;--pen-soft:#EEF1FB;--on-pen:#FFFFFF;
  width:794px;min-height:1123px;background:var(--paper);color:var(--paper-ink);position:relative;overflow:hidden;
  font-family:Sarabun,"TH Sarabun New",Tahoma,sans-serif;font-size:14px;line-height:1.6;
  padding:52px 60px 36px;box-shadow:0 1px 2px rgba(20,30,50,.12),0 8px 28px rgba(20,30,50,.10);display:flex;flex-direction:column}
.p-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.p-seller{display:flex;gap:14px;align-items:flex-start;min-width:0}
.p-logo{max-height:60px;max-width:120px;object-fit:contain}
.p-seller h2{margin:0;font-size:20px;line-height:1.3;font-weight:700}
.p-seller .d{color:var(--paper-muted);font-size:13px;white-space:pre-line}
.p-title{text-align:right;flex-shrink:0}
.p-title .t{font-size:30px;font-weight:700;color:var(--pen);line-height:1.1}
.p-title .e{font-size:13px;color:var(--paper-muted);margin-top:2px}
.p-meta{margin-top:12px;border:1px solid var(--paper-line);border-radius:6px;padding:8px 12px;font-size:13px;display:grid;grid-template-columns:auto auto;gap:2px 16px;text-align:left}
.p-meta span:nth-child(odd){color:var(--paper-muted)}
.p-to{margin-top:26px;padding:12px 14px;background:var(--pen-soft);border-radius:6px}
.p-to .k{font-size:12px;color:var(--paper-muted)}
.p-to .n{font-weight:600;font-size:15px}
.p-to .d{font-size:13px;white-space:pre-line}
table.p-items{width:100%;border-collapse:collapse;margin-top:22px;font-size:13.5px}
.p-items th{text-align:left;font-weight:600;border-bottom:1.5px solid var(--paper-ink);padding:6px}
.p-items td{border-bottom:1px solid var(--paper-line);padding:7px 6px;vertical-align:top}
.p-items .num{text-align:right;white-space:nowrap}
.p-items .c{text-align:center;width:40px}
.p-items .empty{color:var(--paper-muted);text-align:center;padding:18px}
.p-mid{display:flex;justify-content:space-between;gap:24px;margin-top:14px;align-items:flex-start}
.p-pay{flex:1;min-width:0;font-size:13px}
.p-pay .box{border:1px solid var(--paper-line);border-radius:6px;padding:10px 12px;display:flex;gap:14px;align-items:center}
.p-pay .k{font-weight:600}
.p-pay .v{white-space:pre-line;color:var(--paper-ink)}
.p-qr{width:116px;height:116px;image-rendering:pixelated;flex-shrink:0}
.p-qr-cap{font-size:11.5px;color:var(--paper-muted);text-align:center;margin-top:2px}
.p-sum table{border-collapse:collapse;min-width:300px;font-size:13.5px}
.p-sum td{padding:4px 6px}
.p-sum td:last-child{text-align:right;white-space:nowrap}
.p-sum .grand td{border-top:1.5px solid var(--paper-ink);padding-top:8px;font-weight:700;font-size:16px;color:var(--pen)}
.p-sum .net td{font-weight:600}
.p-words{margin-top:12px;display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.p-words .k{color:var(--paper-muted);white-space:nowrap}
.p-words .v{flex:1;color:var(--pen);font-weight:600;font-size:16px;border-bottom:1.5px dotted var(--pen);padding:0 4px 2px}
.p-notes{margin-top:20px;font-size:13px}
.p-notes .k{font-weight:600}
.p-notes .v{white-space:pre-line}
.p-sign{margin-top:auto;padding-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;font-size:13px;text-align:center}
.p-sign .line{border-bottom:1px solid var(--paper-ink);height:48px;margin-bottom:6px;display:flex;align-items:flex-end;justify-content:center}
.p-sign .line img{max-height:46px;max-width:180px;object-fit:contain}
.p-sign .who{color:var(--paper-muted)}
.p-credit{margin-top:22px;text-align:center;font-size:11px;color:var(--paper-muted)}
.p-stamp{display:inline-block;margin:18px 0 0 6px;transform:rotate(-8deg);border:3px solid var(--pen);color:var(--pen);border-radius:8px;padding:4px 16px;font-size:22px;font-weight:700;opacity:.8}

.paper .en{display:block;font-size:.78em;line-height:1.3;color:var(--paper-muted);font-weight:400}
.p-items th .en{font-weight:400}
.st-brand .p-head .en{color:var(--on-pen);opacity:.85}
.p-bill{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--pen);border:1.5px solid var(--pen);border-radius:999px;padding:1px 10px}
.st-brand .p-head .p-bill{color:var(--on-pen);border-color:var(--on-pen)}
.p-sum .contract td{font-weight:600}
.p-words .v .en{color:var(--pen);font-size:.85em;font-weight:500;margin-top:2px}

/* font sets: classic = Sarabun (default), modern = loopless all, mixed = loopless headings + looped body */
.ff-modern{font-family:"IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;font-size:13.5px;line-height:1.65}
.ff-mixed{font-family:Sarabun,"TH Sarabun New",Tahoma,sans-serif}
.ff-modern .p-seller h2,.ff-modern .p-title .t,.ff-modern .p-to .n,.ff-modern .p-items th,.ff-modern .p-sum .grand td,.ff-modern .p-stamp,.ff-modern .p-notes .k,.ff-modern .p-pay .k,
.ff-mixed .p-seller h2,.ff-mixed .p-title .t,.ff-mixed .p-to .n,.ff-mixed .p-items th,.ff-mixed .p-sum .grand td,.ff-mixed .p-stamp,.ff-mixed .p-notes .k,.ff-mixed .p-pay .k{font-family:Kanit,"IBM Plex Sans Thai",Tahoma,sans-serif;font-weight:600}
.fonts .fs{font-weight:600;font-size:1.05rem;margin-right:6px}

/* style: formal */
.st-formal{--pen:#1B2130 !important;--pen-soft:#FFFFFF !important}
.st-formal .p-to{border:1px solid var(--paper-ink);border-radius:0}
.st-formal .p-meta{border-color:var(--paper-ink);border-radius:0}
.st-formal .p-items th,.st-formal .p-items td{border:1px solid var(--paper-ink)}
.st-formal .p-items th{background:#F1F2F4;text-align:center}
.st-formal .p-pay .box{border-color:var(--paper-ink);border-radius:0}
/* style: brand */
.st-brand .p-head{background:var(--pen);color:var(--on-pen);margin:-52px -60px 0;padding:36px 60px 26px}
.st-brand .p-head .t,.st-brand .p-head .e,.st-brand .p-seller .d{color:var(--on-pen)}
.st-brand .p-head .p-meta{border-color:rgba(255,255,255,.55)}
.st-brand .p-head .p-meta span:nth-child(odd){color:var(--on-pen);opacity:.8}
.st-brand .p-logo{background:#fff;border-radius:6px;padding:4px}
.st-brand .p-items th{background:var(--pen-soft);border-bottom-color:var(--pen)}

#capture{position:fixed;left:-10000px;top:0}

/* ---------- mobile ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--panel);border-top:1px solid var(--line);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;align-items:stretch}
.mtabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1;background:var(--field);border-radius:10px;padding:4px}
.mtabs button{border:0;background:none;border-radius:7px;min-height:48px;font-weight:600;color:var(--muted);cursor:pointer;line-height:1.2;padding:4px 6px}
.mtabs button[aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.mt-sub{display:block;font-size:.78rem;font-weight:500;color:var(--accent)}
#mPdf{min-width:72px}
.pv-tools{display:none;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;color:var(--muted);font-size:.85rem}
.fit.zoomed{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:4px}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .top{padding:14px 16px 4px;align-items:center}
  .top h1{font-size:1.3rem}
  .top p{font-size:.85rem}
  #btnPrint,#btnPdf{display:none}
  .layout{padding:8px 12px 24px;gap:12px}
  .preview{position:static}
  body[data-view="form"] .preview{display:none}
  body[data-view="doc"] .form{display:none}
  input,select,textarea{font-size:16px}
  .btn,.seg button{min-height:44px}
  .choices label{min-height:40px}
  .choices input[type=radio],.check input{width:20px;height:20px;flex-shrink:0}
  .pv-tools{display:flex}
  .status{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:30;padding:0;min-height:0;max-width:none}
  .status:not(:empty){background:var(--text);color:var(--panel);border-radius:10px;padding:10px 14px;box-shadow:0 6px 20px rgba(0,0,0,.22)}
  .mbar{display:flex}
}
@media (max-width:420px){
  .row2{grid-template-columns:1fr}
  .item-grid{grid-template-columns:1fr 1fr}
  .item-grid > div:last-child{grid-column:1 / -1}
}

/* ---------- tumbill skin ---------- */
.top{align-items:center}
.top h1{margin:0;line-height:1}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand .wordmark{font-family:Fredoka,"IBM Plex Sans Thai",sans-serif;font-weight:600;font-size:28px;letter-spacing:-.02em}
.top p{margin:8px 0 0}
.btn{border:0;background:var(--tint);color:var(--text);border-radius:999px;padding:10px 18px;font-weight:600}
.btn:hover{border-color:transparent;background:var(--tint-2)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover)}
.seg{border:0;box-shadow:var(--shadow);border-radius:999px;padding:5px}
.seg button{border-radius:999px;font-weight:600}
fieldset{border:0;border-radius:22px;box-shadow:var(--shadow);padding:18px 18px 20px}
legend{float:left;width:100%;padding:0;margin:0 0 2px;font-family:Mali,"IBM Plex Sans Thai",sans-serif;font-size:1.08rem;font-weight:600}
legend+*{clear:both}
input,select,textarea{background:var(--field);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[type=color]{border-radius:10px}
input[type=radio],input[type=checkbox]{accent-color:var(--accent-strong)}
.item{border-top:1.5px dashed var(--line)}
.add{border:1.5px dashed var(--line-strong);background:transparent}
.add:hover{background:var(--tint)}
.warn{border-radius:12px}
.imgrow img{border-color:var(--line);border-radius:8px}
.mbar{border-top:0;box-shadow:0 -8px 24px rgba(120,80,0,.10)}
.mtabs{background:var(--tint);border-radius:999px}
.mtabs button{border-radius:999px}
.mtabs button[aria-selected="true"]{box-shadow:0 2px 8px rgba(120,80,0,.12)}
.mt-sub{color:var(--accent-text)}
.foot{max-width:1320px;margin:0 auto;padding:4px 20px 32px;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:.9rem}
.foot a{color:var(--muted);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.foot a:hover{color:var(--text)}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){
  .brand .wordmark{font-size:24px}
  .brand svg{width:38px;height:46px}
  .foot{padding-bottom:12px}
  body[data-view="doc"] .foot{display:none}
}

/* ---------- PDF modal ---------- */
.pdfm{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(29,29,31,.38)}
.pdfm-card{width:min(100%,360px);background:var(--panel);color:var(--text);border-radius:28px;padding:28px 24px 24px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.pdfm-art{width:156px;height:156px;margin:0 auto 10px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center}
.pdfm-art svg{width:136px;height:136px;overflow:visible}
.pdfm h2{font-family:Mali,"IBM Plex Sans Thai",sans-serif;font-weight:600;font-size:1.4rem;margin:4px 0 6px}
.pdfm p{margin:0;color:var(--muted);font-size:.95rem;overflow-wrap:anywhere;white-space:pre-line}
.pdfm-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.pdfm-actions .btn{min-height:46px;width:100%}
.pdfm .ok,.pdfm .err,.pdfm .spark,.pdfm .dots,.pdfm .lines{display:none}
.pdfm[data-state="loading"] .dots{display:inline}
.pdfm[data-state="done"] .ok,.pdfm[data-state="done"] .spark,.pdfm[data-state="done"] .lines{display:inline}
.pdfm[data-state="error"] .err,.pdfm[data-state="error"] .lines{display:inline}
.pdfm[data-state="loading"] .bob{animation:pdfmBob 1.1s ease-in-out infinite}
.pdfm .dots circle{animation:pdfmBlink 1s ease-in-out infinite}
.pdfm .dots circle:nth-child(2){animation-delay:.15s}.pdfm .dots circle:nth-child(3){animation-delay:.3s}
.pdfm[data-state="done"] .pdfm-art{animation:pdfmPop .35s ease-out}
@keyframes pdfmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pdfmBlink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes pdfmPop{0%{transform:scale(.9)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pdfm *{animation:none !important}}

@media print{
  @page{size:A4;margin:0}
  :root{padding:0}
  body{background:#fff}
  .top,.status,.form,.mbar,.pv-tools,.foot,.pdfm{display:none !important}
  .layout{display:block;padding:0;max-width:none}
  .preview{position:static}
  .fit{height:auto !important;overflow:visible}
  .paper-host{transform:none !important}
  .paper{box-shadow:none;min-height:auto;height:297mm}
}

/* ---------- tumbill mascot motion ---------- */
.tb-duck,.tb-receipt,.tb-wings{transform-box:fill-box}
.tb-logo.tb-hi .tb-duck{animation:tbTilt .42s ease-in-out both;transform-origin:center bottom}
@keyframes tbTilt{0%{transform:rotate(0) translateY(0)}30%{transform:rotate(-12deg) translateY(-4px)}65%{transform:rotate(8deg) translateY(-2px)}100%{transform:rotate(0) translateY(0)}}
.tb-replay{position:absolute;inset:0;border:0;background:none;padding:0;margin:0;cursor:pointer;border-radius:50%}
.tb-check{stroke-dasharray:44;stroke-dashoffset:0}
.tb-hero.tb-play .tb-receipt{animation:tbReceipt .45s cubic-bezier(.2,.8,.3,1.2) both;transform-origin:center bottom}
.tb-hero.tb-play .tb-duck{animation:tbPop .42s cubic-bezier(.2,.8,.3,1.25) .3s both;transform-origin:center bottom}
.tb-hero.tb-play .tb-wings{animation:tbWings .22s ease-out .62s both;transform-origin:center}
.tb-hero.tb-play .tb-check{animation:tbDraw .26s ease-out .72s both}
@keyframes tbReceipt{0%{transform:translateY(70px);opacity:0}50%{transform:translateY(-6px);opacity:1}75%{transform:translateY(3px)}100%{transform:translateY(0)}}
@keyframes tbPop{0%{transform:translateY(48px);opacity:0}10%{opacity:1}65%{transform:translateY(-12px)}85%{transform:translateY(2px)}100%{transform:translateY(0);opacity:1}}
@keyframes tbWings{0%{transform:scale(0)}70%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes tbDraw{0%{stroke-dashoffset:44}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tb-logo .tb-duck,.tb-hero *{animation:none !important}}

/* page heading */
.top .tb-h1{font-family:Mali,"IBM Plex Sans Thai",sans-serif;font-size:1.4rem;line-height:1.35;font-weight:600;margin:6px 0 0;text-wrap:balance}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){.top .tb-h1{font-size:1.15rem;margin-top:2px}}

/* ---------- shared site header / footer ---------- */
.sh-top{max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-sizing:border-box}
.sh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink,var(--text))}
.sh-brand .wordmark{font-family:Fredoka,"IBM Plex Sans Thai",sans-serif;font-weight:600;font-size:28px;letter-spacing:-.02em}
.sh-nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.sh-nav a{text-decoration:none;color:var(--muted);font-size:16px;font-family:Inter,"IBM Plex Sans Thai","Noto Sans Thai",Tahoma,sans-serif}
.sh-nav a:hover{color:var(--ink,var(--text))}
.sh-nav a[aria-current="page"]{color:var(--ink,var(--text));font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.sh-nav .sh-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--accent);color:#1D1D1F;font-weight:600;font-size:17px}
.sh-nav .sh-cta:hover{color:#1D1D1F;filter:brightness(.96)}
.sh-foot{border-top:1px solid var(--rule,var(--line));color:var(--muted);font-size:15px;font-family:Inter,"IBM Plex Sans Thai","Noto Sans Thai",Tahoma,sans-serif}
.sh-foot-in{max-width:1120px;margin:0 auto;padding:28px 24px 36px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;box-sizing:border-box}
.sh-foot .wordmark{font-family:Fredoka,sans-serif;font-weight:600;font-size:18px;color:var(--ink,var(--text))}
.sh-foot nav{display:flex;gap:8px 22px;flex-wrap:wrap}
.sh-foot a{color:var(--muted);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
.sh-foot a:hover{color:var(--ink,var(--text))}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){.sh-top{padding:14px 18px}.sh-nav a:not(.sh-cta){display:none}.sh-foot-in{padding:24px 18px 32px}.sh-foot a{min-height:44px}}
@media print{.sh-top,.sh-foot{display:none !important}}

/* ---------- v3: layout aligned to the 1,120px site grid ---------- */
.top,.layout,.status{max-width:1120px}
.top{padding:4px 24px 8px}
.layout{padding:8px 24px 40px;grid-template-columns:minmax(0,400px) minmax(0,1fr)}
.status{padding:0 24px}
.tb-guide{max-width:1120px;margin:0 auto;padding:0 24px 28px;font-size:.95rem;color:var(--muted)}
.tb-guide a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
/* ---------- v3: site-styled controls ---------- */
.tb-vh{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important}
.tb-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tb-pills button{border:1.5px solid var(--line);background:var(--field);border-radius:999px;min-height:40px;padding:0 16px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--text)}
.tb-pills button:hover{border-color:var(--line-strong)}
.tb-pills button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tb-date{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);min-height:44px;padding:0 12px;cursor:pointer}
.tb-date:hover{border-color:var(--line-strong)}
.tb-date:focus-within{border-color:var(--accent);outline:3px solid var(--focus);outline-offset:2px}
.tb-date input{position:absolute !important;inset:0;width:100% !important;height:100% !important;opacity:0;cursor:pointer;border:0 !important;padding:0 !important;margin:0;background:none !important}
.tb-date-t{font-size:.98rem;font-variant-numeric:tabular-nums;pointer-events:none}
.tb-date-i{color:var(--muted);display:flex;pointer-events:none}
.tb-upl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px dashed var(--line-strong);border-radius:12px;cursor:pointer;font-weight:600;color:var(--text);margin-top:2px}
.tb-upl:hover{background:var(--tint)}
.tb-vh:focus-visible + .tb-upl{outline:3px solid var(--focus);outline-offset:2px}
.form label:has(> input[type="radio"]){position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px 8px 42px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);cursor:pointer;margin:0 0 8px;color:var(--text)}
.form label:has(> input[type="radio"])::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid var(--line-strong);background:var(--field)}
.form label:has(> input[type="radio"]:checked){border-color:var(--accent);background:var(--tint)}
.form label:has(> input[type="radio"]:checked)::before{border:6px solid var(--accent)}
.form label:has(> input[type="radio"]:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.form label > input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choices{gap:0}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){
  .top{padding:4px 16px 4px}
  .layout{padding:8px 12px 24px;grid-template-columns:minmax(0,1fr)}
  .status{padding:0}
  .tb-guide{padding:0 16px 20px}
  body[data-view="doc"] .tb-guide,body[data-view="doc"] .sh-foot{display:none}
  .link{min-height:44px;display:inline-flex;align-items:center;padding:0 8px}
  .tb-pills button{min-height:44px}
}
@media print{.tb-guide{display:none !important}}

/* ===================== v5: tool page restyle (matches Pro editor) ===================== */
:root,:root[data-theme="light"]{--desk:#FFFFFF}
body{background:#FFFFFF}
.top{align-items:center;padding-top:0;padding-bottom:14px}
.top .tb-h1{font-size:1.5rem;margin:0}
.top-note{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn.quiet{background:transparent !important;border:0 !important;box-shadow:none !important;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px;padding:0 12px}
.btn.quiet:hover{background:var(--tint) !important}
.layout{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px}
.form{gap:0}
.form fieldset{border:0 !important;box-shadow:none !important;border-radius:0 !important;background:transparent !important;padding:0 0 22px !important;margin:0 0 22px !important;border-bottom:1px solid var(--line) !important}
.form fieldset:last-of-type{border-bottom:0 !important;margin-bottom:0 !important}
.form legend{font-size:1.12rem}
.seg{box-shadow:none !important;background:var(--tint) !important;margin-bottom:16px}
.preview{background:var(--tint);border-radius:28px;padding:20px;align-self:start;position:sticky;top:16px}
.pv-tools{margin-bottom:10px}
.paper{box-shadow:0 10px 30px rgba(120,80,0,.10)}
.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--tint);border-radius:16px;padding:10px 14px;margin:0 0 18px;font-size:.92rem}
.demo-bar .btn{min-height:40px;padding:0 16px;background:#FFFFFF}
.ferr{color:var(--danger);font-size:.85rem;margin:4px 0 0}
.form input[aria-invalid="true"]{border-color:var(--danger) !important}
.pp-st{margin:6px 0 0}
.say-act{border:0;background:none;padding:0 4px;font:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;color:inherit;min-height:32px}
.chk-card{text-align:left;max-width:460px}
.chk-card h2{margin:0 0 4px}
.chk-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.chk-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--tint);border-radius:12px;padding:10px 12px;font-size:.95rem;line-height:1.45}
.chk-list li.e{background:#FDECEA;color:#8A1F16}
.chk-list .fix{border:0;background:#FFFFFF;border-radius:999px;min-height:36px;padding:0 14px;font:inherit;font-weight:600;cursor:pointer;flex-shrink:0;color:#1D1D1F}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){
  .preview{position:static;padding:10px;border-radius:20px}
  .layout{grid-template-columns:minmax(0,1fr)}
  .top{padding-bottom:6px}
  .top .tb-h1{font-size:1.15rem}
  .top .actions .btn.quiet{min-height:44px}
  .chk-list .fix{min-height:44px}
}
/* ===================== v5: print (A4, multi-page, nothing cut) ===================== */
@media print{
  @page{size:A4;margin:14mm 0 12mm}
  html,body{background:#FFFFFF !important}
  .sh-top,.sh-foot,.top,.status,.form,.mbar,.pv-tools,.tb-guide,.pdfm,.demo-bar{display:none !important}
  body[data-view] .preview,.preview{display:block !important;position:static !important;background:none !important;padding:0 !important;border-radius:0 !important}
  .layout{display:block !important;padding:0 !important;max-width:none !important}
  .fit{height:auto !important;overflow:visible !important}
  .paper-host{transform:none !important;width:auto !important}
  .paper{box-shadow:none !important;min-height:0 !important;height:auto !important;overflow:visible !important;width:auto !important;padding:0 16mm !important}
  .p-items thead{display:table-header-group}
  .p-items tr,.p-head,.p-to,.p-mid,.p-words,.p-notes,.p-sign,.p-credit{break-inside:avoid;page-break-inside:avoid}
  .p-sign{margin-top:28px !important}
}

/* ===================== v4.1: modals fit small & landscape screens (V411) ===================== */
.pdfm{overflow-y:auto;padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px))}
.pdfm-card{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.pdfm-card>*{flex-shrink:0}
.chk-card{overflow:hidden}
.chk-card .chk-list{flex:1 1 auto;flex-shrink:1;min-height:60px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.pdfm[data-state="done"] .pdfm-card{width:min(100%,420px)}
.msgbox{text-align:left;margin-top:14px;background:var(--tint);border-radius:16px;padding:12px}
.msgbox .msg-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-weight:600}
.msgbox textarea{width:100%;min-height:110px;font-size:16px;line-height:1.5;border-radius:12px;border:1.5px solid var(--line);background:var(--field);padding:10px 12px;resize:vertical}
.msgbox .btn{width:100%;margin-top:8px;min-height:44px;background:#FFFFFF !important;border:1.5px solid var(--line) !important}
.msgbox .tb-pills button{min-height:36px;padding:0 14px}
.p-bad{color:#B42318;font-weight:600}
.conflict{background:#FDECEA !important;color:#8A1F16}
.conflict .cb-act{display:flex;gap:6px;flex-wrap:wrap}
@media (max-height:560px){.pdfm-art{width:84px;height:84px;margin-bottom:4px}.pdfm-art svg{width:72px;height:72px}.pdfm-card{padding:16px 18px 18px}.pdfm h2{font-size:1.15rem}.pdfm-actions{margin-top:10px}}
@media (max-height:420px){.pdfm-art{display:none}.msgbox textarea{min-height:80px}}

/* ===================== v4.2: sample view, backup, confirm ===================== */
.pv-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-tools #zoomHint{margin-right:auto}
.pv-badge{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#FFFFFF;border:1.5px dashed var(--accent);border-radius:14px;padding:8px 12px;margin:0 0 10px;font-size:.9rem;font-weight:600}
.pv-badge .btn{min-height:36px;padding:0 14px;background:var(--tint)}
.bk-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.bk-row .btn{min-height:40px}
.btn.quiet.danger{color:var(--danger);text-decoration-color:var(--danger)}
.cf-card{text-align:left;max-width:440px}
.cf-card h2{margin:0 0 6px}
.cf-card p{color:var(--text)}
.pdfm .cf-card .pdfm-actions .btn.danger{background:#B42318;color:#fff}
#fillBar{flex-direction:column;align-items:flex-start}
#fillBar .fb-act{display:flex;gap:6px;flex-wrap:wrap}
.p-items .empty{color:#9a9a9f;font-style:italic;text-align:center;padding:18px 8px}
@media (max-width:900px),(max-width:1024px) and (max-height:500px){.pv-badge{font-size:.85rem}.bk-row .btn{min-height:44px}#btnSampleM{display:inline-flex}.pv-tools{gap:6px}.pv-tools .btn{min-height:40px;padding:0 12px;font-size:.88rem}.pv-tools #zoomHint{font-size:.85rem}}