/* ============================================================================
   seller-tools.css — module-private styles for modules/product/pages/seller-tools.html
   ----------------------------------------------------------------------------
   De-inlined (go-live combine-pass · 2026-07-19) from the page's two <style> blocks:
     1) PT Studio (DS v22) fabric.js workspace — MOBILE + desktop-tool layout is the
        Source-of-Truth; look is byte-equivalent (unchanged).
     2) pf360 phone-frame block (Owner 2026-07-14) — kept verbatim.
   Trimmed dead CSS (verified unreferenced in markup + JS): .acard/.ah/.aic/.anm/
   .aprice/.ad/.abtn/.ainote (old AI-card component), .navtab/.ntlbl, .logo .tagpv,
   .pbtns/.pico. Removing them changes nothing visually (no element ever matched).
   NOTE: this page is the documented NO-SHELL full-screen exception
   (SELLER-TOOLS-CDN-NOFRAME) — light-2026 shell layer in seller-tools.desktop.css.
   Load AFTER shared tokens/layout/components/utilities so page tokens win.
   ============================================================================ */

:root{--sun:#FF7A1A;--sun-deep:#EF5F06;--cream:#FFF9F4;--cream-2:#FFEFE2;--paper:#fff;
--ink:#2A2016;--ink-2:#6E5C4C;--muted:#7C6E5F;--line:#F5E3D4;--leaf:#1E9E6A;--leaf-soft:#E6F6EE;
--red:#D9534F;--red-soft:#FDEBEA;
--fd:'Mitr',sans-serif;--fb:'Prompt',sans-serif;--sh:0 12px 34px -22px rgba(160,80,10,.5)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--fb);background:#EFE9E2;color:var(--ink);overflow:hidden}
.num{font-family:var(--fd)}
/* ===== layout ===== */
.app{display:grid;grid-template-rows:54px 1fr;grid-template-columns:82px 1fr var(--panelW,292px);height:100vh;height:100dvh;
grid-template-areas:"top top top" "rail stage panel"}
.app.panel-min{--panelW:0px}
.app.panel-min .wspanel{transform:translateX(100%)}

