/* page overrides */
/* Shared layout for the image converters and compressors (same file in each of these tools). */
.tool-app .ic{display:flex;flex-direction:column;gap:16px}
.tool-app .ic [hidden]{display:none!important}
.tool-app .ic-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tool-app .ic-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:stretch}

/* drop zone */
.tool-app .ic-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:22px 18px;min-height:230px;border-radius:var(--zl-r);transition:border-color .15s,background-color .15s}
.tool-app .ic-drop .upload-icon{margin:0 0 6px}
.tool-app .ic-drop p{margin:0}
.tool-app .ic-sub{color:var(--zl-muted);font-size:15px;line-height:1.45}
.tool-app .ic-drop .btn-primary{margin-top:10px}
.tool-app .ic-note{color:var(--zl-muted);font-size:13.5px;line-height:1.45;margin-top:6px}

/* settings panel */
.tool-app .ic-panel{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--zl-surface);border:1px solid var(--zl-line);border-radius:var(--zl-r);min-width:0}
.tool-app .ic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 20px;align-items:start}
.tool-app .ic-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.tool-app .ic-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font:600 14.5px/1.3 var(--zl-font-head);color:var(--zl-ink)}
.tool-app .ic-label output{font:600 14.5px var(--zl-font-head);color:var(--zl-accent)}
.tool-app .ic-hint{display:block;margin:0;font-size:13.5px;line-height:1.4;color:var(--zl-muted)}
.tool-app .ic select{width:100%;min-height:44px;padding:0 12px;font-size:16px;border-radius:12px}
.tool-app .ic input[type=range]{width:100%;min-height:28px;margin:2px 0 0;padding:0;background:none;border:0}
.tool-app .ic input[type=range]:disabled{opacity:.45;cursor:not-allowed}
.tool-app .ic-size{display:flex;align-items:center;gap:8px}
.tool-app .ic-size input[type=number]{flex:1 1 0;width:auto;min-width:0;min-height:44px;padding:0 12px;font-size:16px;border-radius:12px}
.tool-app .ic-size span{color:var(--zl-muted);font-size:14px}
.tool-app .ic-check{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:0;font:400 15px var(--zl-font-body);color:var(--zl-ink);cursor:pointer}
.tool-app .ic-check input{width:18px;height:18px;margin:0;flex:none}
.tool-app .ic-color{display:flex;align-items:center;gap:12px}
.tool-app .ic-color input[type=color]{flex:none;width:58px;height:44px;padding:3px;border:1.5px solid var(--zl-line-2);border-radius:12px;background:var(--zl-surface);cursor:pointer}

/* notices */
.tool-app .ic-notice{margin:0;padding:10px 14px;border-radius:12px;font-size:14.5px;line-height:1.45;background:var(--zl-tint);color:var(--zl-ink-2)}
.tool-app .ic-notice.is-warn{background:var(--zl-warning-soft);color:var(--zl-note-ink)}
.tool-app .ic-notice.is-error{background:var(--zl-danger-soft);color:var(--zl-danger)}

/* action bar */
.tool-app .ic-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--zl-line);margin-top:auto}
.tool-app .ic-bar .btn-primary,.tool-app .ic-bar .btn-outline{min-height:44px}
.tool-app .ic-bar .ic-clear{margin-left:auto}
.tool-app .ic-progress{display:flex;flex-direction:column;gap:6px;width:100%}
.tool-app .ic .progress-bar{width:100%;height:6px;background:var(--zl-tint);border-radius:999px;overflow:hidden}
.tool-app .ic #progressInner{width:0;height:100%;background:var(--zl-accent);border-radius:999px;transition:width .2s}
.tool-app .ic #overallStats{font-size:14px;line-height:1.45;color:var(--zl-muted)}

