html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* tumbill editor shell (dashboard layout) — loaded after tool.css */
body.ed{--canvas:#F6F7F9;--ed-line:#E3E5E8;--ed-line2:#D3D6DA;--ed-muted:#5F6368;--ed-ink:#1D1D1F;--ed-green:#1E7A46;--ed-tint:#FFF5DE;--ed-tint2:#FFEBC2;--rail:264px;
  margin:0;background:var(--canvas);color:var(--ed-ink);font-family:Inter,"IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;font-feature-settings:"cv11","ss01"}
body.ed .ed-app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
html.rail-collapsed body.ed .ed-app{--rail:76px}
body.ed .ed-main{min-width:0;display:flex;flex-direction:column}

/* ---------- rail ---------- */
body.ed .rail{position:sticky;top:0;height:100vh;overflow-y:auto;background:#fff;border-right:1px solid var(--ed-line);display:flex;flex-direction:column;padding:12px 12px 14px;z-index:20}
body.ed .rail-top{display:flex;align-items:center;gap:2px;height:48px;margin:0 0 8px -2px}
body.ed .rail-top .icon-btn{width:44px;height:44px}
body.ed .rail .brand{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px;text-decoration:none;color:var(--ed-ink)}
body.ed .rail .brand svg{width:30px;height:36px;flex:none}
body.ed .rail .brand .wordmark{font-size:24px}
body.ed .create{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 18px;border:1px solid #F7C76A;border-radius:16px;background:var(--ed-tint2);font:inherit;font-weight:600;font-size:15px;color:var(--ed-ink);cursor:pointer;margin:4px 0 16px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 1px 3px 1px rgba(0,0,0,.05);align-self:stretch;box-sizing:border-box;width:100%;text-align:left}
body.ed .create:hover{box-shadow:0 1px 3px rgba(0,0,0,.12),0 4px 8px 3px rgba(0,0,0,.06)}
body.ed .create svg{width:22px;height:22px}
body.ed .grp{font-size:12px;font-weight:600;color:var(--ed-muted);padding:6px 16px}
body.ed .rail .nav{list-style:none;margin:0;padding:0}
body.ed .rail .nav a,body.ed .rail .nav button{display:flex;align-items:center;gap:14px;width:100%;min-height:40px;padding:0 14px 0 16px;border:0;background:none;border-radius:999px;text-decoration:none;color:var(--ed-ink);font:inherit;font-size:14.5px;cursor:pointer;text-align:left}
body.ed .rail .nav a:hover,body.ed .rail .nav button:hover{background:#F1F3F4}
body.ed .rail .nav [aria-current="page"]{background:var(--ed-tint2);font-weight:600}
body.ed .rail .nav svg{width:20px;height:20px;flex:none}
body.ed .sep{height:1px;background:var(--ed-line);margin:10px 8px}
body.ed .rail-foot{margin-top:auto;padding-top:8px}
body.ed .flinks{display:flex;flex-wrap:wrap;gap:2px 14px;padding:2px 4px 0;font-size:11.5px;line-height:1.6}
body.ed .flinks a{color:#5F6368;text-decoration:none}
body.ed .flinks a:hover{color:var(--ed-ink);text-decoration:underline}
html.rail-collapsed body.ed .ed-app .lbl,html.rail-collapsed body.ed .ed-app .grp,html.rail-collapsed body.ed .ed-app .rail .brand{display:none}
html.rail-collapsed body.ed .rail-top{justify-content:center;margin-left:0}
html.rail-collapsed body.ed .ed-app .create{width:56px;padding:0;justify-content:center}
html.rail-collapsed body.ed .ed-app .rail .nav a,html.rail-collapsed body.ed .ed-app .rail .nav button{justify-content:center;padding:0}
body.ed .ed-scrim{display:none}

/* ---------- top bar ---------- */
body.ed .top.bar{position:sticky;top:0;z-index:15;max-width:none;margin:0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:12px;height:64px;padding:0 20px 0 12px;background:#fff;border-bottom:1px solid var(--ed-line)}
body.ed .icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ed-muted);flex:none}
body.ed .icon-btn:hover{background:#F1F3F4}
body.ed .icon-btn svg{width:22px;height:22px}
body.ed #edMenu{display:none}
body.ed .ttl{min-width:0;flex:1}
body.ed .top .tb-h1{margin:0;font-family:Inter,"IBM Plex Sans Thai",sans-serif;font-size:17px;font-weight:600;line-height:1.6;padding-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ed .top .top-note{margin:0;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ed-muted);line-height:1.4}
body.ed .top-note .dno{font-weight:600;color:var(--ed-ink)}
body.ed .top-note .dno:empty{display:none}
body.ed .top-note .sv{display:inline-flex;align-items:center;gap:5px}
body.ed .top-note .sv svg{width:13px;height:13px;color:var(--ed-green)}
body.ed .top-note .sv[data-st="saving"] svg{opacity:.35}
body.ed .top-note .sv[data-st="failed"],body.ed .top-note .sv[data-st="conflict"]{color:#B42318;font-weight:600}
body.ed .top-note .sv[data-st="failed"] svg,body.ed .top-note .sv[data-st="conflict"] svg{display:none}
body.ed .top-note .sv[data-st="failed"]::before,body.ed .top-note .sv[data-st="conflict"]::before{content:"!";display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#B42318;color:#fff;font-size:10px;font-weight:700}
body.ed .top .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
body.ed #btnNew{display:none}
body.ed .top .btn{height:40px;min-height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14px}
body.ed .top .btn.quiet{border:1px solid var(--ed-line2) !important;background:#fff !important;text-decoration:none !important}
body.ed .top .btn.quiet:hover{background:#F8F9FA !important}
body.ed .status{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:6px 24px 0;min-height:0}
body.ed .status:empty{padding:0}

/* ---------- layout ---------- */
body.ed .layout{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:20px 24px 40px;display:grid;grid-template-columns:minmax(340px,420px) minmax(0,900px);justify-content:center;gap:24px;align-items:start}
@media (min-width:1500px){body.ed .layout{grid-template-columns:440px minmax(0,900px)}}
@media (min-width:901px) and (max-width:1200px){body.ed .layout{grid-template-columns:minmax(320px,380px) minmax(0,900px);padding:16px 16px 40px}body.ed .notices,body.ed .status{padding-left:16px;padding-right:16px}}
body.ed .form{gap:12px}
body.ed .form > .seg{display:none}
body.ed .preview{top:calc(env(safe-area-inset-top,0px) + 84px)}

/* ---------- sections ---------- */
body.ed .panel{background:#fff;border:1px solid var(--ed-line);border-radius:12px;overflow:hidden}
body.ed .sec{border-bottom:1px solid var(--ed-line)}
body.ed .sec:last-child{border-bottom:0}
body.ed .sec>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;min-height:64px}
body.ed .sec>summary::-webkit-details-marker{display:none}
body.ed .sec>summary:hover{background:#FAFAFB}
body.ed .sec[open]>summary{min-height:52px;padding-bottom:4px}
body.ed .shead{min-width:0;flex:1}
body.ed .shead b{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
body.ed .ssum{display:block;font-size:13px;color:var(--ed-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ed .sec[open] .ssum{display:none}
body.ed .ok{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#E6F4EA;color:var(--ed-green);align-items:center;justify-content:center;flex:none}
body.ed .ok[hidden]{display:none !important}
body.ed .ok svg{width:11px;height:11px}
body.ed .chev{color:var(--ed-muted);flex:none;width:24px;height:24px;padding:5px;margin-right:-2px;border-radius:50%;transition:transform .2s,background .15s}
body.ed .sec>summary:hover .chev{background:#EEF0F2;color:var(--ed-ink)}
body.ed .sec[open] .chev{transform:rotate(180deg)}
body.ed .sbody{padding:0 20px 20px;min-width:0}
body.ed .sbody > .hint:first-child{margin-top:0}
body.ed .tax{margin-top:8px;padding-top:4px}
body.ed .ups{display:flex;flex-direction:column;gap:6px}
body.ed .ups label[for="sLogo"],body.ed .ups label[for="sSig"]{margin-top:6px}

/* fields */
body.ed .form label{font-size:12.5px;color:var(--ed-muted);margin:12px 0 4px;font-weight:500}
body.ed .form input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]),body.ed .form select,body.ed .form textarea{border:1px solid var(--ed-line2) !important;border-radius:8px !important;background:#fff !important;min-height:44px;padding:9px 12px;font-size:15px;box-shadow:none !important}
body.ed .form textarea{min-height:72px}
/* focus + error states win over the base field style */
body.ed .form input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]):focus,body.ed .form select:focus,body.ed .form textarea:focus{border-color:#E8961A !important;box-shadow:0 0 0 2px rgba(245,165,36,.55) !important;outline:none}
body.ed .form input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file])[aria-invalid="true"],body.ed .form select[aria-invalid="true"],body.ed .form textarea[aria-invalid="true"]{border-color:#B42318 !important}
body.ed .form input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file])[aria-invalid="true"]:focus,body.ed .form textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 2px rgba(180,35,24,.35) !important}
body.ed :focus-visible{outline:2px solid #A35F00;outline-offset:2px}
body.ed .form input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]):focus-visible,body.ed .form select:focus-visible,body.ed .form textarea:focus-visible{outline:none}
body.ed .tb-pills button{border:1px solid var(--ed-line2);border-radius:8px;min-height:36px;padding:0 14px;font-weight:500;font-size:13.5px;background:#fff}
body.ed .tb-pills button[aria-pressed="true"]{background:var(--ed-tint2);border-color:#F5A524;font-weight:600}
body.ed .form label:has(> input[type="radio"]){border-width:1px !important;border-color:var(--ed-line2) !important;border-radius:8px !important;min-height:40px !important;margin:0 !important}
body.ed .form label:has(> input[type="radio"]:checked){background:var(--ed-tint2) !important;border-color:#F5A524 !important}
body.ed .tb-upl{border-width:1px;border-radius:8px;min-height:44px;font-weight:500;font-size:14px;padding:0 16px}

/* items: description on its own row, then qty / unit / price */
body.ed .item{display:block;padding-top:12px;margin-top:12px}
body.ed .item-head{font-size:12px}
body.ed .item > label{margin-top:4px}
body.ed .item-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:8px;margin-top:8px}
body.ed .item-grid label{margin-top:0}
body.ed .item input[data-f="qty"],body.ed .item input[data-f="price"]{text-align:right}
body.ed .item:not(:first-child) > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.ed .item:not(:first-child) .item-grid label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 8) delete with a trash icon */
body.ed .item-head [data-del]{display:inline-flex;align-items:center;gap:5px}
body.ed .item-head [data-del]::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E") center/contain no-repeat}
/* full-width buttons never spill past the panel */
body.ed .form .btn,body.ed .form .tb-upl,body.ed .form .add,body.ed .form .convert{box-sizing:border-box;max-width:100%}

/* next step + guide */
body.ed .next:not(:has(button:not([hidden]))){display:none}
body.ed .next{background:#fff;border:1px solid var(--ed-line);border-radius:12px;padding:14px 18px}
body.ed .next .convert{margin-top:0}
body.ed .tb-guide{max-width:none;margin:0;padding:4px 4px 0;font-size:13px;color:var(--ed-muted)}

/* notices: one slim line above both columns */
body.ed .notices{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:16px 24px 0}
body.ed .notices:not(:has(> .demo-bar:not([hidden]))){display:none}
body.ed .notices .demo-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:0;padding:8px 16px;border-radius:10px;font-size:13.5px;min-height:0;box-shadow:none}
body.ed .notices .demo-bar .btn{min-height:0;height:auto;padding:0;border:0 !important;background:none !important;box-shadow:none !important;font-size:13.5px;font-weight:600;text-decoration:underline;text-decoration-color:#E8961A;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
body.ed .notices .demo-bar .cb-act,body.ed .notices .demo-bar .fb-act{display:inline-flex;gap:14px;margin-left:auto}
body.ed .notices .demo-bar > .btn{margin-left:auto}
/* preview: buttons float on the paper's top-right corner */
body.ed .preview{position:sticky}
body.ed .pv-tools{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:6px;padding:0;margin:0}
body.ed #zoomHint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.ed .pv-tools .btn{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1px solid var(--ed-line2) !important;background:rgba(255,255,255,.92) !important;box-shadow:0 1px 3px rgba(0,0,0,.12) !important;font-size:0 !important;color:var(--ed-ink);display:grid;place-items:center;cursor:pointer}
body.ed .pv-tools .btn:hover{background:#fff !important;border-color:#F5A524 !important}
body.ed .pv-tools .btn[aria-pressed="true"]{background:var(--ed-tint2) !important;border-color:#F5A524 !important}
body.ed .pv-tools .btn::before{content:"";width:18px;height:18px;background:currentColor}
body.ed #btnSample::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
body.ed #btnZoom::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat}
body.ed #btnZoom[aria-pressed="true"]::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M8 11h6'/%3E%3C/svg%3E") center/contain no-repeat}
body.ed .pv-badge{margin-bottom:10px}

/* backup modal */
body.ed .bk-card{width:min(100%,460px);text-align:left}
body.ed .bk-card .bk-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}


/* fixes */
body.ed .form input,body.ed .form select,body.ed .form textarea{box-sizing:border-box;max-width:100%}
body.ed .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.ed .sbody>*,body.ed .sbody div{min-width:0}
body.ed .preview{background:transparent !important;box-shadow:none !important;border:0 !important;padding:0 !important;border-radius:0 !important}
body.ed .paper-host .paper{box-shadow:0 1px 3px rgba(60,64,67,.15),0 4px 12px rgba(60,64,67,.12)}


/* radio groups as compact chips */
body.ed .form .choices{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:4px}
body.ed .form label:has(> input[type="radio"]){display:inline-flex !important;align-items:center;gap:6px;padding:0 14px !important;min-height:36px !important;font-size:13.5px;margin:0 !important;color:var(--ed-ink)}
body.ed .form label:has(> input[type="radio"])::before{position:static !important;margin:0 !important;width:0 !important;height:14px !important;border:0 !important;background:none !important}
body.ed .form label:has(> input[type="radio"]:checked){font-weight:600}
body.ed .form label:has(> input[type="radio"]:checked)::before{width:14px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231D1D1F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat !important}
body.ed .choices.fonts .fs{font-size:15px;margin-right:2px}

/* ---------- mobile ---------- */
@media (max-width:900px),(max-width:1024px) and (max-height:500px){
  body.ed .ed-app,html.rail-collapsed body.ed .ed-app{grid-template-columns:minmax(0,1fr);--rail:264px}
  body.ed #edMenu{display:grid}
  body.ed .notices{padding:12px 12px 0}
  body.ed .form input,body.ed .form select,body.ed .form textarea,body.ed .item input{font-size:16px !important}
  body.ed .rail{position:fixed;inset:0 auto 0 0;width:288px;height:100%;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 24px rgba(0,0,0,.2);padding-top:calc(12px + env(safe-area-inset-top,0px));z-index:40}
  body.ed .ed-app.open .rail{transform:none}
  body.ed .ed-app.open .ed-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:35}
  html.rail-collapsed body.ed .ed-app .lbl,html.rail-collapsed body.ed .ed-app .grp{display:revert}
  html.rail-collapsed body.ed .ed-app .rail .brand{display:flex}
  html.rail-collapsed body.ed .rail-top{justify-content:flex-start;margin-left:-2px}
  html.rail-collapsed body.ed .create{width:100%;padding:0 22px 0 18px;justify-content:flex-start}
  html.rail-collapsed body.ed .rail .nav a,html.rail-collapsed body.ed .rail .nav button{justify-content:flex-start;padding:0 14px 0 16px}
  body.ed .top.bar{height:56px;padding:0 8px;top:env(safe-area-inset-top,0px)}
  body.ed .top .tb-h1{font-size:15px}
  body.ed .layout{grid-template-columns:minmax(0,1fr);padding:12px 12px 96px;gap:12px}
  body.ed .preview{position:relative;top:auto}
  body.ed .pv-tools{position:static;justify-content:flex-end;margin:0 0 8px}
  body.ed .pv-tools .btn{width:40px;height:40px;min-height:40px}
}
@media (prefers-reduced-motion:reduce){body.ed .rail,body.ed .chev{transition:none}}

/* ---------- print: paper only ---------- */
@media print{
  body.ed .rail,body.ed .ed-scrim,body.ed .notices,body.ed .status,body.ed .top.bar,body.ed .form,body.ed .mbar,body.ed .pv-tools,body.ed .pv-badge{display:none !important}
  body.ed .ed-app,body.ed .ed-main{display:block}
  body.ed .layout{display:block;max-width:none;padding:0;margin:0}
  body.ed .preview{position:static}
}