.image-compress-tool { color: var(--body-color); }
.image-compress-tool [hidden] { display: none !important; }
.image-compress-tool .ic-title-icon { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 1.65rem; }
.image-compress-tool .ic-drop-zone { padding: 2.5rem 1.25rem; border: 2px dashed var(--card-border); border-radius: .75rem; background: var(--light-color); text-align: center; transition: border-color .15s, background-color .15s; }
.image-compress-tool .ic-drop-zone.is-dragging { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)); }
.image-compress-tool .ic-drop-zone[aria-disabled="true"] { opacity: .65; }
.image-compress-tool .ic-upload-icon { font-size: 2.6rem; color: var(--primary-color); margin-bottom: 1rem; }
.image-compress-tool .ic-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.image-compress-tool .ic-quality { max-width: 430px; flex: 1 1 260px; }
.image-compress-tool .ic-quality .form-select { background-color: var(--card-bg); color: var(--body-color); border-color: var(--card-border); }
.image-compress-tool .ic-empty { text-align: center; padding: 2.5rem 1rem; color: var(--body-color); }
.image-compress-tool .ic-empty i { color: var(--secondary-color); font-size: 2.5rem; }
.image-compress-tool .ic-file-list { display: grid; gap: .85rem; }
.image-compress-tool .ic-file { border: 1px solid var(--card-border); border-radius: .65rem; padding: 1rem; background: var(--card-bg); }
.image-compress-tool .ic-file-header { display: flex; align-items: flex-start; gap: .8rem; }
.image-compress-tool .ic-thumbnail { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--card-border); border-radius: .4rem; background-color: var(--light-color); flex-shrink: 0; }
.image-compress-tool .ic-thumbnail-placeholder { display: grid; place-items: center; color: var(--secondary-color); font-size: 1.5rem; }
.image-compress-tool .ic-file-main { flex: 1; min-width: 0; }
.image-compress-tool .ic-file-name { font-size: .95rem; font-weight: 600; line-height: 1.4; margin: 0 0 .25rem; overflow-wrap: anywhere; }
.image-compress-tool .ic-file-info { color: var(--secondary-color); font-size: .8rem; }
.image-compress-tool .ic-state { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: .3rem; background: var(--light-color); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.image-compress-tool .ic-state[data-state="compressed"] { color: var(--success-color); }
.image-compress-tool .ic-state[data-state="failed"], .image-compress-tool .ic-state[data-state="skipped"] { color: var(--danger-color); }
.image-compress-tool .ic-state[data-state="processing"] { color: var(--primary-color); }
.image-compress-tool .ic-state[data-state="processing"]::before { content: ""; width: .8rem; height: .8rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ic-spin .8s linear infinite; }
.image-compress-tool .ic-file-metrics { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .85rem; margin: .85rem 0 .5rem; }
.image-compress-tool .ic-saving { color: var(--success-color); font-weight: 600; }
.image-compress-tool .ic-file-message { color: var(--secondary-color); font-size: .8rem; margin: .5rem 0; overflow-wrap: anywhere; }
.image-compress-tool .ic-file-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.image-compress-tool .ic-format-list dt { font-size: .85rem; margin-bottom: .25rem; }
.image-compress-tool .ic-format-list dd { color: var(--secondary-color); font-size: .8rem; margin-bottom: .85rem; }
.image-compress-tool .ic-format-list dd:last-child { margin-bottom: 0; }
.image-compress-tool .ic-tips { padding-left: 1.2rem; color: var(--secondary-color); }
.image-compress-tool .ic-tips li + li { margin-top: .65rem; }
.image-compress-tool .ic-compare-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: .85rem; }
.image-compress-tool .ic-preview-options { display: flex; gap: .4rem; margin: 0; }
.image-compress-tool .ic-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.image-compress-tool .ic-preview-viewport { height: 360px; overflow: auto; border: 1px solid var(--card-border); border-radius: .4rem; background-color: var(--card-bg); background-image: linear-gradient(45deg, rgba(127,127,127,.18) 25%, transparent 25%), linear-gradient(-45deg, rgba(127,127,127,.18) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(127,127,127,.18) 75%), linear-gradient(-45deg, transparent 75%, rgba(127,127,127,.18) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.image-compress-tool .ic-preview-viewport img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: auto; }
.image-compress-tool .ic-preview-viewport.is-actual img { max-width: none; max-height: none; object-fit: initial; margin: 0; }
.image-compress-tool button:focus-visible, .image-compress-tool a:focus-visible, .image-compress-tool .ic-preview-viewport:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
    .image-compress-tool .ic-drop-zone { padding: 1.8rem .8rem; }
    .image-compress-tool .ic-controls > .d-flex { width: 100%; }
    .image-compress-tool .ic-file { padding: .8rem; }
    .image-compress-tool .ic-file-header { flex-wrap: wrap; }
    .image-compress-tool .ic-state { margin-left: 64px; }
    .image-compress-tool .ic-compare-grid { grid-template-columns: 1fr; }
    .image-compress-tool .ic-preview-viewport { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
    .image-compress-tool .ic-drop-zone { transition: none; }
    .image-compress-tool .ic-state[data-state="processing"]::before { animation: none; }
}