.context-menu{position:fixed;z-index:20;min-width:158px;max-width:240px;padding:5px;background:#fff;border:1px solid #dde4da;border-radius:9px;box-shadow:0 6px 30px #223d2826;font-size:12px;line-height:1.6}
.context-menu button{border:0;border-radius:5px;background:transparent;width:100%;padding:9px 10px;display:flex;gap:10px;align-items:center;text-align:right;color:#354a3b;font-size:12px}
.context-menu button:hover:not(:disabled),.context-menu button:focus-visible{background:#edf3e9;outline:0}
.context-menu button svg{width:16px;height:16px}
.context-menu button:disabled{opacity:.4}
.copy-menu-hint{display:block;padding:4px 10px 8px;color:#929c93;font-size:10px}
.stage.layer-dragging,.stage.layer-dragging .image-frame{cursor:grabbing!important;touch-action:none}
#copies-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#manual-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hold-ring{position:absolute;width:36px;height:36px;transform:translate(-50%,-50%);z-index:4;pointer-events:none}
.hold-ring svg{width:36px;height:36px;overflow:visible;transform:rotate(-90deg)}
.hold-track{stroke:#ffffffdf;stroke-width:4;fill:#1735201a}
.hold-progress{stroke:#00b84a;stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;animation:hold-fill .5s linear forwards}
@keyframes hold-fill{to{stroke-dashoffset:0}}
#pointer{z-index:2}
.swatch.green{background:#00ff00}
.swatch.copy-blue{background:#667cff}
#selection-layer{image-rendering:pixelated}
#copies-layer{image-rendering:pixelated}
.legend{flex-wrap:wrap;row-gap:8px}
.selection-toolbar{display:flex;align-items:center;gap:14px;min-height:43px;padding:6px 15px;border-bottom:1px solid #e8ece5;background:#fff}
.selection-modes{display:flex;gap:3px;background:#f3f5f0;border:1px solid #e7ebe2;border-radius:7px;padding:3px;flex-shrink:0}
.selection-modes button{border:0;background:transparent;border-radius:4px;padding:5px 10px;font-size:10px;color:#7c877d}
.selection-modes button[aria-pressed=true]{background:#fff;color:#365a40;box-shadow:0 1px 4px #203b1e12}
.selection-help{font-size:10px;color:#949e93;flex:1}
.zoom-tools{display:flex;direction:ltr;align-items:center;gap:3px}
.zoom-tools button{border:0;background:transparent;border-radius:4px;padding:4px 7px;color:#7b877d;font-size:14px}
#zoom-reset{font-size:10px;min-width:38px}
.parking-hint{position:absolute;left:18px;top:14px;font-size:9px;line-height:1.9;color:#a4aea0;pointer-events:none;z-index:0}
.stage{touch-action:none}
.image-frame{box-shadow:0 0 0 1px #bdc7b8,0 4px 16px #2b402215}
@media(max-width:700px){.selection-toolbar{gap:6px;padding:6px 8px;flex-wrap:wrap}.selection-help{order:3;width:100%;flex:auto;font-size:9px}.selection-modes button{padding:5px 8px}.zoom-tools{margin-inline-start:auto}.parking-hint{font-size:8px;left:10px;top:9px}}
@media(max-width:700px){.tools{flex-wrap:wrap}.tools .button{font-size:9px}.legend{gap:12px}}
.editor-body{display:flex;direction:ltr;align-items:stretch}
.editor-body .stage{flex:1;min-width:0;overflow:hidden}
.layers-toggle{font-size:10px;padding:5px 9px;border:1px solid #dce4d8;border-radius:5px;background:#f6f8f3;color:#4d6552;flex-shrink:0}
.layers-toggle[aria-expanded=true]{background:#eaf2e6}
.layers-panel{direction:rtl;width:210px;flex-shrink:0;border-left:1px solid #e4e9e0;background:#fff;display:flex;flex-direction:column;padding:12px;gap:9px}
.layers-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#3a5140}
.layers-heading button{border:0;background:transparent;color:#95a08e;font-size:20px;line-height:1}
.layers-help,.deform-help{font-size:9px;line-height:1.9;color:#97a18f;margin:0}
.layers-list{display:flex;flex-direction:column;gap:5px;max-height:300px;overflow:auto;padding:2px}
.layer-row{display:flex;align-items:center;gap:6px;padding:6px 5px;border:1px solid #e9ede5;border-radius:6px;min-width:0}
.layer-row.is-active{border-color:#9db998;background:#f2f7ee}
.layer-row.is-hidden{background:#f8f9f6;color:#a8afa2}
.layer-eye,.layer-rename{border:0;background:transparent;color:#71816c;padding:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.layer-eye svg,.layer-rename svg{width:15px;height:15px}
.layer-select{border:0;background:transparent;display:flex;gap:6px;align-items:center;text-align:right;padding:0;flex:1;min-width:0;color:#4d624a;font-size:10px}
.layer-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.layer-chip{width:20px;height:20px;display:grid;place-items:center;border-radius:4px;background:#00ff0029;color:#3a5938;font-size:9px;flex-shrink:0}
.layer-chip.copy{background:#667cff36;color:#4a5790}
.layer-name-input{min-width:0;width:100%;border:1px solid #aabda2;border-radius:3px;font-size:10px;padding:3px;color:#40563b;background:white}
.number-option{display:flex;align-items:center;gap:6px;font-size:10px;color:#687b60;padding-top:8px;border-top:1px solid #e9ede5;margin-top:auto}
.number-option input{accent-color:#4f7852;margin:0}
#numbers-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.corner-handles{position:absolute;inset:0;z-index:5;pointer-events:none}
.deform-modes{display:flex;gap:2px;border:1px solid var(--line,#dce4d8);border-radius:6px;padding:2px;flex-shrink:0}
.deform-modes button{padding:5px 7px;border:0;border-radius:4px;background:transparent;color:var(--muted,#71816c);font-size:10px}
.deform-modes button[aria-pressed=true]{background:var(--accent,#667cff);color:var(--bg,#fff)}
.corner-handle.free-pin{border-radius:50%;width:11px;height:11px;border-color:#d9c3fc;background:#76618f;box-shadow:0 0 0 2px #30263980;animation:free-pin-pulse 1.5s ease-in-out infinite;cursor:grab}
.corner-handle.free-pin:hover,.corner-handle.free-pin:focus-visible{border-color:#ffc061;background:#e6a02a;box-shadow:0 0 0 4px #e9a82f44;animation:none}
.corner-handle.free-pin.is-deforming{clip-path:none;border-radius:50%;width:13px;height:13px;background:#ffbd54;border-color:#fff;animation:none;cursor:grabbing}
@keyframes free-pin-pulse{50%{box-shadow:0 0 0 4px #c7a8e933}}
.corner-handle{position:absolute;width:12px;height:12px;padding:0;transform:translate(-50%,-50%);border:1.5px solid #5269dc;border-radius:2px;background:#fff;box-shadow:0 0 0 2px #667cff33;pointer-events:auto;animation:corner-pulse 1.15s ease-in-out infinite;cursor:crosshair;touch-action:none}
.corner-handle:hover,.corner-handle:focus-visible{border-color:#e6a02a;box-shadow:0 0 0 3px #e9a82f44;animation-name:corner-hover}
.corner-handle.is-deforming{animation:none;clip-path:polygon(50% 0,100% 100%,0 100%);background:#eba52f;border-color:#bf7e10;box-shadow:none;width:15px;height:15px}
@keyframes corner-pulse{50%{background:#8d9bff;box-shadow:0 0 0 4px #667cff0d}}
@keyframes corner-hover{50%{background:#ffd37d;box-shadow:0 0 0 5px #e9a82f11}}
@media(max-width:700px){.editor-body{flex-wrap:wrap}.layers-panel{width:100%;border-left:0;border-top:1px solid #e4e9e0}.layers-list{max-height:170px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.layers-help{display:none}.corner-handle{width:16px;height:16px}.layers-toggle{margin-inline-start:auto}}