/* LastingWeb free tools — image optimizer (loaded only on /tools/image-optimizer). */
.io-root { display:grid;gap:18px;}
.io { display:grid;gap:0;overflow:hidden;}
@media (min-width:980px) { .io { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);} }
.io-drop { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px 20px;margin:12px;border:2px dashed var(--line);border-radius:var(--r);background:var(--ivory);transition:border-color .2s, background .2s;min-height:260px;}
.io-drop.is-over { border-color:var(--burg);background:var(--blush);}
.io-drop__ic { font-size:34px;line-height:1;color:var(--burg);}
.io-drop__t { margin:0;font:400 22px/1.2 var(--serif);}
.io-drop__l { margin:4px 0 0;font-size:13px;color:var(--muted);max-width:30em;}
.io-priv { margin:6px 0 0;padding:10px 14px;border-radius:var(--r-s);background:var(--good-bg);color:var(--good);font-size:14px;max-width:32em;}
.io-set { padding:4px 18px 20px;min-width:0;}
@media (min-width:640px) { .io-set { padding:6px 24px 24px;} }
.io-set fieldset { border:0;padding:0 0 16px;margin:0;border-bottom:1px solid var(--line-2);min-width:0;}
.io-set fieldset + fieldset { padding-top:4px;}
.io-set legend { font:400 22px var(--serif);padding:16px 0 8px;}
.io-seg { display:flex;flex-wrap:wrap;border-radius:16px;margin-bottom:4px;}
.io-ph { margin:0 0 12px;}
.io-crop { margin-top:8px;}
.io-crop input { width:20px;height:20px;accent-color:var(--burg);}
.io-crop small { font-weight:400;color:var(--muted);}
.io-set input[type=range] { width:100%;accent-color:var(--burg);min-height:44px;}
.io-set input[type=range]:disabled { opacity:.45;}
.io-rej { margin:0;padding:12px 16px 12px 34px;border-radius:var(--r-s);background:var(--bad-bg);color:var(--bad);font-size:14px;display:grid;gap:4px;}
.io-res { display:grid;gap:14px;min-width:0;}
.io-sum { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;}
.io-sum__in { display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 280px;}
.io-sum__n { display:grid;line-height:1.1;}
.io-sum__big { font:600 32px/1 var(--sans);color:var(--good);font-variant-numeric:tabular-nums;}
.io-sum__n .muted { font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.io-sum__t { margin:0;font-size:15px;}
.io-sum__a { display:flex;flex-wrap:wrap;gap:8px;}
.io-list { list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.io-row { display:grid;grid-template-columns:72px minmax(0, 1fr);gap:12px 14px;align-items:start;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);}
@media (min-width:760px) { .io-row { grid-template-columns:88px minmax(0, 1fr) auto;align-items:center;} }
.io-row.is-err { border-color:#e8bcb7;}
.io-row__th { width:72px;height:72px;border-radius:var(--r-s);overflow:hidden;background:repeating-conic-gradient(#eee4df 0 25%, #fff 0 50%) 0 0/16px 16px;display:grid;place-items:center;}
@media (min-width:760px) { .io-row__th { width:88px;height:88px;} }
.io-row__th img { width:100%;height:100%;object-fit:cover;display:block;}
.io-row__ph { font:600 11px var(--sans);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.io-row__ph.is-busy { width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--burg);border-radius:50%;animation:io-spin .8s linear infinite;}
@keyframes io-spin { to { transform:rotate(360deg);} }
@media (prefers-reduced-motion:reduce) { .io-row__ph.is-busy { animation:none;} }
.io-row__m { min-width:0;}
.io-row__n { margin:0;font-weight:600;overflow-wrap:anywhere;}
.io-row__s { margin:2px 0 0;font-size:14px;overflow-wrap:anywhere;}
.io-row__s .chip { vertical-align:1px;}
.io-row__a { grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;}
@media (min-width:760px) { .io-row__a { grid-column:auto;} }
.io-x { width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font:400 20px/1 var(--sans);cursor:pointer;}
.io-x:hover { color:var(--bad);border-color:var(--bad);}
.io-notes { list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;}
.io-notes li { padding:6px 10px;border-radius:var(--r-s);background:var(--info-bg);color:var(--info);}
.io-notes li.is-warn { background:var(--warn-bg);color:var(--warn);}
.io-link { border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:600;}
.io-cmp { padding:18px;display:grid;gap:10px;justify-items:center;}
.io-cmp__head { justify-self:stretch;}
.io-cmp__head h3 { font-size:24px;}
.io-cmp__head p { margin:4px 0 0;font-size:14px;overflow-wrap:anywhere;}
.io-cmp__lab { justify-self:stretch;display:flex;justify-content:space-between;gap:8px;font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.io-cmp__box { position:relative;width:100%;overflow:hidden;border-radius:var(--r-s);background:repeating-conic-gradient(#eee4df 0 25%, #fff 0 50%) 0 0/20px 20px;}
.io-cmp__box img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.io-cmp__top { position:absolute;inset:0;}
.io-cmp__h { position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(38,24,32,.35);pointer-events:none;}
.io-cmp__r { width:100%;accent-color:var(--burg);min-height:44px;}
.io-ctas { display:grid;gap:14px;}
@media (min-width:760px) { .io-ctas { grid-template-columns:1fr 1fr;} }