.tg-compressionTerminal[hidden]{display:none!important}.tg-compressionTerminal{margin-top:20px;min-width:0;overflow:hidden;border:1px solid #334155;border-radius:15px;background:#0b1220;color:#dbeafe;box-shadow:0 12px 24px #0f172a14}.tg-compressionTerminalHeader{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:13px 16px;border-bottom:1px solid #334155;background:#162033;font-size:13px}.tg-compressionTerminalHeader strong:before{content:'●';color:#34d399;margin-right:9px}.tg-compressionTerminalHeader span{color:#94a3b8;font-size:12px;font-variant-numeric:tabular-nums}.tg-compressionTerminalLog{max-height:240px;min-height:70px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#475569 #0b1220;padding:10px 16px;font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}.tg-compressionTerminalLog:focus-visible{outline:2px solid #60a5fa;outline-offset:-3px}.tg-compressionTerminalRow{display:flex;flex-wrap:wrap;gap:4px 12px;padding:7px 0;border-bottom:1px solid #1e293b;overflow-wrap:anywhere}.tg-compressionTerminalRow:last-child{border:0}.tg-compressionTerminalRow strong{color:#f1f5f9;font-weight:500}.tg-compressionTerminalRow span{color:#93c5fd}.tg-compressionTerminalRow.is-done span{color:#6ee7b7}.tg-compressionIndeterminate{overflow:hidden}.tg-compressionIndeterminate>span{animation:tg-compressionActivity 1.5s ease-in-out infinite}#tg-converterApp:is([data-tool="image-compressor"],[data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) .tg-progressMeta{flex-wrap:wrap;gap:8px}#tg-converterApp:is([data-tool="image-compressor"],[data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) #tg-progressMessage{overflow-wrap:anywhere}@keyframes tg-compressionActivity{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}@media(prefers-reduced-motion:reduce){.tg-compressionIndeterminate>span{animation:none;transform:translateX(90%)}}

/* Both tools share this activity UI and can use 90% of the available page width. */
.tg-toolPage:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) {
  width: 90%;
  max-width: none;
}

#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]),
#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) .tg-uploader {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) .tg-converterGrid {
  min-width: 0;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) :is(.tg-panel, .tg-fileItem, .tg-progressMeta) {
  min-width: 0;
}

#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) .tg-fileName {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.tg-compressionTerminal {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.tg-compressionTerminalHeader > *,
.tg-compressionTerminalLog,
.tg-compressionTerminalRow {
  min-width: 0;
  max-width: 100%;
}

.tg-compressionTerminalLog {
  overflow-x: hidden;
  overflow-y: auto;
}

.tg-compressionTerminalRow strong,
.tg-compressionTerminalRow span {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tg-compressionTerminalRow strong {
  flex: 1 1 280px;
}

.tg-compressionTerminalRow span {
  flex: 1 1 360px;
}

#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) #tg-progressMessage {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  #tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"]) .tg-converterGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Conversion updates must never make the browser reposition the document. */
html:has(#tg-converterApp:is([data-tool="image-compressor"], [data-tool="gif-webp-converter"], [data-tool="jpg-png-to-webp"])) {
  overflow-anchor: none;
}
.tg-compressionTerminalTotal {
  padding: 13px 0 6px;
  margin-top: 5px;
  border-top: 1px solid #334155;
  color: #a7f3d0;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}