/* Collage Maker reuses ToolPaxa's existing card, field and upload system. */
.image-collage #collage-frame{display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:120px;max-width:100%;background-color:#fafbfd;background-image:linear-gradient(45deg,#e4eaf3 25%,transparent 25%),linear-gradient(-45deg,#e4eaf3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4eaf3 75%),linear-gradient(-45deg,transparent 75%,#e4eaf3 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.image-collage #collage-frame[hidden],.image-collage #collage-result[hidden]{display:none!important}
.image-collage #collage-preview{display:block;max-width:100%;max-height:560px;width:auto;height:auto;object-fit:contain}
.image-collage .file-row{flex-wrap:wrap;min-width:0;gap:8px}
.image-collage .file-name{overflow-wrap:anywhere;unicode-bidi:plaintext}
.image-collage .collage-focus-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%;padding-block:4px}
.image-collage .collage-focus-control{display:flex;gap:6px;flex:1 1 180px;align-items:center;font-size:.78rem;color:var(--muted,#64748b)}
.image-collage .collage-focus-control span{flex:1 1 110px}
.image-collage .collage-focus-control input{flex:1;min-width:70px;width:90px}
.image-collage #collage-result{padding:1.5rem;border:1px solid var(--border,#d9e2f0);border-radius:16px;margin-top:24px}
.image-collage input[type=number]{max-width:100%;box-sizing:border-box}
@media(max-width:680px){.image-collage #collage-frame{min-height:80px}.image-collage .file-actions .icon-button{min-width:36px;min-height:36px}.image-collage .collage-focus-control{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.image-collage *{scroll-behavior:auto!important;animation:none!important}}

/* Pointer drag repositions a crop inside a tile or highlights a target tile to swap. */
.image-collage #collage-frame{position:relative}
.image-collage #collage-preview{touch-action:none;cursor:grab}
.image-collage #collage-preview.is-dragging{cursor:grabbing}
.image-collage #collage-swap-target{position:absolute;z-index:2;pointer-events:none;border:3px solid #0d9488;outline:2px solid #fff;outline-offset:-6px;background:rgba(13,148,136,.17);border-radius:6px;box-sizing:border-box}
.image-collage #collage-swap-target[hidden]{display:none!important}