/* ===== 文件压缩工具（/tools/compress/）===== */
.tool-compress {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--sp-5);
}

.tool-compress-header { margin-bottom: var(--sp-4); }
.tool-compress-header h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); line-height: 1.25; color: var(--text); }
.tool-compress-header p { margin: 0; color: var(--text-muted); }

.tool-compress-tab-count { margin-left: 2px; color: var(--text-muted); font-weight: 400; }
.yb-tab.active .tool-compress-tab-count { color: inherit; }

/* 设置区 */
.tool-compress-settings {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-4);
}
.tool-compress-settings[hidden] { display: none; }
.tool-compress-field { display: grid; gap: 6px; min-width: 140px; font-size: var(--fs-sm); color: var(--text-secondary); }
.tool-compress-field > span { font-weight: 600; color: var(--text); }
.tool-compress-field output { margin-left: var(--sp-1); color: var(--accent); font-weight: 600; }
.tool-compress-field select { width: auto; min-width: 140px; }
.tool-compress-field input[type="range"] { width: 200px; accent-color: var(--accent); }
.tool-compress-field.is-disabled,
.tool-compress-check.is-disabled { opacity: .45; cursor: default; }
.tool-compress-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; padding-bottom: 6px; }
.tool-compress-check input { accent-color: var(--accent); }

/* 拖拽区 */
.tool-compress-drop {
    display: grid; justify-items: center; gap: 6px;
    padding: var(--sp-6) var(--sp-4);
    border: 2px dashed var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text-secondary);
    text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tool-compress-drop strong { color: var(--text); font-size: var(--fs-md); }
.tool-compress-drop span { font-size: var(--fs-sm); color: var(--text-muted); }
.tool-compress-drop:hover,
.tool-compress-drop.is-over { border-color: var(--accent); background: var(--accent-light); }

/* 文件列表 */
.tool-compress-list { margin-top: var(--sp-4); }
.tool-compress-empty { padding: var(--sp-5) var(--sp-4); }
.tool-compress-row {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--border);
}
.tool-compress-thumb {
    width: 48px; height: 48px; border-radius: var(--radius-sm);
    object-fit: cover; background: var(--bg-hover);
}
.tool-compress-thumb--text {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
}
.tool-compress-info { min-width: 0; }
.tool-compress-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.tool-compress-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-3); margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); }
.tool-compress-state { color: var(--text-muted); }
.tool-compress-state.is-working { color: var(--accent); }
.tool-compress-state.is-saved { color: var(--success); font-weight: 600; }
.tool-compress-state.is-bigger { color: var(--warning); font-weight: 600; }
.tool-compress-state.is-error { color: var(--danger); }
.tool-compress-note { color: var(--text-muted); font-size: var(--fs-xs); }
.tool-compress-row-actions { display: flex; gap: var(--sp-1); }

/* 图片对比：占整行 */
.tool-compress-compare {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
    margin-top: var(--sp-2);
}
.tool-compress-compare figure { margin: 0; }
.tool-compress-compare img {
    width: 100%; max-height: 360px; object-fit: contain;
    border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--bg-hover) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
}
.tool-compress-compare figcaption { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* 底部汇总 */
.tool-compress-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.tool-compress-footer[hidden] { display: none; }
.tool-compress-summary { font-size: var(--fs-sm); color: var(--text-secondary); }
.tool-compress-actions { display: flex; gap: var(--sp-2); }

@media (max-width: 640px) {
    .tool-compress { padding: var(--sp-4) 0; }
    .tool-compress-row { grid-template-columns: 40px minmax(0, 1fr); }
    .tool-compress-thumb { width: 40px; height: 40px; }
    .tool-compress-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .tool-compress-compare { grid-template-columns: 1fr; }
}

/* 尺寸：自定义宽高 */
.tool-compress-custom { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; color: var(--text-muted); }
.tool-compress-custom[hidden], .tool-compress-settings [data-show][hidden] { display: none; }
.tool-compress-custom .yb-input { width: 88px; }
.tool-compress-custom small { font-size: var(--fs-xs); }