/* dt-asset-stage.css — companion of dt-asset-stage.js (2026-09-21). Tool-agnostic:
   the layer sits over the picture's drawn area; placed assets carry a selection
   outline with corner handles, a rotate knob and a bar (perspective / reset /
   flip / delete) under it. */
.dt-as-layer {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    outline: 2px dashed transparent;
    outline-offset: -2px;
    border-radius: 4px;
    transition: outline-color .15s ease, background-color .15s ease;
}
.dt-as-layer[hidden] { display: none !important; }
body.dt-as-dragging .dt-as-layer { outline-color: rgba(37, 99, 235, .45); }
.dt-as-layer.is-drop { outline-color: #2563eb; background: rgba(37, 99, 235, .08); }

.dt-as-item {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.dt-as-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}
/* the outline follows the four corners (a warped asset is any convex quad) */
.dt-as-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.dt-as-frame polygon {
    fill: none;
    stroke: transparent;
    stroke-width: 1.5;
}
.dt-as-item:hover .dt-as-frame polygon { stroke: rgba(37, 99, 235, .5); }
.dt-as-item.is-sel .dt-as-frame polygon { stroke: #2563eb; }
.dt-as-item.is-persp .dt-as-frame polygon { stroke-dasharray: 5 4; }

.dt-as-h,
.dt-as-rot { display: none; }
.dt-as-item.is-sel .dt-as-h,
.dt-as-item.is-sel .dt-as-rot { display: block; }

.dt-as-h {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: #fff;
    border: 1.5px solid #2563eb;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* corner handles sit on the item's corner points (JS writes left / top) */
.dt-as-h[data-i="0"], .dt-as-h[data-i="2"] { cursor: nwse-resize; }
.dt-as-h[data-i="1"], .dt-as-h[data-i="3"] { cursor: nesw-resize; }
/* perspective mode: round handles, each corner moves on its own */
.dt-as-item.is-persp .dt-as-h {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #2563eb;
    border-color: #fff;
    cursor: move;
}

/* rotate knob: a circle on a short stem above the top edge */
.dt-as-rot {
    position: absolute;
    left: 50%;
    top: -30px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    border: 1.5px solid #2563eb;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.dt-as-rot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1.5px;
    height: 16px;
    margin-left: -.75px;
    background: #2563eb;
    pointer-events: none;
}
.dt-as-layer.is-busy .dt-as-rot { cursor: grabbing; }

/* flip / delete: a small pill centred under the frame, clear of the corners
   (they stay free for handles - resize now, perspective later) */
.dt-as-bar {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    display: none;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    white-space: nowrap;
    cursor: default;
}
.dt-as-item.is-sel .dt-as-bar { display: flex; }
/* the tools in one pill; Bring to front apart, on its left */
.dt-as-pill,
.dt-as-front {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.dt-as-pill {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
}
.dt-as-btn.dt-as-front { width: 34px; height: 34px; }
.dt-as-front.is-top { opacity: .45; }
.dt-as-btn {
    display: block;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #111827;
    background: transparent;
}
.dt-as-btn[hidden] { display: none; }
.dt-as-btn svg { display: block; margin: auto; }
.dt-as-btn.is-on { color: #fff; background: #2563eb; }
.dt-as-btn:hover { color: #fff; background: #2563eb; }
.dt-as-del:hover { background: #dc2626; }

body.dark-mode .dt-as-pill,
body.dark-mode .dt-as-front { background: #2a2a2e; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
body.dark-mode .dt-as-btn { color: #f5f5f6; }
body.dark-mode .dt-as-btn.is-on { color: #fff; background: #2563eb; }
body.dark-mode .dt-as-btn:hover { color: #fff; background: #2563eb; }
body.dark-mode .dt-as-del:hover { background: #dc2626; }

/* the drag ghost follows the pointer */
.dt-as-ghost {
    position: fixed;
    z-index: 100000;
    width: 96px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.9);
    opacity: .85;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
    transition: transform .12s ease, opacity .12s ease;
}
.dt-as-ghost.is-over { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.dt-as-ghost img { display: block; width: 100%; height: auto; }
body.dt-as-dragging,
body.dt-as-dragging * { cursor: grabbing !important; user-select: none !important; }

/* per-asset actions (e.g. remove background): one click arms the button - it
   grows into a blue pill with its confirm text (the cost) - a second click runs
   it. While running, a spinner turns in the button and the asset breathes. */
.dt-as-act {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
}
.dt-as-act[hidden] { display: none; }
.dt-as-act-txt { display: none; font-size: 12px; font-weight: 600; line-height: 1; }
.dt-as-act.is-arm,
body.dark-mode .dt-as-act.is-arm {
    width: auto;
    padding: 0 11px 0 9px;
    border-radius: 999px;
    color: #fff;
    background: #2563eb;
}
.dt-as-act.is-arm .dt-as-act-txt { display: inline; }
.dt-as-spin { display: none; }
.dt-as-act.is-run,
.dt-as-act.is-run:hover,
body.dark-mode .dt-as-act.is-run:hover { cursor: default; color: inherit; background: transparent; }
.dt-as-act.is-run svg { visibility: hidden; }
.dt-as-act.is-run .dt-as-spin {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dt-as-spin .8s linear infinite;
}
.dt-as-item.is-working .dt-as-img { animation: dt-as-breathe 1.4s ease-in-out infinite; }
@keyframes dt-as-spin { to { transform: rotate(360deg); } }
@keyframes dt-as-breathe { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .dt-as-item.is-working .dt-as-img { animation: none; opacity: .6; }
}