/* ============================================
   Pixia - Compress Image studio
   (compress-image.html)
   Complements css/ai-tool.css (.at-* primitives)
   Scope: body.at-compress-image
   ============================================ */

body.at-compress-image {
  --ci-accent: #15803d;
  --ci-accent-2: #0d9488;
  --ci-good: #16a34a;
  --ci-warn: #d97706;
  --ci-bad: #dc2626;
  --ci-shadow: 0 16px 34px -18px rgba(21, 128, 61, .6);
  --ci-ease: var(--at-ease, cubic-bezier(.22, .61, .36, 1));
}

html[data-theme="dark"] body.at-compress-image {
  --ci-accent: #22c55e;
  --ci-accent-2: #2dd4bf;
  --ci-good: #4ade80;
  --ci-warn: #fbbf24;
  --ci-bad: #f87171;
  --ci-shadow: 0 16px 34px -18px rgba(34, 197, 94, .55);
}

body.at-compress-image [hidden] { display: none !important; }

/* ---------- Layout ---------- */
body.at-compress-image .ci-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 22px;
  align-items: start;
}
.ci-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  /* The stage stays in view while the settings column scrolls past it. */
  position: sticky;
  top: 18px;
}
.ci-side {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}
body.at-compress-image .ci-panel { padding: 18px; }
body.at-compress-image .ci-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-primary);
}
.ci-count {
  margin-inline-start: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ci-accent);
  background: color-mix(in srgb, var(--ci-accent) 14%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.ci-count:empty { display: none; }

@media (max-width: 1080px) {
  body.at-compress-image .ci-layout { grid-template-columns: minmax(0, 1fr); }
  .ci-main { position: static; }
}

/* ---------- Stage ---------- */
.ci-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ci-stage-title {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-secondary, var(--text-primary));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.ci-view {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--glass-bg);
}
.ci-view.is-disabled { opacity: .5; }
.ci-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .18s var(--ci-ease), background .18s var(--ci-ease);
}
.ci-view-btn:disabled { cursor: not-allowed; }
.ci-view-btn:not(:disabled):hover { color: var(--text-primary); }
.ci-view-btn.is-on {
  background: color-mix(in srgb, var(--ci-accent) 18%, transparent);
  color: var(--ci-accent);
}
.ci-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ci-zoom-btn {
  appearance: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .18s var(--ci-ease), border-color .18s var(--ci-ease);
}
.ci-zoom-btn svg { width: 15px; height: 15px; }
.ci-zoom-btn:hover:not(:disabled) { color: var(--ci-accent); border-color: var(--ci-accent); }
.ci-zoom-btn:disabled { opacity: .4; cursor: not-allowed; }
.ci-zoom-fit { width: auto; padding-inline: 10px; font-size: .74rem; font-weight: 600; }
.ci-zoom-out { font-size: .72rem; color: var(--text-muted); min-width: 40px; text-align: center; }

.ci-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  /* The main column is sticky, so a stage taller than the window puts the
     divider handle below the fold with nothing left to scroll past. */
  max-height: min(738px, calc(100vh - 140px));
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  overflow: auto;
}
.ci-stage-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 380px;
  color: var(--text-muted);
  text-align: center;
}
.ci-stage-empty svg { width: 44px; height: 44px; opacity: .5; }
.ci-stage-empty p { margin: 0; font-size: .82rem; line-height: 1.55; }

/* Checkerboard only where the image itself is transparent. */
.ci-checker {
  background-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 12%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--text-primary) 12%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 12%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--text-primary) 12%, transparent) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  border-radius: 8px;
}
.ci-zoomed { cursor: grab; }
.ci-zoomed.is-dragging { cursor: grabbing; }

.ci-cmp {
  position: relative;
  margin: auto;
  line-height: 0;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
/* Width is what carries the zoom and everything in the box follows it -- both
   layers are 100% of the wrap and the divider clip is a percentage -- so
   animating width glides the whole comparison instead of snapping it. The
   class is switched on only for a zoom click (see setZoom) so a window resize
   refit stays instant. */
.ci-cmp.ci-zoom-anim {
  transition: width .18s cubic-bezier(.25, .6, .35, 1);
}
/* The before layer must fill the wrap, not merely be capped by it. With
   max-width alone the image freezes at its intrinsic width once the zoom box
   passes that number, while the result layer above it keeps tracking the wrap
   at 100% -- the two slide apart and Compare looks like two side-by-side
   images instead of one clipped pair. */
.ci-cmp-before {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}
.ci-cmp-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  will-change: clip-path;
}
/* One node backs all three views and the JS only moves the clip, so switching
   tabs cannot blank the preview. The divider itself belongs to Compare alone. */
