:root{--ink:#f3f0ea;--muted:#f3f0ea94;--faint:#f3f0ea57;--clay:#d4785a;--mint:#7ed9c0;--danger:#e89a92;--glass:#ffffff12;--glass-2:#ffffff1f;--stroke:#ffffff29;--inset:#ffffff38;--blur:22px;--r:16px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "Sarabun", sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--dock-h:calc(64px + env(safe-area-inset-bottom));--paper:#f4efe6;--paper-ink:#1a1814}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-wrap:pretty;background:#07090d;min-height:100dvh}.sky{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.sky:after{content:"";opacity:.045;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,#0000,#0000 2px,#ffffff59 2px 3px);position:absolute;inset:0}.orb{filter:blur(64px);border-radius:50%;position:absolute}.o1{opacity:.38;background:#2a3d58;width:48vw;height:48vw;top:-22vw;left:-16vw}.o2{opacity:.28;background:#3d2c3e;width:32vw;height:32vw;top:8vh;right:-10vw}.o3{opacity:.22;background:#1f3d36;width:28vw;height:28vw;bottom:-18vw;left:36vw}.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:-.03em;white-space:nowrap;font-size:15px;font-weight:620}.priv{font-family:var(--mono);color:var(--mint);white-space:nowrap;background:#7ed9c014;border:1px solid #7ed9c038;border-radius:999px;padding:3px 10px;font-size:10px}.grow{flex:1}button{font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:0}.cta{background:var(--clay);color:#fff;border-radius:11px;min-height:44px;padding:10px 14px;font-size:13px;font-weight:650;box-shadow:inset 0 1px #ffffff2e,0 10px 24px #d4785a38}.cta:hover{filter:brightness(1.06)}.ghost{color:var(--muted);min-height:44px;padding:8px 10px;font-size:13px}.ghost:hover{color:var(--ink)}.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{background:var(--paper);color:var(--paper-ink);cursor:zoom-in;text-align:left;-webkit-user-select:none;user-select:none;touch-action:pan-y;border:1px solid #ffffff8c;border-radius:12px;padding:8px;transition:transform .18s,box-shadow .18s;position:relative;box-shadow:0 10px 28px #00000052}.pg:hover{transform:translateY(-3px);box-shadow:0 16px 36px #0006}.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)}.pg,.pg:hover{transition:none;transform:none}}.help-btn{border:1px solid var(--stroke);background:var(--glass);border-radius:12px;width:40px;min-height:40px;padding:0;font-size:18px;font-weight:700}.by{font-family:var(--mono);letter-spacing:.04em;color:var(--faint);white-space:nowrap;margin-left:auto;font-size:10px}.help{z-index:36;-webkit-backdrop-filter:blur(18px)saturate(1.2);backdrop-filter:blur(18px)saturate(1.2);background:#0c121cf0;flex-direction:column;display:flex;position:absolute;inset:0}.help-bar{border-bottom:1px solid var(--stroke);flex-shrink:0;align-items:center;gap:10px;padding:10px 12px;display:flex}.help-body{max-width:820px;padding:16px 18px 28px;overflow:auto}.help-lead{color:var(--mint);margin-bottom:16px;font-size:13px}.help-body h4{letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-size:13px;font-family:var(--mono);margin:18px 0 8px}.how{border-collapse:collapse;width:100%;font-size:13.5px}.how th,.how td{text-align:left;vertical-align:top;border-bottom:1px solid var(--stroke);padding:8px 10px}.how th{color:var(--faint);font-size:11px;font-weight:600}.how td:first-child{width:34%;color:var(--ink);font-weight:650}.how td:last-child{color:var(--muted)}.how b{color:var(--ink);font-weight:650}.help-body ul{color:var(--muted);margin:0 0 12px 18px;font-size:13.5px}.help-body li{margin:6px 0}.help-foot{color:var(--faint);margin-top:16px;font-size:12px}