/* results */
.tool-app .ic-results{display:flex;flex-direction:column;gap:10px}
.tool-app .ic-results-head{display:flex;justify-content:space-between;align-items:center;font:600 15px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .ic-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tool-app .ic-empty{grid-column:1/-1;padding:20px;text-align:center;font-size:15px;color:var(--zl-muted);background:var(--zl-surface-2);border:1px dashed var(--zl-line-2);border-radius:16px}
.tool-app .ic-card{display:flex;flex-direction:column;min-width:0;background:var(--zl-surface);border:1px solid var(--zl-line);border-radius:16px;overflow:hidden}
.tool-app .ic-thumb{height:150px;display:flex;align-items:center;justify-content:center;padding:8px;border-bottom:1px solid var(--zl-line);background-color:var(--zl-surface-2);background-image:repeating-conic-gradient(#e2e9e8 0 25%,transparent 0 50%);background-size:16px 16px}
html[data-theme="dark"] .tool-app .ic-thumb{background-image:repeating-conic-gradient(#213a3b 0 25%,transparent 0 50%)}
.tool-app .ic-thumb.is-filled{background-image:none}
.tool-app .ic-thumb canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.tool-app .ic-meta{display:flex;flex-direction:column;gap:3px;padding:10px 12px 4px;font-size:13.5px;line-height:1.4;color:var(--zl-muted)}
.tool-app .ic-name{margin-bottom:3px;font:600 14.5px var(--zl-font-head);color:var(--zl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-app .ic-row{display:flex;justify-content:space-between;gap:10px}
.tool-app .ic-row span:last-child{text-align:right;color:var(--zl-ink-2)}
.tool-app .ic-row .saving-good{color:var(--zl-success)}
.tool-app .ic-row .saving-bad{color:var(--zl-danger)}
.tool-app .ic-status{margin-top:4px;font-size:13px;line-height:1.4;color:var(--zl-muted)}
.tool-app .ic-status.is-ok{color:var(--zl-success)}
.tool-app .ic-status.is-busy{color:var(--zl-accent)}
.tool-app .ic-status.is-warn{color:var(--zl-warning)}
.tool-app .ic-status.is-error{color:var(--zl-danger)}
.tool-app .ic-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px 12px 12px;margin-top:auto}
.tool-app .ic-actions .download-btn{grid-column:1/-1;order:-1}
.tool-app .ic-btn{min-height:40px;padding:0 6px;border-radius:999px;border:1.5px solid var(--zl-line-2);background:var(--zl-surface);color:var(--zl-ink);font:500 13.5px var(--zl-font-head);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-app .ic-btn:hover{border-color:var(--zl-accent)}
.tool-app .ic-btn.is-primary{background:var(--zl-accent);border-color:var(--zl-accent);color:var(--zl-accent-ink)}
.tool-app .ic-btn.is-primary:hover{background:var(--zl-accent-strong);border-color:var(--zl-accent-strong)}
.tool-app .ic-btn.is-danger{color:var(--zl-danger)}
.tool-app .ic-btn.is-danger:hover{border-color:var(--zl-danger)}
.tool-app .ic-btn:disabled,.tool-app .ic-btn.is-primary:disabled{background:var(--zl-surface-2);border-color:var(--zl-line);color:#7d9391;cursor:not-allowed}
html[data-theme="dark"] .tool-app .ic-btn:disabled{color:#6f8784}

@media (max-width:900px){
  .tool-app .ic-top{grid-template-columns:1fr}
  .tool-app .ic-drop{min-height:0;padding:20px 16px}
}
@media (max-width:600px){
  .tool-app .ic-panel{padding:14px}
  .tool-app .ic-grid{grid-template-columns:1fr;gap:14px}
  .tool-app .ic-bar .btn-primary,.tool-app .ic-bar .btn-outline{flex:1 1 auto}
  .tool-app .ic-bar .ic-clear{margin-left:0}
  .tool-app .ic-cards{grid-template-columns:1fr}
  .tool-app .ic-thumb{height:180px}
  .tool-app .ic-btn{min-height:44px;font-size:14px}
}