/* Compress Image. Needs /assets/css/modern-tool-cards.css and /assets/css/image-tools.css. */
.cm-select {
  width: 100%; height: 2.6rem; padding: 0 .9rem; font: inherit; font-size: .92rem;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px;
}
.cm-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.cm-compare { display: flex; align-items: center; gap: .6rem; }
.cm-compare i { color: var(--tc-muted); flex: 0 0 auto; }
.cm-compare__box { flex: 1 1 0; display: grid; gap: .1rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 12px; padding: .6rem .7rem; text-align: center; }
.cm-compare__label { font-size: .72rem; font-weight: 600; color: var(--tc-muted); text-transform: uppercase; letter-spacing: .03em; }
.cm-compare__value { font-size: .98rem; font-weight: 700; color: var(--tc-text); font-variant-numeric: tabular-nums; }

.cm-saving { margin: 0; text-align: center; font-size: .88rem; font-weight: 700; color: #16a34a; }
.cm-saving.cm-saving--worse { color: #dc2626; }

.cm-hint { margin: 0; display: flex; gap: .4rem; font-size: .8rem; color: var(--tc-muted); }
.cm-hint i { color: var(--accent); margin-top: .15rem; flex: 0 0 auto; }