/* ============================================================================
   Группа изображений — общие стили карточки инструмента.  (lf-img-20260827)
   Один файл на четыре страницы: WebP→JPG, PNG→JPG, SVG→PNG, «Сжать фото».
   Неймспейс .it-*  — Canvas-движок, без внешних библиотек (ZIP через fflate).
   Дропзона переиспользует .uz-card/.uz-drop из site.css; ниже — специфика.
   ========================================================================== */
.it-app{max-width:none;margin:0}
.it-app *{box-sizing:border-box}

/* — панель (список входа / настройки / действия) — */
.it-panel{margin-top:22px;border:1px solid #e6ebf5;border-radius:14px;padding:20px;background:#fff}
.it-panel[hidden]{display:none}
.it-panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.it-count{margin:0;font-size:.95rem;color:#2a3350}
.it-count b{color:#3b6bff}
.it-clear{appearance:none;border:0;background:none;color:#6b7488;font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;padding:0}
.it-clear:hover{color:#3b6bff}

/* — список входных файлов (без переупорядочивания) — */
.it-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.it-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e9edf6;border-radius:11px;background:#fbfcff}
.it-item.skip{background:#fdf6f2;border-color:#f2ddce}
.it-thumb{flex:none;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:#eef3ff;color:#3b6bff;overflow:hidden;background-image:linear-gradient(45deg,#eef1f7 25%,transparent 25%),linear-gradient(-45deg,#eef1f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef1f7 75%),linear-gradient(-45deg,transparent 75%,#eef1f7 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.it-thumb svg{width:20px;height:20px}
.it-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.it-meta{flex:1;min-width:0}
.it-name{display:block;font-weight:600;font-size:.92rem;color:#1f2a44;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-sub{display:block;font-size:.78rem;color:#6b7488;margin-top:2px}
.it-item.skip .it-sub{color:#c0632a;font-weight:600}
.it-del{flex:none;appearance:none;border:1px solid #dfe5f1;background:#fff;color:#42506e;width:30px;height:30px;border-radius:8px;cursor:pointer;display:grid;place-items:center;padding:0}
.it-del:hover{border-color:#e0574e;color:#e0574e}
.it-del svg{width:16px;height:16px}

/* — настройки — */
.it-opts{display:flex;flex-direction:column;gap:18px;margin:18px 0 0;padding-top:18px;border-top:1px solid #eef1fa}
.it-optrow{display:flex;flex-wrap:wrap;gap:22px}
.it-optgroup{border:0;margin:0;padding:0;min-width:0}
.it-optgroup > legend,.it-lbl{font-weight:700;font-size:.9rem;color:#1f2a44;margin:0 0 8px;padding:0;display:block}
.it-seg{display:flex;flex-wrap:wrap;gap:8px}
.it-seg label{display:flex;gap:8px;align-items:center;padding:8px 14px;border:1px solid #dfe5f1;border-radius:9px;background:#fbfcff;cursor:pointer;font-size:.9rem;color:#2a3350}
.it-seg input{margin:0;accent-color:#3b6bff;flex:none}
.it-seg input:checked + span{color:#3b6bff;font-weight:600}
.it-seg label:has(input:checked){border-color:#bcd0ff;background:#eef3ff}

/* — слайдер качества — */
.it-slider{display:flex;align-items:center;gap:14px;max-width:420px}
.it-slider input[type=range]{flex:1;accent-color:#3b6bff}
.it-slider output{flex:none;min-width:44px;text-align:right;font-weight:700;color:#3b6bff;font-variant-numeric:tabular-nums}

/* — числовые поля / размеры / цвет — */
.it-num{width:110px;padding:9px 11px;border:1px solid #dfe5f1;border-radius:9px;font:inherit;font-size:.95rem}
.it-num.err{border-color:#e0574e;background:#fdf3f2}
.it-dims{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.it-dims .it-fld{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:#6b7488}
.it-lock{appearance:none;border:1px solid #dfe5f1;background:#fff;color:#42506e;width:38px;height:38px;border-radius:9px;cursor:pointer;display:grid;place-items:center;margin-bottom:1px}
.it-lock[aria-pressed=true]{border-color:#3b6bff;color:#3b6bff;background:#eef3ff}
.it-lock svg{width:18px;height:18px}
.it-color{display:flex;align-items:center;gap:10px}
.it-color input[type=color]{width:44px;height:38px;padding:0;border:1px solid #dfe5f1;border-radius:9px;background:#fff;cursor:pointer}
.it-color .it-cval{font-size:.85rem;color:#6b7488;font-variant-numeric:tabular-nums}
.it-hint{display:block;font-size:.78rem;color:#6b7488;margin-top:6px}
.it-warn{display:block;font-size:.82rem;color:#c0632a;margin-top:6px}
.it-inline[hidden]{display:none}

/* — прогресс — */
.it-bar{height:12px;border-radius:8px;background:#eaeefb;overflow:hidden;margin-top:16px}
.it-bar[hidden]{display:none}
.it-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b6bff,#6a8bff);border-radius:8px;transition:width .2s}
.it-stage{margin:10px 0 0;font-size:.9rem;color:#5b6478}
.it-stage[hidden]{display:none}

/* — кнопки — */
.it-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.it-btn{appearance:none;border:0;border-radius:10px;padding:13px 22px;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.it-btn.pri{background:#3b6bff;color:#fff}
.it-btn.pri:hover{background:#2f59db}
.it-btn.sec{background:#eef1f7;color:#2a3350}
.it-btn.sec:hover{background:#e3e8f2}
.it-btn:disabled{opacity:.5;cursor:default;pointer-events:none}

/* — предпросмотр «до/после» шторкой — */
.it-preview{margin:18px 0 0;padding-top:18px;border-top:1px solid #eef1fa}
.it-preview[hidden]{display:none}
.it-cmp{position:relative;max-width:520px;margin:10px auto 0;border-radius:12px;overflow:hidden;border:1px solid #e6ebf5;user-select:none;touch-action:none;background-image:linear-gradient(45deg,#eef1f7 25%,transparent 25%),linear-gradient(-45deg,#eef1f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef1f7 75%),linear-gradient(-45deg,transparent 75%,#eef1f7 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.it-cmp img{display:block;width:100%;height:auto;pointer-events:none}
.it-cmp .it-cmp-after{position:absolute;inset:0;width:100%;overflow:hidden}
.it-cmp .it-cmp-after img{position:absolute;top:0;left:0;width:100%}
.it-cmp .it-cmp-line{position:absolute;top:0;bottom:0;width:2px;background:#3b6bff;transform:translateX(-1px)}
.it-cmp .it-cmp-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#3b6bff;color:#fff;display:grid;place-items:center;box-shadow:0 4px 12px -2px rgba(59,107,255,.6);cursor:ew-resize}
.it-cmp .it-cmp-grip svg{width:20px;height:20px}
.it-cmp-tag{position:absolute;top:8px;padding:3px 9px;border-radius:20px;font-size:.7rem;font-weight:700;color:#fff;background:rgba(31,42,68,.72)}
.it-cmp-tag.a{left:8px}.it-cmp-tag.b{right:8px}
.it-cmp-cap{text-align:center;font-size:.82rem;color:#6b7488;margin:10px 0 0}

/* — результаты: таблица до→после — */
.it-result{margin-top:20px;border:1px solid #d4ead9;background:#f4fbf6;border-radius:14px;padding:22px}
.it-result[hidden]{display:none}
.it-result.err{border-color:#f2d0d0;background:#fdf3f3}
.it-result h3{margin:0 0 4px;font-size:1.22rem;text-align:center}
.it-result .it-rmsg{margin:0 auto 14px;color:#5b6478;max-width:60ch;text-align:center}
.it-rtable{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:.9rem}
.it-rtable th,.it-rtable td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef1f7;vertical-align:middle}
.it-rtable th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:#8a93a6;font-weight:700;background:#fafbfe}
.it-rtable td.num,.it-rtable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.it-rtable tr:last-child td{border-bottom:0}
.it-rtable .it-rt-th{width:44px}
.it-rtable .it-rt-th span{display:block;width:36px;height:36px;border-radius:7px;overflow:hidden;background:#eef3ff;background-image:linear-gradient(45deg,#eef1f7 25%,transparent 25%),linear-gradient(-45deg,#eef1f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef1f7 75%),linear-gradient(-45deg,transparent 75%,#eef1f7 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.it-rtable .it-rt-th img{width:100%;height:100%;object-fit:cover;display:block}
.it-rtable .it-rt-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1f2a44;font-weight:600}
.it-rtable .it-rt-note{display:block;font-size:.74rem;color:#c0632a;font-weight:600;white-space:normal}
.it-pct{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.78rem;font-weight:700}
.it-pct.down{background:#e6f6ec;color:#1f7a45}
.it-pct.up,.it-pct.same{background:#eef1f7;color:#5b6478}
.it-dl{appearance:none;border:1px solid #cfd9ee;background:#fff;color:#2f59db;font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.it-dl:hover{background:#eef3ff;border-color:#3b6bff}
.it-rtable tfoot td{font-weight:700;color:#1f2a44;background:#fafbfe;border-top:2px solid #eef1f7}
.it-result .it-actions{justify-content:center;margin-top:18px}

@media(max-width:560px){
  .it-actions .it-btn{flex:1 1 100%}
  .it-rtable .it-rt-name{max-width:120px}
  .it-rtable td.hide-sm,.it-rtable th.hide-sm{display:none}
}