/* ===== Imagine Tool – AI tools pack (.ax-*) ==========================================================
   New rules only. Reuses the site's variables and the .ux-* comparison slider / info card styles from style.css.
   Works in light and dark mode because every colour comes from the existing CSS variables. */
.ax-pills{justify-content:center;margin-top:14px}
.ax-up{margin:12px 0}
/* preview stage: canvas + optional overlay layer (watermark selection / subject mask) */
.ax-pvw{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%}
.ax-pvw canvas{display:block;max-width:100%;max-height:min(60vh,540px);width:auto;height:auto;border-radius:10px}
.ax-pvw .ax-ov{position:absolute;inset:0;width:100%;height:100%;opacity:.55;cursor:crosshair;touch-action:none;border-radius:10px}
.ax-pvw .ax-ov[hidden]{display:none}
/* AI processing animation: scan line over the preview + animated "neural" bars in the loader */
.ax-scanbox{position:relative;overflow:hidden}
.ax-scanbox.on:after{content:"";position:absolute;left:0;right:0;top:-24%;height:24%;pointer-events:none;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--ac2) 45%,transparent),transparent);animation:axscan 1.6s ease-in-out infinite}
@keyframes axscan{to{top:100%}}
.ax-ai{display:flex;gap:5px;align-items:flex-end;height:26px}
.ax-ai i{width:6px;height:100%;border-radius:3px;background:linear-gradient(var(--ac2),var(--ac));animation:axbar 1s ease-in-out infinite}
.ax-ai i:nth-child(2){animation-delay:.12s}.ax-ai i:nth-child(3){animation-delay:.24s}.ax-ai i:nth-child(4){animation-delay:.36s}.ax-ai i:nth-child(5){animation-delay:.48s}
@keyframes axbar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.ax-scanbox.on:after{animation:none;opacity:.35;top:38%}.ax-ai i{animation:none;transform:scaleY(.6)}}
/* compressor: batch file list */
.ax-files{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;max-height:230px;overflow:auto}
.ax-fi{display:flex;gap:8px;align-items:stretch}
.ax-fi .ax-pick{flex:1;min-width:0;text-align:left;padding:8px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--gl);color:inherit;font:inherit;cursor:pointer}
.ax-fi.on .ax-pick{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 25%,transparent)}
.ax-fi .ax-pick b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-fi .btn{padding:4px 12px}
/* metadata remover */
.ax-mdg{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.ax-md{padding:14px}.ax-md h3{margin:0 0 8px;font-size:1rem}
.ax-md dl,.ax-raw{margin:0;display:grid;gap:6px}.ax-md dl div,.ax-raw div{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;border-bottom:1px dashed var(--bd);padding-bottom:4px}
.ax-md dt,.ax-raw dt{color:var(--mu)}.ax-md dd,.ax-raw dd{margin:0;font-weight:600;text-align:right;word-break:break-word}
.ax-all{padding:12px 16px;margin-bottom:14px}.ax-all summary{cursor:pointer;font-weight:600}.ax-raw{margin-top:10px}
.ax-risk.high{border-color:#e5484d}.ax-risk.medium{border-color:#f5a524}.ax-risk.low{border-color:#30a46c}
/* static article sections: how it works + call to action */
.ax-steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:0;list-style:none}
.ax-steps li{counter-increment:s;position:relative;padding:16px 16px 16px 52px;border:1px solid var(--bd);border-radius:16px;background:var(--gl)}
.ax-steps li:before{content:counter(s);position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--ac),var(--ac2))}
.ax-cta{text-align:center;padding:28px 18px;margin:22px 0}.ax-cta h2{margin-top:0}.ax-cta .btn{padding:12px 28px;font-size:1.05rem}
@media(max-width:900px){.ax-pvw canvas{max-height:46vh}}
.ax-risk.high{background:color-mix(in srgb,#e5484d 14%,transparent)}.ax-risk.medium{background:color-mix(in srgb,#f5a524 16%,transparent)}.ax-risk.low{background:color-mix(in srgb,#30a46c 14%,transparent)}