.ci-cmp-line,
.ci-cmp-tag,
.ci-cmp-range,
.ci-cmp-same { display: none; }
.ci-cmp.is-cmp .ci-cmp-line,
.ci-cmp.is-cmp .ci-cmp-tag,
.ci-cmp.is-cmp .ci-cmp-range,
.ci-cmp.is-cmp .ci-cmp-same { display: block; }
.ci-cmp-line {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 12px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.ci-cmp-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.ci-cmp-tag {
  position: absolute;
  top: 10px;
  z-index: 2;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
}
.ci-cmp-tag-a { inset-inline-start: 10px; }
.ci-cmp-tag-b {inset-inline-end: 10px;background: none;}
.ci-cmp-same {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 82%, transparent);
  padding: 6px 12px;
  border-radius: 8px;
  line-height: 1.2;
  white-space: nowrap;
}
/* css/tool.css styles every input[type=range] on the site as a 6px orange
   slider, at (0,1,1). This one is not a slider -- it is the whole hit area of
   the divider, so it must cover the pair and paint nothing. The extra class in
   the selector is what lifts it over that global rule. */
.ci-stage input.ci-cmp-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  cursor: ew-resize;
}
.ci-stage input.ci-cmp-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ci-stage input.ci-cmp-range::-moz-range-thumb {
  width: 0;
  height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ci-stage input.ci-cmp-range::-moz-range-track {
  background: transparent;
  border: 0;
}
/* The keyboard handle: the real thumb is 0px, so the focus ring goes on the
   circle the user is actually looking at. */
.ci-cmp:has(.ci-cmp-range:focus-visible) .ci-cmp-line::after {
  outline: 2px solid var(--ci-accent);
  outline-offset: 3px;
}

/* ---------- Stage readout ---------- */
.ci-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  margin-top: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass-border);
}
.ci-info-cell {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: var(--glass-bg);
}
.ci-info-k {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ci-info-v {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ci-info-good { color: var(--ci-good); }
.ci-info-warn { color: var(--ci-warn); }

.ci-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin: 12px 0 0;
  font-size: .72rem;
  color: var(--text-muted);
}
.ci-keys kbd {
  font: inherit;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
}
.ci-keys span:not(:last-child) { margin-inline-end: 8px; }

/* ---------- Drop zone + queue ---------- */
.ci-drop {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 100%;
  padding: 24px 16px;
  border: 1.5px dashed var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s var(--ci-ease), background .2s var(--ci-ease);
}
.ci-drop:hover { border-color: var(--ci-accent); }
.ci-drop:focus-visible { outline: 2px solid var(--ci-accent); outline-offset: 2px; }
.ci-drop.is-drag {
  border-color: var(--ci-accent);
  background: color-mix(in srgb, var(--ci-accent) 12%, var(--glass-bg));
}
.ci-drop-icon svg { width: 26px; height: 26px; }
.ci-drop-title { font-size: .88rem; font-weight: 700; color: var(--text-primary); }
.ci-drop-sub { font-size: .76rem; line-height: 1.5; }
.ci-drop-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .68rem;
}
.ci-drop-meta span {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent);
  color: var(--text-muted);
}
.ci-files { display: grid; gap: 8px; margin-top: 12px; }
.ci-files[data-has="0"] { display: none; }
.ci-files-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.ci-file {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color .18s var(--ci-ease), box-shadow .18s var(--ci-ease);
  margin-bottom: 5px;
}
.ci-file:hover { border-color: var(--glass-border-hover, var(--ci-accent)); }
.ci-file.is-active {
  border-color: #22c55e4d;
}
.ci-file.is-busy { opacity: .72; }
.ci-file.is-error { border-color: color-mix(in srgb, var(--ci-bad) 55%, var(--glass-border)); }
.ci-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
  place-items: center;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.ci-thumb img {width: 100%;height: 100%;object-fit: contain;display: block;}