/* ===== topbar ===== */
.top{grid-area:top;display:flex;align-items:center;gap:8px;background:#fff;border-bottom:1px solid var(--line);padding:0 14px;z-index:20;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.top::-webkit-scrollbar{height:0;display:none}
.top>*{flex-shrink:0}
/* ปุ่มเมนู (rail toggle) ตรึงซ้ายเสมอ ขณะแถบบนเลื่อน */
.top .railtog{position:sticky;left:0;z-index:3;background:#fff}
.logo{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--sun-deep);display:flex;gap:6px;align-items:center;flex:none;white-space:nowrap}
.jobname{border:1.5px solid transparent;border-radius:9px;padding:6px 10px;font-family:var(--fd);font-size:12.5px;color:var(--ink);min-width:110px;max-width:190px;outline:none;background:var(--cream)}
.jobname:hover{background:var(--cream-2)}
.jobname:focus{border-color:var(--sun);background:#fff}
.tsep{width:1px;height:22px;background:var(--line);flex:none;margin:0 2px}
.tgrp{display:inline-flex;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:2px;gap:1px}
.tbtn{border:1px solid transparent;background:transparent;border-radius:8px;height:30px;min-width:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-family:var(--fd);font-size:11.5px;color:var(--ink-2)}
.tbtn:hover{background:#fff;color:var(--sun-deep);box-shadow:0 1px 4px -1px rgba(160,80,10,.25)}
.tbtn:disabled{opacity:.32;cursor:default}
.tbtn:disabled:hover{background:transparent;box-shadow:none;color:var(--ink-2)}
.tbtn svg{width:15px;height:15px}
.tsolo{border:1px solid var(--line);background:#fff;border-radius:10px;height:34px;min-width:34px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-family:var(--fd);font-size:11.5px;color:var(--ink-2)}
.tsolo:hover{border-color:var(--sun);color:var(--sun-deep)}
.zoomv{font-family:var(--fd);font-size:11.5px;color:var(--ink-2);min-width:42px;text-align:center;font-weight:500}
.coin{margin-left:auto;display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#FFF6D6,#FFE79A 55%,#FFD23F);border:1.5px solid #F2B705;border-radius:99px;padding:6px 15px;font-family:var(--fd);font-weight:700;font-size:12.5px;color:#8A5200;box-shadow:0 3px 10px -4px rgba(242,183,5,.55),inset 0 1px 0 rgba(255,255,255,.65)}
.coin .coinic{flex:none;filter:drop-shadow(0 1px 1.5px rgba(160,110,0,.4))}
.coin small{font-weight:500;font-size:9.5px;color:#A66A00}
.coin.pay-bump{animation:coinBump .42s ease}
@keyframes coinBump{0%{transform:scale(1)}30%{transform:scale(1.11)}60%{transform:scale(.97)}100%{transform:scale(1)}}
.coin{position:relative}
.coinfly{position:absolute;left:50%;top:2px;transform:translateX(-50%);font-family:var(--fd);font-weight:700;font-size:12px;color:#D9534F;pointer-events:none;opacity:0;white-space:nowrap;text-shadow:0 1px 3px rgba(255,255,255,.8)}
.coinfly.go{animation:coinFly 1s ease forwards}
@keyframes coinFly{0%{opacity:0;transform:translate(-50%,4px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
.dl{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;border:none;border-radius:11px;height:36px;padding:0 17px;font-family:var(--fd);font-weight:600;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:0 6px 16px -8px rgba(239,95,6,.7)}
.dl:hover{filter:brightness(1.05)}
.wspanel{transition:transform .22s ease}
.panel-toggle svg,.railtog svg{width:16px;height:16px}
.railtog,.drawer-close{display:none}
.drawer-close{position:absolute;right:8px;top:7px;z-index:5;border:none;background:#4A4A4A;color:#fff;width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:13px}
.scrim{position:fixed;inset:0;background:rgba(20,12,4,.45);z-index:16;display:none}
.scrim.show{display:block}
.mbar{display:none}
.mbtn{border:none;background:transparent;color:var(--ink-2);width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.mbtn svg{width:20px;height:20px}
.mbtn:active{background:var(--cream-2)}
.mbtn.mdl{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff}
.mbsep{width:1px;height:22px;background:var(--line);flex:none}
.mzoom{font-family:var(--fd);font-size:11px;color:var(--ink-2);min-width:38px;text-align:center;flex:none}
.asheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 40px -14px rgba(0,0,0,.35);transform:translateY(100%);transition:transform .24s ease;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.asheet.show{transform:translateY(0)}
.asheet-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--fd);font-weight:600;font-size:13px;padding:14px 16px 10px;color:var(--ink)}
.asheet-x{border:none;background:var(--cream-2);width:28px;height:28px;border-radius:8px;cursor:pointer;color:var(--ink-2)}
.asheet-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;padding:4px 16px 8px}
.asheet-g button{display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 6px;font-family:var(--fb);font-size:11px;color:var(--ink-2);cursor:pointer}
.asheet-g button:active{background:var(--cream)}
.asheet-g button svg{width:20px;height:20px}
/* ===== tool rail ===== */
.rail{grid-area:rail;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;z-index:15;overflow-y:auto;overflow-x:hidden}
.rtool{width:70px;min-height:50px;border:1px solid transparent;border-radius:11px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;cursor:pointer;color:var(--ink-2);position:relative;flex:none}
.rtool:hover{background:var(--cream)}
.rtool.on{background:var(--cream-2);border-color:var(--sun);color:var(--sun-deep)}
.rtool svg{width:18px;height:18px}
.rtool .lbl{font-family:var(--fd);font-size:8.5px;line-height:1.15;text-align:center;white-space:nowrap}
.rtool .emo{font-size:17px;line-height:1;filter:grayscale(1) sepia(1) saturate(6) hue-rotate(-18deg)}
.rtool.pay{color:var(--sun-deep);background:var(--cream)}
.rtool.pay:hover{background:var(--cream-2)}
.rtool.pay .lbl{font-weight:600}
.rsep{width:52px;height:1px;background:var(--line);margin:3px 0;flex:none}
/* ===== stage ===== */
.stage{grid-area:stage;position:relative;overflow:auto;display:grid;place-items:center;
background:repeating-conic-gradient(#E7E0D7 0 25%,#EFE9E2 0 50%) 0 0/22px 22px}
.stage.scanning{overflow:hidden!important}
.canwrap{box-shadow:0 18px 60px -24px rgba(80,40,5,.45);background:#fff;margin:34px}
/* พื้นโปร่ง = ลายตารางหมากรุก (แบบโปรแกรมแต่งภาพ · DS v22.35) */
.canwrap.transparent{background:#fff;background-image:linear-gradient(45deg,#d4d4d4 25%,transparent 25%),linear-gradient(-45deg,#d4d4d4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4d4d4 75%),linear-gradient(-45deg,transparent 75%,#d4d4d4 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
.topts{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:12;display:none;align-items:center;gap:10px;background:#3A3A3A;border:1px solid #262626;border-radius:12px;padding:8px 13px;color:#D8D4CF;font-size:11px;box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.topts.show{display:flex}
.topts label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.topts input[type=range]{width:90px;accent-color:var(--sun)}
.topts input[type=color]{width:30px;height:24px;border:1px solid #5A5A5A;border-radius:6px;background:#262626;padding:1px;cursor:pointer}
.topts select{border:1px solid #5A5A5A;border-radius:6px;padding:4px 6px;background:#262626;color:#E8E2DA;font-family:var(--fb);font-size:11px}
.topts .num{min-width:24px;text-align:right}
.pgrid{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.psub{font-family:var(--fd);font-size:9.5px;color:#9A948C;letter-spacing:.3px;margin:11px 0 6px;padding-top:9px;border-top:1px dashed #4A4A4A}
.psub:first-child{margin-top:0;border-top:none;padding-top:0}
.aiscan{position:absolute;z-index:14;pointer-events:none;border:2px solid var(--sun);border-radius:12px;box-shadow:0 0 0 9999px rgba(18,11,4,.32),0 0 30px -2px rgba(239,95,6,.85),inset 0 0 20px -6px rgba(255,138,42,.6);display:none;animation:scanPulse 2s ease-in-out infinite}
.aiscan.show{display:block}
.aiscan .beam{position:absolute;left:0;right:0;height:34%;background:linear-gradient(180deg,rgba(255,138,42,0) 0%,rgba(255,138,42,.55) 50%,rgba(255,138,42,0) 100%);animation:aiBeam 1.15s ease-in-out infinite}
.aiscan .corner{position:absolute;width:15px;height:15px;border:2.5px solid var(--sun-deep)}
.aiscan .c1{left:-2px;top:-2px;border-right:none;border-bottom:none}
.aiscan .c2{right:-2px;top:-2px;border-left:none;border-bottom:none}
.aiscan .c3{left:-2px;bottom:-2px;border-right:none;border-top:none}
.aiscan .c4{right:-2px;bottom:-2px;border-left:none;border-top:none}
/* การ์ดข้อมูลลอยใต้กรอบสแกน (พรีเมียม) */
.aiscan .scancard{position:absolute;left:50%;bottom:-70px;transform:translateX(-50%);display:flex;align-items:center;gap:11px;min-width:230px;max-width:92vw;
  background:linear-gradient(135deg,rgba(46,32,20,.94),rgba(32,22,13,.94));backdrop-filter:blur(10px);
  border:1px solid rgba(255,138,42,.4);border-radius:15px;padding:11px 15px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.aiscan .scdot{width:9px;height:9px;border-radius:99px;background:var(--sun);flex:none;box-shadow:0 0 0 0 rgba(255,122,26,.7);animation:scDot 1.3s ease-out infinite}
.aiscan .sctxt{flex:1;min-width:0}
.aiscan .sclbl{font-family:var(--fd);font-size:11.5px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aiscan .scsub{font-family:var(--fd);font-size:10px;color:#C9A98A;margin-top:1px;display:flex;align-items:center;gap:5px}
.aiscan .scsub::before{content:"⏱";font-size:9px;opacity:.8}
.aiscan .scpct{font-family:var(--fd);font-weight:700;font-size:26px;line-height:1;color:#fff;flex:none;letter-spacing:-.5px;background:linear-gradient(180deg,#FFD9A8,#FF8A2A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.aiscan .scpct small{font-size:13px;font-weight:600;opacity:.8}
/* แถบ progress ในกรอบ (ล่างสุด) */
.aiscan .scanbar{position:absolute;left:10px;right:10px;bottom:10px;height:8px;border-radius:99px;background:rgba(0,0,0,.28);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.aiscan .scanfill{position:relative;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#FFB35C,var(--sun),var(--sun-deep));box-shadow:0 0 12px -1px rgba(255,138,42,.9);transition:width .25s cubic-bezier(.4,0,.2,1);overflow:hidden}
.aiscan .scshine{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:scShine 1.3s ease-in-out infinite}
@keyframes scanPulse{0%,100%{box-shadow:0 0 0 9999px rgba(18,11,4,.32),0 0 26px -4px rgba(239,95,6,.7),inset 0 0 20px -6px rgba(255,138,42,.5)}50%{box-shadow:0 0 0 9999px rgba(18,11,4,.32),0 0 40px 0 rgba(239,95,6,.95),inset 0 0 26px -4px rgba(255,138,42,.75)}}
@keyframes scDot{0%{box-shadow:0 0 0 0 rgba(255,122,26,.7)}70%{box-shadow:0 0 0 8px rgba(255,122,26,0)}100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
@keyframes scShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(200%)}}
.aiscan-clip{position:absolute;inset:0;border-radius:11px;overflow:hidden;pointer-events:none}
.aiscan .aigrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,122,26,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,122,26,.16) 1px,transparent 1px);background-size:20px 20px}
@keyframes aiBeam{0%{top:-34%}100%{top:100%}}
.cropbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:18;display:none;align-items:center;gap:9px;background:#2A2016;color:#fff;border-radius:12px;padding:8px 10px 8px 14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
.cropbar.show{display:flex}
.cropbar-t{font-family:var(--fb);font-size:11.5px;opacity:.9}
.cropratios{display:flex;gap:4px}
.cropratios button{border:1px solid #4A4A4A;background:#3A3A3A;color:#D8D4CF;border-radius:7px;padding:5px 9px;font-family:var(--fd);font-size:11px;cursor:pointer}
.cropratios button.on{background:var(--sun-deep);color:#fff;border-color:var(--sun-deep)}
.cropbar-ok,.cropbar-x{border:none;border-radius:9px;padding:7px 13px;font-family:var(--fd);font-size:12px;font-weight:600;cursor:pointer}
.cropbar-ok{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff}
.cropbar-x{background:#4A4A4A;color:#E8E4DF}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(42,32,22,.86);color:#fff;font-size:10.5px;border-radius:99px;padding:6px 14px;pointer-events:none;white-space:nowrap;z-index:10}
/* ===== right panel ===== */
.wspanel{grid-area:panel;background:#323232;border-left:1px solid #262626;display:flex;flex-direction:column;min-height:0;z-index:15;color:#D8D4CF}
.psec{display:flex;flex-direction:column;min-height:70px;overflow:hidden}
#secTop{height:46%;flex:none}
.psec.grow{flex:1;min-height:110px}
.psh{font-family:var(--fd);font-weight:500;font-size:10.5px;color:#B8B2AA;padding:9px 12px 7px;border-bottom:1px solid #262626;background:#3A3A3A;flex:none;letter-spacing:.3px}
.psb{flex:1;overflow-y:auto;padding:9px 9px;min-height:0}
.psb::-webkit-scrollbar{width:9px}
.psb::-webkit-scrollbar-thumb{background:#4A4A4A;border-radius:99px;border:2px solid #323232}
.pdiv{height:8px;flex:none;cursor:ns-resize;background:#2B2B2B;position:relative;touch-action:none}
.pdiv::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:3px;border-radius:99px;background:#4A4A4A}
.pdiv:hover::after,.pdiv.drag::after{background:var(--sun)}
.pdiv.drag{background:#3A3A3A}
/* layers */
.lrow{display:flex;align-items:center;gap:6px;border:1px solid transparent;border-bottom:1px solid #2B2B2B;border-radius:0;padding:6px 6px;margin:0;cursor:pointer;background:transparent}
.lrow:hover{background:#3A3A3A}
.lrow.on{background:#4E4A44;border-color:#5A554E}
.lrow .leye{border:none;background:transparent;cursor:pointer;color:#B8B2AA;width:22px;height:22px;display:grid;place-items:center;border-radius:5px;flex:none;border-right:1px solid #2B2B2B;margin-right:2px}
.lrow .leye:hover{color:#fff}
.lrow .lic{width:30px;height:24px;border-radius:4px;background:#4A4A4A;border:1px solid #5A5A5A;display:grid;place-items:center;color:#E8E2DA;flex:none;font-size:12px}
.lrow .lnm{flex:1;font-size:11.5px;color:#D8D4CF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmini{border:none;background:transparent;cursor:pointer;color:#9A948C;width:21px;height:21px;display:grid;place-items:center;border-radius:5px;flex:none}
.lmini:hover{background:#4A4A4A;color:#fff}
.lempty{text-align:center;color:#8A847C;font-size:11px;padding:16px 6px;border:1.5px dashed #4A4A4A;border-radius:10px}
/* props */
.prow{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px;font-size:11.5px;color:#C8C2BA}
.prow input[type=color]{width:38px;height:26px;border:1px solid #5A5A5A;border-radius:6px;background:#3A3A3A;padding:1px;cursor:pointer}
.prow input[type=range]{flex:1;accent-color:var(--sun)}
.prow input[type=number],.prow select{border:1px solid #5A5A5A;border-radius:6px;padding:5px 7px;font-family:var(--fb);font-size:11.5px;width:74px;outline:none;background:#262626;color:#E8E2DA}
/* toast / cfm / modal */
.toastx{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(12px);background:#2A2016;color:#fff;font-size:12px;border-radius:12px;padding:11px 17px;opacity:0;pointer-events:none;transition:.22s;z-index:600;max-width:82vw;text-align:center}
.toastx.show{opacity:1;transform:translateX(-50%)}
.cfm{position:fixed;inset:0;background:rgba(30,15,5,.5);z-index:500;display:none;align-items:center;justify-content:center;padding:18px}
.cfm.show{display:flex}
.cfmbox{background:#fff;border-radius:22px;padding:24px 22px 20px;width:min(370px,92vw);text-align:center;box-shadow:0 24px 60px -20px rgba(120,60,10,.5),0 2px 8px -2px rgba(0,0,0,.1);animation:cfmPop .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes cfmPop{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.cfmbox .ci{width:60px;height:60px;margin:0 auto 4px;border-radius:18px;background:linear-gradient(135deg,var(--cream-2),#FFD9B0);display:grid;place-items:center;font-size:30px;box-shadow:0 8px 20px -8px rgba(239,95,6,.5),inset 0 1px 0 rgba(255,255,255,.7)}
.cfmbox h4{font-family:var(--fd);font-size:16.5px;font-weight:600;margin:10px 0 4px;color:var(--ink)}
.cfmbox .cb{font-size:12px;color:var(--ink-2);line-height:1.6}
.cfmbox .fi{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font-family:var(--fb);font-size:12.5px;outline:none;margin-top:9px}
.cfmbox .fi:focus{border-color:var(--sun)}
.aicfm{text-align:left;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:10px;background:var(--paper)}
.aicfm-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.aicfm-row:last-child{border-bottom:none}
.aicfm-row>span{display:inline-flex;align-items:center;gap:7px}
.aicfm-row>span::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--sun);opacity:.5}
.aicfm-row b{color:var(--ink);font-family:var(--fd);font-size:13px}
.aicfm-bal{background:linear-gradient(90deg,var(--cream),#FFF6EC)}
.aicfm-bal>span::before{background:var(--leaf)}
.aicfm-coin{display:inline-flex;align-items:center}
.coinchip{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#FFF6D6,#FFE79A);border:1px solid #F2B705;border-radius:99px;padding:3px 10px 3px 6px;font-family:var(--fd);font-weight:700;font-size:12px;color:#8A5200}
.aicfm-note{font-size:10px;color:var(--muted);margin-top:8px;text-align:center}
.psub-btn{width:100%;margin-top:8px;border:1.5px solid #4A4A4A;background:#3A3A3A;color:#E8E4DF;border-radius:9px;padding:9px;font-family:var(--fd);font-size:11.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.psub-btn:hover{border-color:var(--sun);color:var(--sun)}
.fontpick{position:relative;width:100%}
.fontpick-cur{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid #4A4A4A;background:#3A3A3A;color:#E8E4DF;border-radius:9px;padding:7px 11px;cursor:pointer;text-align:left}
.fontpick-cur>span:first-child{font-size:15px;line-height:1.2}
.fontpick-nm{font-family:var(--fd);font-size:9.5px;color:#7c6e5f}
.fontpick-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:280px;overflow-y:auto;background:#2E2E2E;border:1px solid #4A4A4A;border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);padding:4px}
.fontpick-list.open{display:block}
.fontpick-it{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:none;background:transparent;color:#E8E4DF;border-radius:8px;padding:8px 10px;cursor:pointer;text-align:left}
.fontpick-it:hover{background:#3E3E3E}
.fontpick-it.on{background:rgba(239,95,6,.22)}
.fp-prev{font-size:16px;line-height:1.25}
.fp-nm{font-family:var(--fd);font-size:9px;color:#7c6e5f}
.brushlab{display:flex;flex-direction:column;gap:5px;align-items:flex-start!important}
.brushrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.brushbtn{display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid #4A4A4A;background:#333;border-radius:9px;padding:6px 4px 4px;cursor:pointer}
.brushbtn:hover{border-color:var(--sun)}
.brushbtn.on{border-color:var(--sun);background:rgba(239,95,6,.18)}
.brushbtn .bsmp{display:block}
.brushnm{font-family:var(--fd);font-size:9.5px;color:#C8C2BA}
.cfmrow{display:flex;gap:9px;margin-top:18px}
.cfmrow button{flex:1;border-radius:13px;padding:12px;font-family:var(--fd);font-weight:600;font-size:13px;cursor:pointer;transition:.14s}
.cfmgo{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#fff;border:none;box-shadow:0 8px 20px -8px rgba(239,95,6,.75)}
.cfmgo:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cfmno{background:#fff;color:var(--ink-2);border:1.5px solid var(--line)}
.cfmno:hover{background:var(--cream);border-color:var(--muted)}
.cfmgo:active,.cfmno:active{transform:translateY(0)}
@media(max-width:900px){
  .app{grid-template-columns:0 1fr 0}
  .rail{position:fixed;left:0;top:54px;bottom:52px;width:82px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:6px 0 24px -10px rgba(0,0,0,.4);z-index:18}
  .app.rail-open .rail{transform:translateX(0)}
  .wspanel{position:fixed;right:0;top:54px;bottom:0;width:min(300px,86vw);transform:translateX(100%);z-index:18}
  .app.panel-open .wspanel{transform:translateX(0)}
  .app.panel-min .wspanel{transform:translateX(100%)}
  .railtog,.drawer-close{display:inline-flex;align-items:center;justify-content:center}
  .panel-toggle{display:none}
  .jobname{min-width:70px;max-width:110px}
  .dllbl{display:none}
  .dl{padding:0 12px}
  .top{gap:6px;padding:0 8px}
  .tgrp{display:none}
  /* bottom bar มือถือ: รวม undo/zoom/จัดเรียง/วางรูป/ดาวน์โหลด ที่ถูกซ่อนจาก topbar */
  .mbar{display:flex;align-items:center;gap:4px;position:fixed;left:0;right:0;bottom:0;z-index:19;background:#fff;border-top:1px solid var(--line);padding:5px 10px calc(5px + env(safe-area-inset-bottom));overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mbar::-webkit-scrollbar{height:0}
  .mbtn,.mbsep,.mzoom{flex:0 0 auto}
  .stage{padding-bottom:52px}
  .stage.scanning{overflow:hidden}
  /* แถบตั้งค่าพู่กันไม่หลุดจอแคบ */
  .topts{left:8px;right:8px;transform:none;flex-wrap:wrap;gap:7px 12px;max-width:none}
}
@media(max-width:560px){
  .coin small{display:none}
  .jobname{display:none}
}

/* NO phone-frame: PT Studio is a full-screen desktop workspace (canvas tool) — the pf360 430px
   frame block was wrongly injected here during go-live and crammed the whole workspace into a
   phone column on desktop. Removed. Mobile is handled by the @media(max-width:900px/560px)
   rules above, which collapse the rail/panel and show the .mbar bottom bar. */