.bg-option:hover {
        transform: scale(1.05);
        transition: 0.2s;
    }
#canvas:hover #bg-resize-handle {
    opacity: 1;
}
#bg-resize-handle {
    opacity: 0;
    transition: 0.2s;
}
#cropPopup {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#111;
    padding:16px;
    display:none;
    z-index:10000;
    border-radius:8px;
    color:#fff;
    max-width:95%;
}
#cropCanvas {
    position:relative;
    width:100%;
    max-width:600px;
    aspect-ratio: 3 / 2;
    background:#000;
    overflow:hidden;
    touch-action:none;
}
#cropCanvas #cropSource,
#cropCanvas #cropVideoSource {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    z-index:10;
    pointer-events:none;
} /* Crop overlay: only border and handles, no opaque fill */
.crop-overlay {
    position:absolute;
    border:2px dashed rgba(255,255,255,0.95);
    background: transparent; /* transparent so image is fully visible */
    box-sizing:border-box;
    z-index:20;
    touch-action:none;
}
.crop-handle {
    position:absolute;
    width:12px;
    height:12px;
    background:#fff;
    border-radius:2px;
    transform:translate(-50%,-50%);
    z-index:30;
    box-shadow:0 0 0 1px rgba(0,0,0,0.6) inset;
}