/* Image Compressor: only the parts the shared Media Engine skeleton doesn't already have. */

/* Live summary in the top bar */
.ic-sum { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); }
.ic-sum span { display: grid; gap: 1px; min-width: 84px; padding: 4px 12px; border-radius: 9px; text-align: center; }
.ic-sum span + span { box-shadow: -1px 0 0 var(--line); }
.ic-sum small { color: #71717a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ic-sum b { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.ic-sum .ic-saved b { color: #4ade80; }
.ic-sum.worse .ic-saved b { color: #fbbf24; }

/* Slider like Video to GIF */
.ic-slider { width: 100%; accent-color: #8b5cf6; }
.ic-three { grid-template-columns: repeat(3, 1fr) !important; }
.ic-est { margin: 0; color: #d4d4d8; font-size: 13px; line-height: 1.7; }
.ic-est b { color: #fff; }
.ic-est .good { color: #4ade80; }
.ic-est .warn { color: #fbbf24; }
.ic [data-fmt][disabled] { opacity: .4; cursor: not-allowed; }

/* Small "working" pill while a new version is made */
.ic-working { position: absolute; left: 50%; bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; transform: translateX(-50%);
  background: rgba(10,10,15,.85); color: #d4d4d8; font: 600 12px Inter, system-ui, sans-serif; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.ic-working span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: #a78bfa; animation: icSpin .8s linear infinite; }
@keyframes icSpin { to { transform: rotate(360deg); } }

/* Compare: the line is drawn on the overlay canvas, so the stage shows a sideways cursor */
.ic[data-tool="compare"] .mx-board { cursor: ew-resize; }

@media (max-width: 760px) {
  .ic-sum span { min-width: 0; padding: 3px 8px; }
  .ic-sum small { font-size: 9px; }
  .ic-sum b { font-size: 12px; }
}