:root{--bg:#e6e8eb;--panel:#fff;--panel-2:#f5f6f8;--ink:#15181d;--muted:#68707c;--line:#e3e6ea;--line-2:#cfd4da;--accent:#e31b23;--accent-ink:#fff;--warn:#b7791f;--error:#c62828;--ok:#2e7d32;--radius:12px;--shadow:0 1px 2px #14181d0f, 0 8px 24px #14181d14;--font:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-size:14px;line-height:1.4}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:default;opacity:.45}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a{color:inherit}h1,h2,h3,p{margin:0}.btn{background:var(--panel-2);height:38px;color:var(--ink);white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:600;transition:background .15s,transform .1s;display:inline-flex}.btn:hover{background:#eceef1}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:var(--accent-ink)}.btn.primary:hover{filter:brightness(.94);background:var(--accent)}.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:#2a2f37}.btn.ghost{background:0 0}.btn.ghost:hover{background:var(--panel-2)}.btn.sm{border-radius:8px;height:32px;padding:0 12px;font-size:13px}.btn.lg{border-radius:12px;height:48px;padding:0 22px;font-size:15px}.btn.block{width:100%}.icon-btn{width:36px;height:36px;color:var(--ink);border-radius:9px;justify-content:center;align-items:center;transition:background .15s;display:inline-flex}.icon-btn:hover{background:var(--panel-2)}.icon-btn.active{background:var(--ink);color:#fff}.icon-btn svg{width:18px;height:18px}.field{flex-direction:column;gap:6px;display:flex}.field>label,.field>span{color:var(--muted);font-size:12px;font-weight:600}.input,select.input,textarea.input{border:1px solid var(--line-2);background:#fff;border-radius:9px;width:100%;height:38px;padding:0 12px}textarea.input{resize:vertical;height:auto;padding:10px 12px}.input:focus{border-color:var(--ink);outline:none}.num{text-align:center;width:56px;padding:0 4px}.hint{color:var(--muted);font-size:12px}.row{align-items:center;gap:8px;display:flex}.sep{background:var(--line);width:1px;height:22px;margin:0 4px}.pill{background:var(--panel-2);border-radius:999px;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:12px;font-weight:600;display:inline-flex}.pill.warn{color:var(--warn);background:#fff4de}.pill.error{color:var(--error);background:#fde8e8}.pill.ok{color:var(--ok);background:#e6f4ea}.swatches{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:1px solid #00000014;border-radius:7px;position:relative}.swatch.on:after{content:"";border:2px solid var(--ink);border-radius:9px;position:absolute;inset:-3px}.color-input{border:1px solid var(--line-2);cursor:pointer;background:#fff;border-radius:9px;width:36px;height:36px;padding:2px}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:0;border-radius:6px}.store{background:#fff;min-height:100%}.store-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:18px 32px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:12px;font-size:18px;font-weight:800;display:flex}.brand-mark{background:var(--accent);width:30px;height:30px;color:var(--accent-ink);border-radius:9px;place-items:center;font-size:13px;font-weight:800;display:grid}.store-hero{max-width:1160px;margin:0 auto;padding:64px 32px 36px}.store-hero h1{letter-spacing:-.03em;max-width:14ch;font-size:clamp(34px,5vw,60px);font-weight:800;line-height:1.02}.store-hero p{color:var(--muted);max-width:52ch;margin-top:18px;font-size:18px}.store-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;max-width:1160px;margin:0 auto;padding:8px 32px 72px;display:grid}.pcard{border:1px solid var(--line);text-align:left;background:#fff;border-radius:16px;flex-direction:column;gap:14px;padding:18px;transition:transform .2s,box-shadow .2s;display:flex}.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.pcard-art{background:var(--panel-2);border-radius:10px;place-items:center;height:150px;display:grid}.pcard-paper{color:var(--muted);background:#fff;place-items:center;font-size:10px;font-weight:600;display:grid;box-shadow:0 2px 10px #0000001f}.pcard h3{font-size:17px;font-weight:800}.pcard p{color:var(--muted);font-size:13px}.pcard .meta{color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.store-foot{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px 32px;font-size:13px;display:flex}.demo-note{color:#7a5a10;background:#fff8e6;padding:10px 32px;font-size:13px}.editor{background:var(--bg);grid-template:"top top top top"56px"rail panel stage layers"1fr/72px 300px minmax(0,1fr) 240px;min-width:0;height:100%;display:grid}.editor.no-panel{grid-template-columns:72px 0 minmax(0,1fr) 240px}.editor.no-layers{grid-template-columns:72px 300px minmax(0,1fr) 0}.editor.no-panel.no-layers{grid-template-columns:72px 0 minmax(0,1fr) 0}.topbar{background:var(--panel);border-bottom:1px solid var(--line);z-index:5;grid-area:top;align-items:center;gap:10px;min-width:0;padding:0 12px 0 16px;display:flex;overflow:hidden}.topbar .title span:first-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.topbar .title{align-items:center;gap:10px;min-width:0;font-weight:800;display:flex}.topbar .title .sub{color:var(--muted);white-space:nowrap;font-size:12px;font-weight:600}.topbar .grow{flex:1}.sides{background:var(--panel-2);border-radius:10px;gap:2px;padding:3px;display:inline-flex}.sides button{height:30px;color:var(--muted);border-radius:8px;padding:0 14px;font-size:13px;font-weight:700}.sides button.on{color:var(--ink);background:#fff;box-shadow:0 1px 2px #0000001a}.rail{background:var(--panel);border-right:1px solid var(--line);z-index:4;flex-direction:column;grid-area:rail;align-items:center;gap:4px;padding:10px 0;display:flex}.rail button{width:60px;height:58px;color:var(--muted);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:11px;font-weight:700;display:flex}.rail button svg{width:22px;height:22px}.rail button:hover{background:var(--panel-2);color:var(--ink)}.rail button.on{background:var(--ink);color:#fff}.panel{background:var(--panel);border-right:1px solid var(--line);z-index:3;flex-direction:column;grid-area:panel;display:flex;overflow:hidden}.panel-head{justify-content:space-between;align-items:center;padding:14px 16px 10px;display:flex}.panel-head h2{font-size:15px;font-weight:800}.panel-body{flex-direction:column;flex:1;gap:14px;padding:0 16px 24px;display:flex;overflow:auto}.tpl-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.tpl{border:1px solid var(--line);background:var(--panel-2);text-align:left;border-radius:10px;transition:border-color .15s;overflow:hidden}.tpl:hover{border-color:var(--line-2)}.tpl.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.tpl img{width:100%;aspect-ratio:var(--ar,1.75);object-fit:contain;background:#fff;display:block}.tpl .ph{aspect-ratio:var(--ar,1.75);color:var(--muted);place-items:center;font-size:12px;display:grid}.tpl span{padding:7px 10px;font-size:12px;font-weight:700;display:block}.text-presets{flex-direction:column;gap:8px;display:flex}.text-presets button{text-align:left;background:var(--panel-2);border-radius:10px;padding:14px;transition:background .15s}.text-presets button:hover{background:#eceef1}.text-presets .h{font-size:22px;font-weight:800}.text-presets .s{font-size:16px;font-weight:600}.text-presets .b{font-size:13px}.shape-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.shape-grid button{aspect-ratio:1;background:var(--panel-2);border-radius:10px;place-items:center;transition:background .15s;display:grid}.shape-grid button:hover{background:#eceef1}.shape-grid svg{width:28px;height:28px}.upload-zone{border:1.5px dashed var(--line-2);text-align:center;color:var(--muted);cursor:pointer;border-radius:12px;padding:24px 14px;font-size:13px;transition:border-color .15s,background .15s}.upload-zone:hover,.upload-zone.drag{border-color:var(--ink);background:var(--panel-2);color:var(--ink)}.upload-zone strong{color:var(--ink);margin-bottom:4px;display:block}.upload-grid{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.upload-grid button{aspect-ratio:1;background:var(--panel-2);border-radius:8px;overflow:hidden}.upload-grid img{object-fit:cover;width:100%;height:100%;display:block}.section-title{color:var(--muted);margin-top:6px;font-size:12px;font-weight:700}.stage{grid-area:stage;place-items:center;min-width:0;min-height:0;padding:70px 24px 80px;display:grid;position:relative;overflow:auto}.stage-inner{background:#fff;position:relative;box-shadow:0 2px 6px #0000001f,0 24px 60px #0000002e}.stage-inner .canvas-container{display:block}.overlay{pointer-events:none;position:absolute;inset:0;overflow:visible}.stage-empty{color:var(--muted);place-items:center;display:grid;position:absolute;inset:0}.ctxbar{background:var(--panel);box-shadow:var(--shadow);z-index:6;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:calc(100% - 32px);padding:6px 8px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.ctxbar select.input,.ctxbar input.input{border-radius:8px;height:32px}.ctxbar .font-select{width:160px}.ctxbar .size{width:60px}.ctxbar .dpi{white-space:nowrap;padding:0 8px;font-size:12px;font-weight:700}.ctxbar .dpi.bad{color:var(--error)}.ctxbar .dpi.ok{color:var(--ok)}.ctxbar .dpi.warn{color:var(--warn)}.ctx-hint{color:#fff;z-index:6;pointer-events:none;background:#15181dd9;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;position:absolute;top:20px;left:50%;transform:translate(-50%)}.zoombar{background:var(--panel);box-shadow:var(--shadow);z-index:6;border-radius:10px;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;bottom:16px;right:16px}.zoombar .z{text-align:center;min-width:54px;font-size:12px;font-weight:700}.legend{color:var(--muted);z-index:6;gap:12px;font-size:11px;font-weight:700;display:flex;position:absolute;bottom:16px;left:16px}.legend i{vertical-align:middle;border-top:2px dashed;width:18px;height:0;margin-right:5px;display:inline-block}.legend .trim i{color:var(--ink);border-top-style:solid}.legend .bleed i{color:#d9534f}.legend .safe i{color:#2e9e5b}.layers{background:var(--panel);border-left:1px solid var(--line);z-index:3;flex-direction:column;grid-area:layers;display:flex;overflow:auto}.layers ul{flex-direction:column;gap:2px;margin:0;padding:0 10px 20px;list-style:none;display:flex}.layer{cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:7px 8px;font-size:13px;display:flex}.layer:hover{background:var(--panel-2)}.layer.on{background:#eef0f3}.layer .nm{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:600;overflow:hidden}.layer .ty{width:18px;height:18px;color:var(--muted);flex-shrink:0}.layer .lk{width:14px;height:14px;color:var(--muted)}.layer .mv{opacity:0;display:flex}.layer:hover .mv{opacity:1}.layer .mv button{border-radius:5px;place-items:center;width:20px;height:20px;display:grid}.layer .mv button:hover{background:#fff}.modal-bg{z-index:50;background:#15181d80;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:18px;width:min(920px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 30px 80px #0000004d}.modal-head{justify-content:space-between;align-items:center;padding:20px 24px 0;display:flex}.modal-head h2{letter-spacing:-.01em;font-size:22px;font-weight:800}.modal-body{grid-template-columns:1.15fr 1fr;gap:28px;padding:20px 24px 24px;display:grid}.modal-body.single{grid-template-columns:1fr}.proofs{flex-direction:column;gap:10px;display:flex}.proof{background:var(--panel-2);border-radius:12px;place-items:center;padding:12px;display:grid}.proof img{max-width:100%;max-height:240px;box-shadow:0 2px 8px #00000026}.proof-label{color:var(--muted);margin-top:8px;font-size:12px;font-weight:700}.issues{flex-direction:column;gap:8px;display:flex}.issue{background:var(--panel-2);border-radius:10px;align-items:flex-start;gap:10px;padding:10px 12px;font-size:13px;display:flex}.issue.warn{background:#fff7e8}.issue.error{background:#fdecec}.issue.info{background:#eef3ff}.issue b{text-transform:none;background:#0000000f;border-radius:6px;flex-shrink:0;padding:2px 7px;font-size:11px}.options{flex-direction:column;gap:14px;display:flex}.choice-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.choice{border:1.5px solid var(--line);text-align:left;border-radius:10px;padding:10px;transition:border-color .15s}.choice:hover{border-color:var(--line-2)}.choice.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.choice .q{font-size:15px;font-weight:800}.choice .p{color:var(--muted);font-size:12px}.fulfil{grid-template-columns:1fr 1fr;gap:8px;display:grid}.fulfil .choice .q{font-size:14px}.totals{border-top:1px solid var(--line);flex-direction:column;gap:6px;padding-top:12px;font-size:14px;display:flex}.totals div{justify-content:space-between;display:flex}.totals .grand{margin-top:4px;font-size:20px;font-weight:800}.form-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.form-grid .wide{grid-column:1/-1}.done{text-align:center;padding:20px 0 8px}.done .big{margin-bottom:8px;font-size:40px}.done h3{font-size:24px;font-weight:800}.done p{color:var(--muted);margin-top:8px}.done .actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px;display:flex}.dash{background:var(--panel-2);min-height:100%}.dash-head{border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 32px;display:flex}.dash-body{flex-direction:column;gap:14px;max-width:1160px;margin:0 auto;padding:24px 32px 60px;display:flex}.order{border:1px solid var(--line);background:#fff;border-radius:14px;grid-template-columns:150px 1fr auto;align-items:center;gap:18px;padding:16px;display:grid}.order img{border-radius:6px;width:150px;box-shadow:0 1px 4px #00000026}.order h3{font-size:16px;font-weight:800}.order .meta{color:var(--muted);margin-top:4px;font-size:13px;line-height:1.6}.order .acts{flex-direction:column;align-items:stretch;gap:8px;display:flex}.status{background:#eef0f3;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;display:inline-block}.status.ready{color:var(--ok);background:#e6f4ea}.empty{text-align:center;color:var(--muted);padding:60px 0}.toast{background:var(--ink);color:#fff;z-index:60;box-shadow:var(--shadow);border-radius:10px;padding:10px 16px;font-weight:600;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.spinner{border:2px solid #00000026;border-top-color:var(--ink);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=860px){.editor,.editor.no-panel,.editor.no-layers,.editor.no-panel.no-layers{grid-template:"top"56px"stage"minmax(0,1fr)"rail"64px/minmax(0,1fr)}.topbar{gap:6px;padding:0 8px}.topbar .grow:first-of-type{display:none}.topbar .btn.primary{padding:0 12px}.rail{border-right:0;border-top:1px solid var(--line);flex-direction:row;justify-content:space-between;padding:4px 6px;overflow-x:auto}.rail button{flex:1 0 auto;width:auto;min-width:60px;height:54px;padding:0 4px;font-size:10px}.sides button{padding:0 10px}.panel{border-right:0;border-top:1px solid var(--line);z-index:20;border-radius:16px 16px 0 0;height:46vh;position:fixed;inset:auto 0 64px;box-shadow:0 -10px 30px #00000026}.editor.no-panel .panel,.layers{display:none}.stage{padding:64px 12px 24px}.topbar .title .sub,.legend{display:none}.modal-body,.order{grid-template-columns:1fr}.store-head,.store-hero,.store-grid,.dash-head,.dash-body{padding-left:16px;padding-right:16px}.ctxbar{top:8px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.ctx-menu{box-shadow:var(--shadow);z-index:7;background:#fff;border-radius:10px;grid-template-columns:repeat(3,36px);gap:2px;padding:6px;display:grid;position:absolute;top:40px;left:50%;transform:translate(-50%)}.ctx-menu button{border-radius:8px;place-items:center;width:36px;height:36px;display:grid}.ctx-menu button:hover{background:var(--panel-2)}@media (width<=860px){.hide-sm{display:none}.topbar .title{flex:1;min-width:0}.topbar .layers-btn{display:none}}