.ci-thumb-spin {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .5);
}
.ci-thumb-spin i {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--ci-accent);
  border-radius: 50%;
  animation: ci-spin .8s linear infinite;
}
@keyframes ci-spin { to { transform: rotate(360deg); } }
.ci-file-main { min-width: 0; display: grid; gap: 2px; }
.ci-file-name {
  font-size: .79rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-file-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ci-file-arrow { opacity: .6; }
.ci-file-new { color: var(--ci-good); font-weight: 700; }
.ci-file-up { color: var(--ci-warn); font-weight: 700; }
.ci-badge {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.ci-badge-new {
  color: var(--ci-good);
  border-color: color-mix(in srgb, var(--ci-good) 45%, transparent);
  background: color-mix(in srgb, var(--ci-good) 12%, transparent);
}
.ci-badge-gps {
  color: var(--ci-bad);
  border-color: color-mix(in srgb, var(--ci-bad) 45%, transparent);
  background: color-mix(in srgb, var(--ci-bad) 12%, transparent);
}
.ci-file-side { display: flex; align-items: center; gap: 4px; }
.ci-icon-btn {
  appearance: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s var(--ci-ease), background .16s var(--ci-ease);
}
.ci-icon-btn svg { width: 14px; height: 14px; }
.ci-icon-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.ci-icon-btn.ci-icon-dl:hover { color: var(--ci-accent); }
.ci-icon-btn.ci-icon-x:hover { color: var(--ci-bad); }

/* ---------- Buttons ---------- */
.ci-mini {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: var(--glass-bg);
  color: var(--text-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .16s var(--ci-ease), border-color .16s var(--ci-ease);
}
.ci-mini svg { width: 13px; height: 13px; }
.ci-mini:hover { color: var(--text-primary); border-color: var(--ci-accent); }
.ci-mini-danger:hover { color: var(--ci-bad); border-color: var(--ci-bad); }
.ci-mini-stop { width: 100%; justify-content: center; margin-top: 8px; }

body.at-compress-image .ci-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ci-accent);
  border-color: var(--ci-accent);
  color: #06231a;
  font-weight: 700;
}
html[data-theme="dark"] body.at-compress-image .ci-btn-primary { color: #052e16; }
body.at-compress-image .ci-btn-primary:hover { filter: brightness(1.08); box-shadow: var(--ci-shadow); }
/* The run button used to sit under the file list, where nothing preceded it.
   In its own panel the h2 already supplies the gap, so only the width is
   needed here. */
.ci-btn-run { width: 100%; }
.ci-btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }
.ci-btn-primary svg { width: 16px; height: 16px; }

.ci-progress {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: .72rem;
  color: var(--text-muted);
}
.ci-bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.ci-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--ci-accent);
  transition: width .3s var(--ci-ease);
}

/* ---------- Form fields ---------- */
.ci-field { display: grid; gap: 7px; margin-bottom: 14px; }
.ci-field:last-child { margin-bottom: 0; }
.ci-legend {
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ci-hint {
  margin: 0;
  font-size: .72rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.ci-select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: .8rem;
}
.ci-select:focus { border-color: var(--ci-accent); }
.ci-format-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; }
.ci-target-row { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 8px; }
.ci-num {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.ci-num:focus { border-color: var(--ci-accent); outline: none; }

.ci-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.ci-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ci-switch i {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 16%, transparent);
  border: 1px solid var(--glass-border);
  position: relative;
  transition: background .2s var(--ci-ease), border-color .2s var(--ci-ease);
}
.ci-switch i::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s var(--ci-ease), background .2s var(--ci-ease);
}
.ci-switch input:checked + i {
  background: color-mix(in srgb, var(--ci-accent) 42%, transparent);
  border-color: var(--ci-accent);
}
.ci-switch input:checked + i::after {
  transform: translateX(14px);
  background: var(--ci-accent);
}
html[dir="rtl"] .ci-switch input:checked + i::after { transform: translateX(-14px); }
.ci-switch input:focus-visible + i { outline: 2px solid var(--ci-accent); outline-offset: 2px; }

.ci-range-row { display: flex; align-items: center; gap: 10px; }
.ci-range { flex: 1 1 auto; min-width: 0; accent-color: var(--ci-accent); }
.ci-range-out {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: end;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ci-accent);
  font-variant-numeric: tabular-nums;
}
.ci-ticks {
  display: flex;
  justify-content: space-between;
  font-size: .64rem;
  color: var(--text-muted);
}

