/* ════ HTML5 ZIP Optimizer (zo-) ════ */
.zo-app{display:flex;flex-direction:column;gap:22px}           /* fill the container — matches the other tools' width */
.zo-app .panel{padding:22px}                                   /* global section padding reset → tool needs its own */

/* hero */
.zo-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:18px}
.zo-hero h2{font-size:22px;font-weight:800}
.zo-hero h2 .accent{color:var(--indigo,#4f46e5)}
.zo-hero-sub{font-size:13px;color:var(--muted,#64748b);margin:4px 0 12px;max-width:560px;line-height:1.5}
.zo-hero-badges{display:flex;flex-wrap:wrap;gap:8px 16px}
.zo-hero-badges span{font-size:12px;font-weight:600;color:var(--muted,#64748b);display:inline-flex;align-items:center;gap:7px}
.zo-hero-badges i{color:#16a34a}
.zo-hero-art{display:flex;align-items:center;gap:12px;flex:none}
.zo-art-card{width:96px;height:72px;border:1px solid var(--line,#e6e8ec);border-radius:12px;background:var(--bg2,#f7f8fa);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;color:#475067}
.zo-art-card i{font-size:18px;color:#94a3b8}
.zo-art-card.out{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}
.zo-art-card.out i{color:#22c55e}
.zo-art-card small{font-size:10px;font-weight:800;color:#16a34a}
.zo-art-arrow{color:#cbd5e1;font-size:16px}

.zo-steps{display:flex;flex-direction:column;gap:16px}
.zo-step-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.zo-num{width:26px;height:26px;border-radius:50%;background:var(--indigo,#4f46e5);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;flex:none}
.zo-step-head h3{font-size:15px;font-weight:800}
.zo-step-head p{font-size:12px;color:var(--muted,#64748b);margin:2px 0 0}

/* upload */
.zo-upload.drag{border-color:var(--indigo,#4f46e5);background:rgba(79,70,229,.05)}

/* file list */
.zo-fl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:700;padding:10px 12px;border:1px solid var(--line,#e6e8ec);border-radius:10px;background:var(--bg2,#f7f8fa);margin-bottom:10px}
.zo-fl-head i{color:var(--indigo,#4f46e5)}
.zo-fl-meta{font-weight:600;color:var(--muted,#64748b)}
.zo-warn{color:#d97706;font-weight:700}
.zo-fl-rows{display:flex;flex-direction:column;gap:3px}
.zo-fl-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 8px;border-radius:6px}
.zo-fl-row:nth-child(odd){background:var(--bg2,#f7f8fa)}
.zo-fl-name{color:var(--ink,#1f2430);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zo-fl-size{color:var(--muted,#64748b);font-weight:600;flex:none;margin-left:12px}
.zo-fl-more{font-size:11.5px;color:var(--muted,#94a3b8);margin-top:6px}

/* ── live summary + per-image file list ── */
#zoSummary{margin-bottom:16px}
#zoSummary.zo-packing .zo-stat-big .zo-stat-val b{opacity:.45}     /* dim the .zip figure while re-packing */
#zoFileList{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.zo-file{border:1px solid var(--line,#e6e8ec);border-radius:11px;background:var(--bg2,#fbfcfe);padding:10px 13px;transition:border-color .18s,opacity .18s}
.zo-file-main{display:flex;align-items:center;gap:12px;min-width:0}
.zo-file-thumb{flex:none;width:38px;height:38px;border-radius:8px;object-fit:cover;background:#f3f5f9;border:1px solid var(--line,#e6e8ec)}
.zo-file-ic{flex:none;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-size:15px;background:#eef0f6;color:#8a93a6}
.zo-ic-code{background:#eef2ff;color:var(--indigo,#4f46e5)}
.zo-ic-junk{background:#fff1f2;color:#e11d48}
.zo-file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.zo-file-name{font-weight:700;font-size:13px;color:var(--ink,#1f2430);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zo-file-meta{font-size:11px;color:var(--muted,#94a3b8);font-weight:600}
.zo-file-nums{flex:none;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700}
.zo-file-nums>i{color:#cbd5e1;font-size:10px}
.zo-file-was{color:#94a3b8;text-decoration:line-through;text-decoration-color:#d8dee9}
.zo-file-now{color:var(--ink,#1f2430)}
.zo-file-saved{font-size:11px;font-weight:800;color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;padding:2px 7px;border-radius:20px}
.zo-file-kept{font-size:11px;font-weight:700;color:#94a3b8}
.zo-file-removed{font-size:11.5px;font-weight:700;color:#e11d48;display:inline-flex;align-items:center;gap:5px}
.zo-file.zo-strike .zo-file-name{text-decoration:line-through;color:#94a3b8}
.zo-file.zo-busy{opacity:.6}
/* per-image quality slider — same glass handle as the compressor, indigo theme */
.zo-row-target{display:flex;align-items:center;gap:11px;margin-top:10px;padding-left:50px}
.zo-row-cap{font-size:11px;font-weight:700;color:var(--muted,#94a3b8);flex:none}
.zo-row-slider{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:6px;border-radius:20px;background:linear-gradient(90deg,var(--indigo,#4f46e5) var(--fill,50%),#e3e7ef var(--fill,50%));cursor:pointer;outline:none}
.zo-row-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:15px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(228,228,252,.86));border:1.5px solid #4338ca;box-shadow:0 3px 8px rgba(30,27,75,.34),0 1px 2px rgba(0,0,0,.2),inset 0 1px 1px rgba(255,255,255,.92);cursor:grab;transition:transform .2s cubic-bezier(.5,1.35,.5,1)}
.zo-row-slider:active::-webkit-slider-thumb{transform:scale(1.18);cursor:grabbing}
.zo-row-slider::-moz-range-thumb{width:24px;height:15px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(228,228,252,.86));border:1.5px solid #4338ca;box-shadow:0 3px 8px rgba(30,27,75,.34);cursor:grab}
.zo-row-readout{flex:none;font-size:11.5px;font-weight:800;color:var(--indigo,#4f46e5);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
/* limit chip — pending state while the .zip re-packs */
.zo-lim.pend{color:var(--muted,#94a3b8);border-color:var(--line,#e6e8ec)}
.zo-lim.pend i{color:#cbd5e1}

/* results */
.zo-res-top{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:16px}
.zo-stat{border:1px solid var(--line,#e6e8ec);border-radius:12px;padding:14px 16px;background:var(--bg2,#f7f8fa)}
.zo-stat-big{background:linear-gradient(0deg,rgba(34,197,94,.06),rgba(34,197,94,.06)),var(--bg1,#fff);border-color:#bbf7d0}
.zo-stat-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#94a3b8);margin-bottom:6px}
.zo-stat-val{font-size:18px;font-weight:800;color:var(--ink,#1f2430)}
.zo-stat-val i{color:#cbd5e1;font-size:13px;margin:0 4px}
.zo-stat-val b{color:#15803d}
.zo-stat-save{display:block;font-size:12px;font-weight:700;color:#16a34a;margin-top:4px}
.zo-stat-val2{font-size:14.5px;font-weight:700;color:var(--ink,#1f2430)}
.zo-stat-val2 b{color:#15803d}
.zo-stat-sub{display:block;font-size:12px;font-weight:700;color:#16a34a;margin-top:4px}

.zo-limits{margin-bottom:14px}
.zo-limits-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#94a3b8)}
.zo-limits-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.zo-lim{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px;border:1px solid var(--line,#e6e8ec)}
.zo-lim b{font-weight:800;opacity:.7}
.zo-lim.pass{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.zo-lim.fail{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.zo-limits-note{font-size:11px;color:var(--muted,#94a3b8);margin:0;line-height:1.5}
.zo-junk{font-size:12px;color:#0e7490;background:#ecfeff;border:1px solid #a5f3fc;border-radius:8px;padding:7px 11px;margin:0 0 14px}
.zo-junk i{margin-right:6px}

.zo-table-wrap{border:1px solid var(--line,#e6e8ec);border-radius:12px;overflow:hidden;margin-bottom:18px}
.zo-table{width:100%;border-collapse:collapse;font-size:12.5px}
.zo-table th{text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#94a3b8);padding:9px 12px;background:var(--bg2,#f7f8fa);border-bottom:1px solid var(--line,#e6e8ec)}
.zo-table td{padding:8px 12px;border-bottom:1px solid var(--line,#f0f2f5);color:var(--ink,#374151)}
.zo-table tr:last-child td{border-bottom:0}
.zo-t-name{font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zo-t-cut{color:#16a34a;font-weight:800}
.zo-t-kept{color:#94a3b8}
.zo-table-wrap+.zo-fl-more{margin-top:-10px}

.zo-res-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.zo-res-actions .btn-indigo{flex:1;min-width:240px;justify-content:center}
.zo-pitch{font-size:12.5px;color:var(--muted,#64748b);background:var(--bg2,#f7f8fa);border:1px solid var(--line,#e6e8ec);border-radius:10px;padding:11px 14px;margin:0;line-height:1.5}
.zo-pitch i{color:#f59e0b;margin-right:6px}
.zo-pitch a{color:var(--indigo,#4f46e5);font-weight:700;text-decoration:none;white-space:nowrap}
.zo-pitch a:hover{text-decoration:underline}

@media(max-width:720px){ .zo-res-top{grid-template-columns:1fr} .zo-row-target{padding-left:0} }