:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#182b45;background:#f2f5fa;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #81b8ff;outline-offset:2px}.sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(26px,calc((100vw - 1580px)/2));background:#101e36;color:#fff;border-bottom:1px solid #233655}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:41px;height:41px;display:grid;place-items:center;background:linear-gradient(145deg,#259aff,#1260c9);border-radius:12px;box-shadow:0 6px 16px #0368eb40}.brand-mark .icon{width:27px;height:27px;stroke-width:2.2}.brand strong{font-size:16px;letter-spacing:.45px;display:block}.brand strong span{color:#7dc8ff}.brand small{display:block;font-size:11px;color:#aebdd2;margin-top:3px}.topbar-right{display:flex;align-items:center;gap:20px}.tag{font-size:11px;font-weight:760;letter-spacing:.7px}.demo-tag{border:1px solid #36516b;border-radius:100px;padding:8px 10px;display:inline-flex;align-items:center;gap:7px;color:#c9deed}.tag-dot,.live-dot{width:7px;height:7px;border-radius:50%;background:#35d49e;display:inline-block;box-shadow:0 0 0 3px #35d49e20}.help-btn{background:none;border:0;color:#dce9f8;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}.app-layout{max-width:1610px;margin:auto;padding:21px 19px 50px;display:grid;grid-template-columns:272px minmax(0,1fr) 278px;gap:17px;align-items:start}.panel{background:#fff;border:1px solid #e3e9f1;border-radius:17px;box-shadow:0 5px 24px #19365a09}.templates-panel{padding:22px 15px 19px;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin:0 4px 18px}.panel-heading h2{font-size:21px;letter-spacing:-.4px;margin:4px 0 0;font-weight:760}.eyebrow{font-size:10px;font-weight:850;color:#7a91ac;letter-spacing:1.45px}.count-badge{font-size:12px;background:#edf4fe;color:#1973d4;padding:5px 8px;border-radius:7px;font-weight:800}.search{height:42px;display:flex;align-items:center;gap:8px;padding:0 11px;background:#f7faff;border:1px solid #dde7f2;border-radius:11px;color:#71859d}.search .icon{width:17px;height:17px}.search input{background:none;border:0;outline:0;min-width:0;width:100%;font-size:12px;color:#20324a}.field-block{margin:16px 0}.small-label{font-size:11px;color:#8190a7;font-weight:800;letter-spacing:.5px}.select-block label{display:block;margin-bottom:7px}select{border:1px solid #dbe5f0;background:#fff;border-radius:10px;color:#2a415f;padding:11px;width:100%;font-size:12px;font-weight:600}.template-list{display:flex;flex-direction:column;gap:10px;max-height:625px;overflow:auto;padding-right:2px}.template-card{width:100%;padding:8px;text-align:left;border-radius:13px;border:1.5px solid #e7eaf0;background:#fff;display:flex;align-items:center;gap:9px;transition:border-color .18s,background .18s,box-shadow .18s}.template-card:hover{background:#f5faff;border-color:#acd3ff}.template-card.selected{border:2px solid #1678f2;padding:7.5px;background:#eff6ff;box-shadow:0 0 0 2px #2679ee0c}.template-card img{width:108px;min-width:108px;height:66px;object-fit:cover;border-radius:8px;background:#e5ebf4}.template-card .template-detail{min-width:0;flex:1}.template-card strong{font-size:12px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.template-card small{display:block;margin-top:6px;font-size:10px;color:#7890a9}.template-card .check{color:#136eed;align-self:flex-start;display:none}.template-card.selected .check{display:block}.template-card .check .icon{width:15px;height:15px}.outline-btn{display:flex;justify-content:center;align-items:center;gap:8px;color:#146ddd;border:1.5px dashed #9bbce4;background:#f9fbff;border-radius:11px;padding:12px;font-size:12px;font-weight:800}.outline-btn:hover{background:#e9f3ff}.full{width:100%;margin-top:15px}.panel-footnote{font-size:10.5px;line-height:1.6;color:#8491a6;margin:14px 3px 0}.editor-area{min-width:0}.workflow{height:57px;display:flex;align-items:center;justify-content:space-evenly;padding:5px 19px;margin-bottom:15px}.flow-step{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#7e91a9;font-weight:730;font-size:12px}.flow-step.current{color:#1373e6}.step-num{display:grid;place-items:center;width:24px;height:24px;border:1px solid #b7c9de;border-radius:50%;font-size:11px}.step-num .icon{width:14px;height:14px}.current .step-num{border-color:#1b7af1;background:#197af1;color:#fff}.step-done{background:#e4f4f9;color:#24769b;border-color:#e4f4f9}.flow-line{height:1px;min-width:8px;max-width:58px;flex:1;background:#dce6ef;margin:0 13px}.canvas-card{overflow:hidden}.canvas-head{display:flex;justify-content:space-between;align-items:center;padding:22px 23px 15px;gap:10px}.head-text h1{font-size:20px;letter-spacing:-.35px;margin:0 0 6px}.head-text p{font-size:12px;color:#7a8ba2;margin:0;line-height:1.5}.head-text b{color:#2374d4}.status-pill{background:#effaf4;color:#1a9664;border-radius:100px;padding:8px 11px;font-size:10px;font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:7px}.toolbar{padding:0 14px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar button{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:720;border-radius:10px;padding:10px 12px;white-space:nowrap}.primary{background:linear-gradient(160deg,#278cff,#0966df);color:white;border:1px solid #1773e5;font-weight:760;border-radius:10px;display:flex;justify-content:center;align-items:center;gap:8px;box-shadow:0 5px 12px #237ff126;padding:12px 16px}.primary:hover{background:linear-gradient(160deg,#1680f4,#045bcf)}.primary:disabled{opacity:.65;cursor:progress}.tool-button{border:1px solid #e5ebf2;background:#f8fafd;color:#536981}.tool-button:hover,.tool-button[aria-pressed="true"]{color:#156bda;border-color:#bed6f3;background:#eaf4ff}.tool-button .icon{width:17px;height:17px}.stage-scroller{background:#dbe4ef;padding:0 14px;overflow:auto}.image-stage{position:relative;margin:auto;width:100%;background:#bacddd;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}.image-stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.image-stage #pointOverlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none;overflow:visible}.image-stage.is-before #pointOverlay{display:none}.point-handle{cursor:grab;touch-action:none}.point-handle:active{cursor:grabbing}.point-hit{fill:transparent}.point-circle{fill:#1e80ec;stroke:#fff;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 3px 3px #14395777)}.point-letter{font-weight:800;font-size:20px;fill:#fff;pointer-events:none;text-anchor:middle;dominant-baseline:central}.stage-label{position:absolute;bottom:12px;left:12px;background:#101f35cb;color:white;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px;font-size:10px;pointer-events:none;max-width:70%;backdrop-filter:blur(6px)}.stage-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-label .icon{width:14px;height:14px}.canvas-bottom{padding:13px 19px;display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:11px;color:#6d8098;line-height:1.4}.canvas-bottom strong{color:#256fd0}.kbd{color:#3a82d0;font-weight:850;font-size:9px;background:#ebf4ff;padding:4px 6px;border-radius:5px;margin-right:6px}.size-label{white-space:nowrap;font-weight:650}.privacy-hint{display:flex;gap:7px;align-items:flex-start;margin:13px 2px;color:#778ba0;font-size:11px;line-height:1.5}.privacy-hint .icon{width:16px;height:16px;color:#4c9ae8}.settings-panel{min-height:640px;display:flex;flex-direction:column;overflow:hidden}.setting-heading{margin:0;padding:23px 19px 17px;border-bottom:1px solid #ebeff5}.settings-content{padding:19px;flex:1}.chosen-box{display:flex;gap:10px;align-items:center;border:1px solid #e9eef5;border-radius:12px;padding:8px;background:#fafcff}.chosen-box img{width:92px;height:61px;object-fit:cover;border-radius:8px}.chosen-box>div{min-width:0}.chosen-box strong{display:block;font-size:12px;margin-top:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.chosen-box small{display:block;color:#93a4b8;font-size:10px;margin-top:5px}.setting-block{padding-top:25px}.range-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:750}.range-head output{color:#1874e9;font-weight:800}.setting-block input[type=range]{width:100%;margin:16px 0 6px;accent-color:#1678ed;cursor:pointer}.setting-block p{font-size:11px;line-height:1.6;color:#8a99aa;margin:2px 0 0}.export-setting{margin-top:26px;border-top:1px solid #e8edf3}.export-setting h3{font-size:14px;margin:0 0 17px}.export-setting .small-label{display:block;margin-bottom:8px}.export-advice{display:flex;gap:7px;color:#6b87a4;background:#f1f7ff;border-radius:10px;padding:11px;margin-top:13px;font-size:11px;line-height:1.5}.export-advice .icon{width:15px;height:15px;color:#3e85e2}.action-area{padding:17px 18px;border-top:1px solid #e9edf3}.export-button{width:100%;padding:15px 10px}.action-area small{display:block;text-align:center;font-size:10px;color:#8ea0b5;margin-top:12px}.mobile-export{display:none}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,12px);z-index:10;background:#102746;color:#fff;padding:12px 17px;font-size:12px;font-weight:630;border-radius:10px;box-shadow:0 12px 30px #0b234354;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;max-width:min(90vw,480px);text-align:center;pointer-events:none}.toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}.help-dialog{width:min(92vw,475px);border:1px solid #e6ebf1;border-radius:17px;box-shadow:0 25px 80px #0a193f60;padding:22px;color:#233b57}.help-dialog::backdrop{background:#0a173c88}.modal-top{display:flex;align-items:center;justify-content:space-between}.modal-top h2{margin:0;font-size:19px}.modal-top button{border:0;background:#eff3f9;border-radius:8px;padding:6px;display:grid;place-items:center}.help-dialog ol{padding-left:21px;font-size:13px;line-height:1.75}.help-dialog li{margin:11px 0}.modal-note{background:#edf5ff;padding:12px;border-radius:10px;font-size:12px;color:#476b95;line-height:1.6}.help-dialog>.primary{margin-left:auto;margin-top:16px}.no-results{font-size:12px;line-height:1.6;padding:18px 8px;color:#7e8ea5;text-align:center}
@media (max-width:1190px){.app-layout{grid-template-columns:238px minmax(0,1fr);grid-template-areas:"templates editor" "settings editor"}.templates-panel{grid-area:templates}.editor-area{grid-area:editor}.settings-panel{grid-area:settings;min-height:0}.template-card img{width:84px;min-width:84px;height:57px}.chosen-box img{width:78px}.toolbar button{font-size:11px}.toolbar .icon{width:15px;height:15px}.flow-line{margin:0 5px}.flow-step{font-size:11px}}
@media (max-width:790px){.topbar{height:63px;padding:0 14px}.brand-mark{width:36px;height:36px;border-radius:10px}.brand strong{font-size:14px}.brand small{font-size:10px}.demo-tag{display:none}.help-btn{font-size:12px}.app-layout{padding:12px 11px 100px;display:flex;flex-direction:column;gap:13px}.editor-area{order:0;width:100%}.templates-panel{order:1;width:100%}.settings-panel{order:2;width:100%;min-height:0}.workflow{height:57px;margin-bottom:12px;padding:5px 10px}.flow-step{display:flex;flex-direction:column;gap:3px;font-size:10px;text-align:center}.step-num{width:22px;height:22px}.flow-line{margin:0 4px;max-width:40px;align-self:center}.canvas-head{padding:17px 14px 11px}.canvas-head h1{font-size:18px}.canvas-head p{font-size:11px}.status-pill{display:none}.toolbar{gap:6px;padding:0 10px 10px}.toolbar button{padding:9px 10px;font-size:11px}.toolbar .small span{display:none}.toolbar .small{width:37px;justify-content:center}.toolbar .tool-button span{display:none}.toolbar .tool-button{width:37px;justify-content:center}.stage-scroller{padding:0}.canvas-bottom{padding:12px;font-size:10px}.size-label{display:none}.privacy-hint{font-size:10px;margin:9px 4px 0}.templates-panel{padding:17px 12px}.panel-heading{margin:0 2px 13px}.panel-heading h2{font-size:19px}.search{height:40px}.select-block{margin:12px 0}.template-list{display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;max-height:none;padding-bottom:7px;gap:10px}.template-card{min-width:160px;max-width:160px;display:block;scroll-snap-align:start;padding:7px}.template-card.selected{padding:6.5px}.template-card img{width:100%;height:86px}.template-card .template-detail{padding:6px 1px 0}.template-card .template-detail strong{font-size:11px}.template-card .template-detail small{margin-top:2px}.template-card .check{position:absolute}.panel-footnote{margin:10px 0 0}.settings-content{padding:14px 15px;display:grid;gap:14px;grid-template-columns:1fr 1fr}.chosen-box{grid-column:1/-1}.setting-block{padding-top:2px}.export-setting{padding-top:0;margin-top:0;border:0}.settings-panel .action-area{display:none}.mobile-export{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fffffff5;backdrop-filter:blur(12px);box-shadow:0 -5px 24px #203e661a;border-top:1px solid #e3e9f1;padding:11px 15px max(11px,env(safe-area-inset-bottom))}.mobile-export strong{display:block;font-size:12px}.mobile-export small{display:block;font-size:10px;margin-top:3px;color:#8190a7}.mobile-export .primary{font-size:12px;padding:12px 15px}.toast{bottom:86px}}
@media(max-width:410px){.app-layout{padding-left:8px;padding-right:8px}.brand strong{font-size:12px}.brand small{font-size:9px}.help-btn span{display:none}.head-text h1{font-size:16px}.canvas-bottom{font-size:9px}.settings-content{grid-template-columns:1fr;gap:13px}.chosen-box{grid-column:auto}.flow-step{font-size:9px}.workflow{padding-left:4px;padding-right:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}