/* ---------- Presets ---------- */
.ci-preset-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.ci-preset {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--glass-bg);
  cursor: pointer;
  transition: border-color .18s var(--ci-ease), background .18s var(--ci-ease);
}
.ci-preset input { position: absolute; opacity: 0; pointer-events: none; }
.ci-preset b { font-size: .78rem; font-weight: 700; color: var(--text-primary); }
.ci-preset i { font-size: .68rem; font-style: normal; color: var(--text-muted); line-height: 1.35; }
.ci-preset:hover { border-color: var(--ci-accent); }
/* The selected state is set by js/compress-image.js as a class rather than
   :has(input:checked), so it does not depend on :has() support. */
.ci-preset.is-on {
  border-color: var(--ci-accent);
  background: color-mix(in srgb, var(--ci-accent) 12%, var(--glass-bg));
}
.ci-preset.is-on b { color: var(--ci-accent); }
.ci-preset input:focus-visible + b { outline: 2px solid var(--ci-accent); outline-offset: 2px; }

/* ---------- Advanced ---------- */
.ci-adv { margin-top: 16px; border-top: 1px solid var(--glass-border); padding-top: 12px; }
.ci-adv > summary {
  cursor: pointer;
  list-style: none;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.ci-adv > summary::-webkit-details-marker { display: none; }
.ci-adv > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-inline-end: 2px solid var(--text-muted);
  border-block-end: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .2s var(--ci-ease);
}
.ci-adv[open] > summary::before { transform: rotate(-135deg); }
.ci-adv > .ci-hint { margin-block-start: 8px; }
.ci-adv-block {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.ci-adv-block[data-hidden="1"] { display: none; }
.ci-adv-block > .ci-field { margin-bottom: 8px; }

/* ---------- Metadata ---------- */
.ci-meta { margin-top: 12px; display: grid; gap: 6px; }
.ci-meta-none { margin: 0; font-size: .74rem; color: var(--text-muted); }
.ci-meta-row {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  gap: 8px;
  font-size: .71rem;
  padding: 5px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.ci-meta-k { color: var(--text-muted); font-weight: 600; }
.ci-meta-v {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ci-meta-row.is-gps {
  background: color-mix(in srgb, var(--ci-bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ci-bad) 32%, transparent);
}
.ci-meta-more { font-size: .7rem; color: var(--text-muted); }
.ci-meta-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--ci-warn) 38%, transparent);
  background: color-mix(in srgb, var(--ci-warn) 10%, transparent);
  color: var(--ci-warn);
}

/* ---------- Codec status ---------- */
.ci-codec { display: grid; gap: 6px; }
.ci-codec-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  font-size: .73rem;
  color: var(--text-primary);
}
.ci-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.ci-dot.is-ready { background: var(--ci-good); }
.ci-dot.is-loading { background: var(--ci-warn); animation: ci-pulse 1.1s ease-in-out infinite; }
.ci-dot.is-failed { background: var(--ci-bad); }
@keyframes ci-pulse { 50% { opacity: .3; } }
.ci-codec-state { color: var(--text-muted); font-size: .68rem; }

/* ---------- Batch totals ---------- */
.ci-total-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.ci-total-cell {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
}
.ci-total-hero {
  border-color: color-mix(in srgb, var(--ci-accent) 45%, transparent);
  background: color-mix(in srgb, var(--ci-accent) 10%, var(--glass-bg));
}
.ci-total-k {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ci-total-v {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ci-total-hero .ci-total-v { color: var(--ci-accent); }
.ci-total-v.ci-total-up { color: var(--ci-warn); }
.ci-total-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 10px;
}
.ci-total-actions .ci-btn-primary { flex: 1 1 auto; }

/* ---------- Accent sweep for the shared chrome ---------- */
body.at-compress-image .at-badge svg { color: var(--ci-accent); }
body.at-compress-image .at-kicker {color: white;}
body.at-compress-image .at-faq-item[open] summary { color: var(--ci-accent); }
body.at-compress-image .at-step-num { color: var(--ci-accent); }
body.at-compress-image .at-related a:hover {
  border-color: var(--ci-accent);
  color: var(--ci-accent);
}

/* ---------- Readable measurements in RTL ---------- */
/* "1.4 MB", "-93%" and "44.7 dB" are Latin measurements: inside an RTL
   paragraph the bidi algorithm splits each figure from its unit and moves the
   sign to the far side. Isolating them keeps the row mirroring while the
   numbers stay in the order they were written. The arrow is left out on
   purpose -- it should flip to point the other way. */
.ci-file-meta > span:not(.ci-file-arrow),
.ci-info-v,
.ci-total-v,
.ci-meta-k,
.ci-meta-v,
.ci-zoom-out {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .ci-cmp.ci-zoom-anim { transition: none; }
}