:root{--brand1:#7d2ae8;--brand2:#00c4cc;--dark:#18191b;--dark2:#252628;--dark3:#333437;--ws:#ebecf0;--panel:#ffffff;--line:#e3e5e8;--txt:#1f2229;--muted:#7a818c}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif}body,html{height:100%;overflow:hidden}body{background:var(--ws);color:var(--txt)}#app{display:flex;flex-direction:column;height:100%}:focus-visible{outline:2px solid var(--brand2);outline-offset:1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#topbar{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:10px;padding:0 14px;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;z-index:30;box-shadow:0 1px 6px rgba(0,0,0,.25)}#topbar .logo{font-weight:800;font-size:19px;letter-spacing:.3px;margin-right:6px;white-space:nowrap}#doc-title{background:rgba(255,255,255,.16);border:1px solid transparent;border-radius:6px;color:#fff;padding:6px 10px;font-size:13px;width:190px;outline:none;transition:.15s}#doc-title:hover{background:rgba(255,255,255,.25)}#doc-title:focus{background:#fff;color:var(--txt)}.tb-sep{width:1px;height:26px;background:rgba(255,255,255,.35);margin:0 2px}.tb-btn{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:6px;cursor:pointer;padding:7px 11px;font-size:13px;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:.15s}.tb-btn:hover:not(:disabled){background:rgba(255,255,255,.3)}.tb-btn:disabled{opacity:.4;cursor:default}.tb-btn.primary{background:#fff;color:var(--brand1);font-weight:700}.tb-btn.primary:hover{background:#f0e7ff}.tb-btn.on{background:rgba(255,255,255,.45);font-weight:700}#zoom-label{min-width:48px;text-align:center;font-size:13px;font-weight:600}#main,.spacer{flex:1 1}#main{display:flex;min-height:0}#side-tabs{width:76px;flex:0 0 76px;background:var(--dark);padding-top:6px}#side-tabs,.side-tab{display:flex;flex-direction:column}.side-tab{background:none;color:#b8bcc4;cursor:pointer;padding:11px 4px;font-size:11px;align-items:center;gap:4px;border:none;border-left:3px solid transparent;transition:.15s}.side-tab .ic{font-size:21px;line-height:1}.side-tab.active,.side-tab:hover{color:#fff;background:var(--dark2)}.side-tab.active{border-left-color:var(--brand2)}#side-panel{width:300px;flex:0 0 300px;background:var(--dark2);color:#e8eaed;padding:16px 14px;overflow-y:auto}#side-panel h3{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;text-transform:uppercase;letter-spacing:.6px}#side-panel .hint{font-size:12px;color:#9aa0a8;margin-bottom:12px;line-height:1.5}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px}.shape-btn{background:var(--dark3);border:1px solid #3d3e42;border-radius:8px;cursor:pointer;aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:.15s;padding:14px;color:#fff}.shape-btn:hover{background:#3f4045;border-color:var(--brand2);transform:translateY(-2px)}.shape-btn div,.shape-btn svg{pointer-events:none}.text-add-btn{width:100%;background:var(--dark3);border:1px solid #3d3e42;border-radius:8px;color:#fff;cursor:pointer;padding:14px 12px;margin-bottom:10px;text-align:left;transition:.15s}.text-add-btn:hover{background:#3f4045;border-color:var(--brand2)}.upload-zone{border:2px dashed #4a4b50;border-radius:10px;padding:26px 12px;text-align:center;color:#9aa0a8;cursor:pointer;font-size:13px;transition:.15s;margin-bottom:14px}.upload-zone:hover{border-color:var(--brand2);color:#fff}.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px}.upload-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:.15s}.upload-grid img:hover{border-color:var(--brand2);transform:scale(1.03)}.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px;margin-bottom:16px}.swatch{aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid #3d3e42;transition:.15s}.swatch:hover{transform:scale(1.08);border-color:#fff}.bg-custom{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;color:#c8ccd2}.bg-custom input[type=color]{width:34px;height:30px;border:none;border-radius:6px;background:none;cursor:pointer;padding:0}.tpl-card{width:100%;background:var(--dark3);border:1px solid #3d3e42;border-radius:10px;cursor:pointer;margin-bottom:12px;overflow:hidden;transition:.15s;text-align:left;color:#fff;padding:0}.tpl-card:hover{border-color:var(--brand2);transform:translateY(-2px)}.tpl-thumb{height:110px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;text-align:center;padding:8px;font-size:15px}.tpl-name{padding:9px 12px;font-size:13px}#workspace{flex:1 1;overflow:auto;display:flex;position:relative}#holder{margin:auto;padding:0;flex:0 0 auto}#holder,#page{position:relative}#page{transform-origin:0 0;background:#fff;box-shadow:0 2px 18px rgba(0,0,0,.18);overflow:visible}.guide{background:#ff2bb1;display:none;z-index:999}#marquee,.guide{position:absolute;pointer-events:none}#marquee{border:1.5px dashed var(--brand1);background:rgba(125,42,232,.08);z-index:998}#guide-v{left:50%;top:0;width:1px;height:100%}#guide-h{top:50%;left:0;height:1px;width:100%}.el{position:absolute;cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}.el.selected{box-shadow:0 0 0 calc(1.5px / var(--zoom, 1)) var(--brand1),0 0 0 calc(3px / var(--zoom, 1)) rgba(125,42,232,.25)}.el .inner{width:100%;height:100%}.el .text-content{width:100%;min-height:100%;line-height:1.25;white-space:pre-wrap;word-break:break-word;outline:none;cursor:inherit}.el .text-content[contenteditable]{cursor:text}.el img{object-fit:cover}.el img,.el svg{width:100%;height:100%;display:block}.el svg{overflow:visible}.handle{position:absolute;width:11px;height:11px;background:#fff;border:1.5px solid var(--brand1);border-radius:3px;z-index:10;transform:scale(calc(1 / var(--zoom, 1)))}.h-nw{left:-6px;top:-6px;cursor:nwse-resize}.h-n{left:calc(50% - 5px);top:-6px;cursor:ns-resize}.h-ne{right:-6px;top:-6px;cursor:nesw-resize}.h-e{right:-6px;top:calc(50% - 5px);cursor:ew-resize}.h-se{right:-6px;cursor:nwse-resize}.h-s,.h-se{bottom:-6px}.h-s{left:calc(50% - 5px);cursor:ns-resize}.h-sw{left:-6px;bottom:-6px;cursor:nesw-resize}.h-w{left:-6px;top:calc(50% - 5px);cursor:ew-resize}.h-rot{left:calc(50% - 7px);top:-32px;width:14px;height:14px;border-radius:50%;cursor:-webkit-grab;cursor:grab;background:var(--brand1);border-color:#fff}#right-panel{width:270px;flex:0 0 270px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}#props{padding:14px;overflow-y:auto;flex:1 1}#props h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:14px 0 8px}#props h4:first-child{margin-top:0}.prow{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-bottom:8px}.prow.single{grid-template-columns:1fr}.pfield{display:flex;flex-direction:column;gap:3px}.pfield label{font-size:11px;color:var(--muted)}.pfield input[type=number],.pfield input[type=text],.pfield select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:13px;width:100%;outline:none}.pfield input:focus,.pfield select:focus{border-color:var(--brand1)}.pfield input[type=color]{width:100%;height:32px;border:1px solid var(--line);border-radius:6px;padding:2px;cursor:pointer;background:#fff}.pfield input[type=range]{width:100%;accent-color:var(--brand1)}.btn-row{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.mini-btn{flex:1 1;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 4px;cursor:pointer;font-size:12px;transition:.12s;min-width:40px}.mini-btn:hover{background:#f3f0fa;border-color:var(--brand1)}.mini-btn.active{background:var(--brand1);color:#fff;border-color:var(--brand1)}.mini-btn.danger:hover{background:#ffe3e3;border-color:#e03131;color:#e03131}#layers-wrap{border-top:1px solid var(--line);flex:0 0 auto;max-height:38%;display:flex;flex-direction:column}#layers-wrap h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:10px 14px 6px}#layers{overflow-y:auto;padding:0 8px 10px}.layer{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:13px;transition:.12s}.layer:hover{background:#f1f3f5}.layer.sel{background:#efe6ff}.layer .ic{width:20px;text-align:center;flex:0 0 20px}.layer .nm{flex:1 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.layer .lbtn{border:none;background:none;cursor:pointer;color:var(--muted);font-size:12px;padding:2px 4px;border-radius:4px}.layer .lbtn:hover{background:#dee2e6;color:var(--txt)}.layer .lbtn.dim{opacity:.45}.empty-note{font-size:12px;color:var(--muted);padding:6px 14px 12px}#selbox{position:absolute;border:1.5px dashed var(--brand1);pointer-events:none;z-index:960}#selbox .handle{pointer-events:auto}#grid-ov{position:absolute;inset:0;pointer-events:none;z-index:900;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 0);background-size:50px 50px}#center-col{flex:1 1;display:flex;flex-direction:column;min-width:0;position:relative}#pagebar{flex:0 0 64px;background:#f5f6f8;border-top:1px solid var(--line);gap:10px;padding:8px 14px;overflow-x:auto}#pagebar,.page-chip{display:flex;align-items:center}.page-chip{position:relative;height:46px;min-width:64px;border:2px solid var(--line);border-radius:8px;cursor:pointer;justify-content:center;background:#fff;flex:0 0 auto;transition:.15s}.page-chip:hover{border-color:#b197fc}.page-chip.active{border-color:var(--brand1)}.page-chip .pc-bg{position:absolute;inset:0;border-radius:6px;opacity:.45}.page-chip .pc-num{position:relative;font-size:13px;font-weight:700;color:var(--txt);background:rgba(255,255,255,.8);border-radius:4px;padding:1px 7px}.pc-btn{position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:10px;line-height:1;display:none;align-items:center;justify-content:center;padding:0}.page-chip:hover .pc-btn{display:flex}.pc-dup{right:14px}.pc-del{right:-7px;color:#e03131}#btn-add-page{width:38px;height:38px;border-radius:50%;border:2px dashed #b9bdc4;background:none;font-size:20px;color:var(--muted);cursor:pointer;flex:0 0 auto}#btn-add-page:hover{border-color:var(--brand1);color:var(--brand1)}#ctx-menu{position:fixed;z-index:2000;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:5px;min-width:190px}.ctx-item{padding:7px 14px;cursor:pointer;font-size:13px;border-radius:6px;display:flex;justify-content:space-between;gap:14px;border:none;background:none;width:100%;text-align:left;color:var(--txt)}.ctx-item:hover{background:#f1ebfc}.ctx-item .kbd{color:var(--muted);font-size:11px}.ctx-sep{height:1px;background:var(--line);margin:4px 8px}#export-pop,#open-pop{position:fixed;top:58px;right:12px;z-index:2000;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.2);padding:16px;width:240px;color:var(--txt)}#export-pop h4,#open-pop h4{font-size:13px;margin-bottom:10px}#export-pop .pfield{margin-bottom:9px}#export-pop label.chk{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:9px;cursor:pointer}#export-pop .go{width:100%;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;border:none;border-radius:8px;padding:9px;font-size:14px;font-weight:700;cursor:pointer}#open-pop{width:290px}#proj-list{max-height:300px;overflow-y:auto;margin:0 -6px 6px}.proj-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer}.proj-row:hover{background:#f2f3f7}.proj-row .pmeta{flex:1 1;min-width:0}.proj-row .pname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.proj-row .pdate{font-size:11px;color:var(--muted)}.proj-row .pdel{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:6px}.proj-row .pdel:hover{background:#fde8e8;color:#c0392b}.proj-empty{font-size:12px;color:var(--muted);padding:4px 2px 8px}#open-pop .foot{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:10px}#open-pop .foot button{flex:1 1;background:#f2f3f7;border:1px solid var(--line);border-radius:8px;padding:7px 4px;font-size:12px;cursor:pointer;color:var(--txt)}#open-pop .foot button:hover{background:#e8eaf0}body.drawing #page{cursor:crosshair}body.panning #workspace{cursor:-webkit-grab;cursor:grab}.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:6px;gap:6px}.sticker-grid button{background:var(--dark3);border:1px solid #3d3e42;border-radius:8px;font-size:24px;cursor:pointer;aspect-ratio:1;transition:.12s;padding:0}.sticker-grid button:hover{background:#3f4045;transform:scale(1.12)}.draw-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;color:#c8ccd2}.draw-row input[type=color]{width:38px;height:32px;border:none;border-radius:6px;background:none;cursor:pointer;padding:0}.draw-row input[type=range]{flex:1 1;accent-color:var(--brand2)}#btn-draw-toggle{width:100%;padding:11px;border-radius:8px;border:1px solid #3d3e42;cursor:pointer;font-size:14px;font-weight:700;background:var(--dark3);color:#fff;transition:.15s}#btn-draw-toggle.on{background:linear-gradient(90deg,var(--brand1),var(--brand2))}.el.cropping{outline:2px solid var(--brand2);cursor:-webkit-grab;cursor:grab}.el.cropping:after{content:"drag to reposition · Esc to finish";position:absolute;left:50%;top:-26px;transform:translateX(-50%) scale(calc(1 / var(--zoom, 1)));background:var(--brand2);color:#fff;font-size:11px;padding:3px 9px;border-radius:6px;white-space:nowrap;pointer-events:none}.ruler{position:absolute;background:#fafbfc;z-index:60;display:none}#ruler-h{top:0;left:22px;right:0;height:22px;border-bottom:1px solid var(--line);cursor:row-resize}#ruler-v{top:22px;bottom:64px;cursor:col-resize}#ruler-corner,#ruler-v{left:0;width:22px;border-right:1px solid var(--line)}#ruler-corner{position:absolute;top:0;height:22px;background:#fafbfc;border-bottom:1px solid var(--line);z-index:61;display:none}#center-col.show-rulers #ruler-corner,#center-col.show-rulers .ruler{display:block}#center-col.show-rulers #workspace{padding-top:22px;padding-left:22px}.user-guide{position:absolute;background:#00c4cc;z-index:940;opacity:.85}.user-guide.gv{top:0;width:1px;height:100%;cursor:col-resize;padding:0 3px;background-clip:content-box}.user-guide.gh{left:0;height:1px;width:100%;cursor:row-resize;padding:3px 0;background-clip:content-box}.pfield textarea{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12px;width:100%;outline:none;font-family:Consolas,monospace;resize:vertical;min-height:80px}.pfield textarea:focus{border-color:var(--brand1)}#present{position:fixed;inset:0;background:#000;z-index:5000;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}#slide-wrap{position:relative;transform-origin:center;flex:0 0 auto}#present .slide{position:absolute;inset:0;overflow:hidden}#present .el{pointer-events:none;cursor:inherit}#present .pcount{right:26px;color:rgba(255,255,255,.55);font-size:14px}#present .pcount,#present .phint{position:fixed;bottom:18px;z-index:5001}#present .phint{left:26px;color:rgba(255,255,255,.35);font-size:13px}@keyframes kf-fade{0%{opacity:0}to{opacity:1}}@keyframes kf-rise{0%{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}@keyframes kf-drop{0%{opacity:0;transform:translateY(-46px)}to{opacity:1;transform:none}}@keyframes kf-pan{0%{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:none}}@keyframes kf-pop{0%{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}@keyframes kf-zoom{0%{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}@keyframes kf-spin{0%{opacity:0;transform:rotate(-200deg) scale(.6)}to{opacity:1;transform:none}}@keyframes kf-flip{0%{opacity:0;transform:perspective(700px) rotateY(90deg)}to{opacity:1;transform:perspective(700px) rotateY(0)}}@keyframes kf-bounce{0%{opacity:0;transform:translateY(-60px)}60%{opacity:1;transform:translateY(10px)}80%{transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes kf-blur{0%{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}@keyframes loop-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes loop-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes loop-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes loop-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}.anim-preview{width:100%;height:100%}@keyframes sl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sl-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sl-slide-in{0%{transform:translateX(105%)}to{transform:none}}@keyframes sl-slide-out{0%{transform:none}to{transform:translateX(-105%)}}@keyframes sl-slide-in-r{0%{transform:translateX(-105%)}to{transform:none}}@keyframes sl-slide-out-r{0%{transform:none}to{transform:translateX(105%)}}@keyframes sl-zoom-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}@keyframes sl-zoom-out{0%{opacity:1;transform:none}to{opacity:0;transform:scale(1.18)}}.in-fade{animation:sl-fade-in .55s both}.out-fade{animation:sl-fade-out .55s both}.in-slide{animation:sl-slide-in .55s cubic-bezier(.25,.8,.3,1) both}.out-slide{animation:sl-slide-out .55s cubic-bezier(.25,.8,.3,1) both}.in-slide-r{animation:sl-slide-in-r .55s cubic-bezier(.25,.8,.3,1) both}.out-slide-r{animation:sl-slide-out-r .55s cubic-bezier(.25,.8,.3,1) both}.in-zoom{animation:sl-zoom-in .55s both}.out-zoom{animation:sl-zoom-out .55s both}.modal-overlay{position:fixed;inset:0;z-index:6000;background:rgba(15,16,20,.45);display:flex;align-items:center;justify-content:center;padding:20px;animation:modal-fade .12s ease both}.modal{background:#fff;color:var(--txt);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);width:100%;max-width:380px;padding:22px 22px 18px;animation:modal-pop .14s cubic-bezier(.2,.7,.3,1) both}.modal-title{font-size:16px;font-weight:700;margin-bottom:8px}.modal-msg{font-size:14px;line-height:1.55;color:#3d4757;white-space:pre-wrap}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.modal-btn{border:1px solid var(--line);background:#fff;color:var(--txt);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.12s}.modal-btn:hover{background:#f3f0fa;border-color:var(--brand1)}.modal-btn.primary{background:linear-gradient(90deg,var(--brand1),var(--brand2));border-color:transparent;color:#fff}.modal-btn.primary:hover{filter:brightness(1.05)}.modal-btn.primary.danger{background:#e03131}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#b9bdc4;border-radius:6px;border:2px solid transparent;background-clip:content-box}#side-panel::-webkit-scrollbar-thumb{background:#4a4b50;border:2px solid transparent;background-clip:content-box}