.upload{transition:border-color .14s,background-color .14s,box-shadow .14s,transform .14s}.upload.is-dragging{background:#eaf1ff;border-style:solid;border-color:#4380ff;transform:scale(1.015);box-shadow:0 0 0 4px #4380ff2e}.upload.is-dragging .upload-icon{color:#fff;background:#4380ff}.cat-picker{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.cat-picker button{background:#fff;border:1px solid #cbd5e4;border-radius:9px;height:72px;padding:5px}.cat-picker button:hover{background:#f7faff;border-color:#4380ff}.cat-picker img{object-fit:contain;width:100%;height:100%}.cat-transform{gap:9px;margin-top:13px;display:grid}.cat-transform>span{color:#525d70;font-size:12px;font-weight:700}.cat-transform input[type=range]{accent-color:#4380ff;width:100%}.remove-cat{color:#a83e4a;background:#fff;border:1px solid #e2aeb4;border-radius:8px;padding:8px;font-size:12px;font-weight:700}.remove-cat:disabled{opacity:.4}.subtitle-warning{color:#684b08;background:#fff8df;border:1px solid #f0cd7a;border-radius:8px;margin:-2px 0 2px;padding:9px 11px;font-size:12px;line-height:1.35}:root{--blue:#4380ff;--ink:#172033;--muted:#697386;--line:#dfe5ef;--paper:#f5f7fb}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:70px;padding:0 32px;display:flex}.brand{align-items:center;gap:10px;font-size:21px;font-weight:800;display:flex}.brand-mark{color:#fff;background:var(--blue);border-radius:11px;place-items:center;width:34px;height:34px;font-size:18px;display:grid}.brand em{color:var(--muted);border-left:1px solid var(--line);padding-left:10px;font-size:13px;font-style:normal;font-weight:500}.workspace{grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 70px);display:grid}.controls{border-right:1px solid var(--line);background:#fff;padding:27px 24px 40px}.step{align-items:center;gap:12px;margin-bottom:15px;display:flex}.step b{color:#fff;background:var(--blue);border-radius:50%;flex:0 0 26px;place-items:center;height:26px;font-size:13px;display:grid}.step div{gap:3px;display:grid}.step strong{font-size:14px}.step span,.hint{color:var(--muted);font-size:12px}.upload{color:#315eaa;cursor:pointer;overflow-wrap:anywhere;text-align:center;border:1.5px dashed #aebbd0;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:92px;padding:10px;font-size:13px;font-weight:700;display:flex}.upload:hover{border-color:var(--blue);background:#f7faff}.upload input{display:none}.upload-icon{background:#eaf1ff;border-radius:50%;place-items:center;width:28px;height:28px;font-size:18px;display:grid}.divider{background:var(--line);height:1px;margin:25px 0}.field{gap:7px;margin-top:13px;display:grid}.field span{color:#525d70;font-size:12px;font-weight:700}.field input,.field textarea{width:100%;color:var(--ink);resize:none;background:#fff;border:1px solid #cfd7e4;border-radius:9px;outline:none;padding:10px 11px;font-size:13px}.field textarea{height:66px}.field input:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #4380ff20}.cat-actions{grid-template-columns:1fr auto;gap:8px;display:grid}.cat-actions button{color:#315eaa;background:#fff;border:1px solid #cbd5e4;border-radius:8px;padding:9px 11px;font-size:12px;font-weight:700}.cat-actions button:disabled{opacity:.4;cursor:default}.hint{margin:9px 0 0}.stage{min-width:0;padding:28px clamp(20px,4vw,64px) 50px}.stage-head{justify-content:space-between;align-items:end;max-width:1180px;margin:0 auto 14px;display:flex}.stage-head div{align-items:baseline;gap:10px;display:flex}.stage-head strong{font-size:18px}.stage-head span{color:var(--muted);font-size:12px}.drag-note{color:#63708a!important}.canvas-wrap{border:1px solid var(--line);background:#fff;border-radius:16px;max-width:1180px;margin:auto;padding:9px;box-shadow:0 16px 45px #273a6212}canvas{touch-action:none;cursor:grab;background:#dce4f4;border-radius:10px;width:100%;height:auto;display:block}canvas:active{cursor:grabbing}.save{background:var(--blue);color:#fff;border:0;border-radius:9px;font-weight:800;box-shadow:0 5px 14px #4380ff35}.top-save{padding:10px 18px;font-size:13px}.bottom-save{margin:22px auto 0;padding:13px 24px;display:block}@media (width<=820px){.topbar{padding:0 16px}.brand em,.top-save{display:none}.workspace{flex-direction:column;display:flex}.controls{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px}.stage{padding:22px 12px 40px}.drag-note{display:none}}
