:root{--ink:#f4f7fb;--muted:#f4f7fb9e;--faint:#f4f7fb61;--clay:#e08a68;--mint:#8ee0c8;--danger:#f0a199;--glass:#ffffff1a;--glass-2:#ffffff29;--stroke:#ffffff47;--inset:#fff6;--blur:28px;--r:18px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--dock-h:calc(64px + env(safe-area-inset-bottom))}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;background:#0e1522;min-height:100dvh}.sky{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(40px);border-radius:50%;position:absolute}.o1{opacity:.55;background:#3a5b8a;width:52vw;height:52vw;top:-18vw;left:-12vw}.o2{opacity:.42;background:#6b4a7a;width:40vw;height:40vw;top:10vh;right:-8vw}.o3{opacity:.35;background:#2f7a6a;width:34vw;height:34vw;bottom:-16vw;left:28vw}.shell{z-index:1;min-height:100dvh;padding:12px 12px calc(12px + env(safe-area-inset-bottom));flex-direction:column;gap:10px;display:flex;position:relative}.glass{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.45);backdrop-filter:blur(var(--blur)) saturate(1.45);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 var(--inset), 0 12px 40px #080c1447}.top{padding:8px 10px 8px 14px;padding-left:max(14px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right));border-radius:999px;align-items:center;gap:8px;display:flex}.brand{letter-spacing:-.02em;white-space:nowrap;font-size:15px;font-weight:650}.priv{font-family:var(--mono);color:var(--mint);white-space:nowrap;background:#8ee0c81f;border:1px solid #8ee0c859;border-radius:999px;padding:3px 10px;font-size:11px}.grow{flex:1}button{font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:0}.cta{background:var(--clay);color:#fff;border-radius:12px;min-height:44px;padding:10px 14px;font-size:13px;font-weight:650;box-shadow:0 8px 20px #e08a6847}.ghost{color:var(--muted);min-height:44px;padding:8px 10px;font-size:13px}.cta:disabled,.ghost:disabled,.verb:disabled{opacity:.4;cursor:not-allowed}.stage{border-radius:var(--r);flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.cols{flex:1;grid-template-columns:200px minmax(0,1fr);min-height:0;display:grid}.cols.with-pane{grid-template-columns:200px minmax(0,1fr) minmax(240px,300px)}.col{-webkit-overflow-scrolling:touch;padding:12px;overflow:auto}.col+.col{border-left:1px solid var(--stroke)}.h{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;font-size:10px}.src,.verb{text-align:left;background:var(--glass);border:1px solid var(--stroke);cursor:pointer;width:100%;color:var(--ink);border-radius:12px}.src{min-height:44px;margin-bottom:8px;padding:10px;display:block}.src.add{opacity:.9;border-style:dashed}.src.add:hover{opacity:1}.src.on,.src:hover{background:var(--glass-2)}.src b{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;display:block;overflow:hidden}.src span{font-family:var(--mono);color:var(--muted);font-size:11px}.verb{min-height:44px;margin-top:6px;padding:10px 12px;font-size:13px}.verb:hover{background:var(--glass-2)}.verb.bad{color:var(--danger)}.sel{font-size:13px;font-weight:650}.board-bar{flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:12px;display:flex}.board-bar .h{margin-bottom:2px}.tools{flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto;display:flex}.tools>button,.menu-wrap>button{background:var(--glass);border:1px solid var(--stroke);width:auto;min-height:36px;color:var(--ink);font:inherit;cursor:pointer;border-radius:10px;padding:6px 12px;font-size:13px}.tools>button:hover,.menu-wrap>button:hover{background:var(--glass-2)}.tools>button.bad{color:var(--danger)}.menu-wrap{position:relative}.menu{z-index:8;border:1px solid var(--stroke);-webkit-backdrop-filter:blur(20px)saturate(1.3);backdrop-filter:blur(20px)saturate(1.3);background:#121822eb;border-radius:12px;min-width:200px;padding:6px;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 32px #00000059}.menu button{text-align:left;width:100%;min-height:40px;color:var(--ink);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:9px 12px;font-size:13px;display:block}.menu button:hover{background:var(--glass-2)}.col-pane h3{margin-bottom:8px;font-size:16px;font-weight:650}.col-pane .row{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.col-pane .row .cta,.col-pane .row .ghost{flex:1}.col-pane p,.sheet p{color:var(--muted);margin-bottom:12px;font-size:13px}.col-pane label,.sheet label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:10px 0 6px;font-size:10px;display:block}.col-pane input,.col-pane textarea,.sheet input,.sheet textarea{width:100%;font:inherit;color:var(--ink);border:1px solid var(--stroke);background:#00000047;border-radius:10px;min-height:44px;padding:10px 12px}.sign-pad-wrap{background:#f4efe6;border:1px dashed #c4b8a4;border-radius:12px;margin:8px 0 12px;padding:10px 10px 28px;position:relative}.sign-pad-wrap canvas,#sign-pad{cursor:crosshair;touch-action:none;background:0 0;border-radius:8px;width:100%;height:148px;display:block}.sign-pad-wrap:after{content:"ลงชื่อที่นี่";color:#8a8174;pointer-events:none;border-top:1px solid #b7aa96;padding-top:4px;font-size:12px;position:absolute;bottom:8px;left:16px;right:16px}.col-board{flex-direction:column;display:flex;overflow:auto}.board{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px;display:grid}.pg{color:#1b2430;cursor:zoom-in;text-align:left;-webkit-user-select:none;user-select:none;touch-action:pan-y;background:#f7f4ee;border:1px solid #ffffffb3;border-radius:12px;padding:8px;position:relative;box-shadow:0 10px 24px #080c1438}.pg:after{content:"ดับเบิลคลิกดู";text-align:center;color:#fff;text-shadow:0 1px 4px #0000008c;opacity:0;pointer-events:none;font-size:11px;font-weight:650;transition:opacity .15s;position:absolute;top:40px;left:12px;right:12px}@media (hover:hover){.pg:hover:after{opacity:1}}.pg.sel{outline:2px solid var(--clay);outline-offset:2px}.pg img,.pg .ph{object-fit:contain;background:#efebe3;border-radius:6px;width:100%;height:96px;display:block}.pg .m{justify-content:space-between;margin-top:6px;font-size:11px;display:flex}.pg .m b{font-family:var(--mono)}.pg .m span{color:#6b655c;text-overflow:ellipsis;white-space:nowrap;max-width:70%;overflow:hidden}.drop{border:1.5px dashed var(--stroke);text-align:center;background:#ffffff0a;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:280px;margin:16px;padding:24px;display:flex}.drop strong{letter-spacing:-.02em;font-size:clamp(18px,4vw,22px);font-weight:600}.drop.over{border-color:var(--mint);background:#8ee0c81f}.foot{color:var(--muted);border-top:1px solid var(--stroke);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 14px;font-size:12.5px;display:flex}.foot b{color:var(--ink);font-weight:600}.toast{left:50%;bottom:calc(var(--dock-h) + 12px);z-index:50;color:#fff;background:#b04a3feb;border-radius:12px;max-width:min(92vw,420px);padding:10px 14px;font-size:13px;display:none;position:fixed;transform:translate(-50%)}.toast.show{display:block}.busy{z-index:5;background:#080c1459;justify-content:center;align-items:center;font-size:14px;display:none;position:absolute;inset:0}.busy.on{display:flex}.dock{z-index:8;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--stroke);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.45);backdrop-filter:blur(var(--blur)) saturate(1.45);gap:6px;display:none;position:sticky;bottom:0}.dock button{background:var(--glass-2);border:1px solid var(--stroke);border-radius:12px;flex:1;min-height:44px;font-size:12px}.dock .cta{flex:1.3}.file{display:none}[hidden]{display:none!important}.sheet{z-index:30;max-height:min(78%,560px);padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--stroke);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);backdrop-filter:blur(var(--blur)) saturate(1.4);background:#121822b8;border-radius:18px 18px 0 0;position:absolute;bottom:0;left:0;right:0;overflow:auto}.sheet h3{margin-bottom:8px;font-size:16px;font-weight:650}.sheet p{color:var(--muted);margin-bottom:12px;font-size:13px}.sheet label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:10px 0 6px;font-size:10px;display:block}.sheet input,.sheet textarea{width:100%;font:inherit;color:var(--ink);border:1px solid var(--stroke);background:#00000047;border-radius:10px;min-height:44px;padding:10px 12px}.sheet .row{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.sheet .row .cta,.sheet .row .ghost{flex:1}.sheet canvas{touch-action:none;background:#f4efe6;border-radius:12px;width:100%;height:140px}.pills{flex-wrap:wrap;gap:6px;display:flex}.pill{font-family:var(--mono);color:var(--mint);background:#8ee0c824;border:1px solid #8ee0c84d;border-radius:999px;padding:3px 8px;font-size:11px}.chips{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.chip{font-family:var(--mono);color:var(--ink);background:var(--glass);border:1px solid var(--stroke);cursor:pointer;border-radius:999px;min-height:44px;padding:8px 12px;font-size:12px}.inspect{z-index:20;background:#121820;flex-direction:column;display:flex;position:absolute;inset:0}.inspect-bar{border-bottom:1px solid var(--stroke);background:#121822f5;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:10px 12px;display:flex}.inspect-x{width:40px;height:40px;min-height:40px;color:var(--ink);background:var(--glass-2);border:1px solid var(--stroke);border-radius:12px;flex-shrink:0;padding:0;font-size:26px;line-height:1}.inspect-x:hover{color:#fff;background:#f0a19940}.inspect-view{cursor:crosshair;flex:1;min-height:0;padding:12px;position:relative;overflow:auto}.inspect-view.fit{touch-action:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.inspect-view.fit .inspect-frame{max-width:100%;height:100%}.inspect-view.fit canvas{width:auto;max-width:100%;height:100%;display:block}.inspect-view.zoom{cursor:grab;touch-action:pan-x pan-y;display:block}.inspect-view.zoom .inspect-frame{max-width:none;margin:0 auto}.inspect-view.zoom canvas{width:min(1600px,160%);height:auto;margin:0 auto;display:block}.inspect-frame{display:inline-block;position:relative}.inspect-view canvas{pointer-events:none;background:#fff;box-shadow:0 12px 40px #0006}.crop-box{border:2px solid var(--clay);pointer-events:none;background:#e08a682e;position:absolute}.sign-box{z-index:3;cursor:move;border:1px dashed var(--clay);background:#ffffff1f;position:absolute}.sign-box img{pointer-events:none;width:100%;height:auto;display:block}.box-x{color:#fff;z-index:4;cursor:pointer;background:#1b2430;border-radius:50%;width:22px;height:22px;min-height:22px;padding:0;font-size:16px;line-height:20px;position:absolute;top:-11px;right:-11px}.note-box{z-index:4;min-width:80px;position:absolute;transform:translateY(-50%)}.note-box input{color:#1b2430;background:#fff8b4eb;border:1px solid #e0c36a;border-radius:4px;width:180px;min-height:28px;padding:4px 22px 4px 8px;font-size:14px}.inspect-bar .on{color:var(--mint)}.pg.cropped{outline:2px dashed var(--mint);outline-offset:2px}.more-list{flex-direction:column;gap:6px;display:flex}.more-list .verb{margin:0}@media (width<=860px){.shell{padding:8px 8px 0}.priv{padding:3px 8px;font-size:10px}.ghost.desktop-only{display:none}.cols{grid-template-rows:auto 1fr;grid-template-columns:1fr}.cols.with-pane{grid-template-columns:1fr}.tools,.col-pane{display:none!important}.col-sources{border-left:0;border-bottom:1px solid var(--stroke);gap:8px;padding:10px;display:flex;overflow:auto hidden}.col-sources .h{display:none}.col-sources .src{flex:none;min-width:148px;margin:0}.col-board{border-left:0;padding-bottom:12px}.board{grid-template-columns:repeat(2,minmax(0,1fr))}.dock{display:flex}.stage{border-bottom-right-radius:0;border-bottom-left-radius:0}.top{border-radius:16px}.cta.top-export{display:none}}@media (width>=861px){.dock{display:none!important}}@media (prefers-reduced-motion:reduce){.glass,.dock{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.orb{filter:blur(24px)}}