/* =============================================================
   Image / Media Extractor — tool-specific styles
   Built on the shared design system (styles.css).
   ============================================================= */

.ime-source { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 14px; }
.ime-source .grow { flex: 1 1 220px; min-width: 0; }
.ime-source .ic { width: 18px; height: 18px; }

.ime.droplit { outline: 2px dashed var(--brand); outline-offset: -8px; border-radius: 12px; }
.ime-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: #1f2430; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 26px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60; max-width: 90vw; }
.ime-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ime-toast.err { background: #7a1f1f; }

.ime-block { display: flex; gap: 12px; align-items: center; padding: 16px 18px; }
.ime-block-ico { font-size: 22px; }
.ime-banner { display: flex; gap: 12px; align-items: center; padding: 16px 18px; }
.ime-banner.ok { border-left: 4px solid #2e9e57; }
.ime-banner-ico { font-size: 20px; color: #2e9e57; }
.ime-banner-title { font-weight: 600; color: var(--text); }

/* ---- summary / action bar ---- */
.ime-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; margin-bottom: 14px; }
.ime-summary .grow { flex: 1 1 auto; }
.ime-sum { display: flex; align-items: baseline; gap: 8px; }
.ime-sum-n { font-size: 20px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.ime-sum-t { font-size: 13px; color: var(--text-soft); }
.ime-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ime-chip { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text-soft); cursor: pointer; }
.ime-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ime-selall { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); cursor: pointer; }
.btn.btn-sm { padding: 5px 12px; font-size: 13px; }

/* ---- media gallery (masonry columns) ----
   Each card takes its image's NATURAL aspect ratio, so portrait, landscape and square
   previews all show without letterboxing or forced cropping. Thumbnails are rendered at
   high resolution (see loadThumb) and only scaled DOWN here, so they stay sharp. */
.ime-grid { column-width: 176px; column-gap: 12px; margin-bottom: 14px; }
.ime-card { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); overflow: hidden; }
.ime-thumbwrap { position: relative; display: block; min-height: 44px; cursor: pointer; line-height: 0; background:
  repeating-conic-gradient(#0000000d 0% 25%, transparent 0% 50%) 50% / 16px 16px, var(--bg); }
.ime-cb { position: absolute; top: 7px; left: 7px; width: 18px; height: 18px; z-index: 2; cursor: pointer;
  accent-color: var(--brand); border-radius: 4px; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ime-thumb { width: 100%; height: auto; display: block; }
.ime-thumb.tall { height: 300px; object-fit: cover; object-position: top center; }   /* extreme-tall: crisp top crop */
.ime-thumb.small { width: auto; height: auto; max-width: 100%; max-height: 240px; margin: 14px auto; }   /* tiny source: natural size, centered, crisp */
.ime-thumb-ic { display: flex; align-items: center; justify-content: center; width: 100%; height: 108px; font-size: 40px; line-height: 1; }
.ime-body { padding: 8px 10px 4px; min-width: 0; }
.ime-name { font-size: 12.5px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ime-meta { font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ime-dl { margin: 6px 10px 10px; }

.ime-legal { margin-top: 22px; font-size: 12px; color: var(--text-soft); line-height: 1.6; }
.ime-legal p { margin: 2px 0; }