/* ============================================================================
   Утилиты loadfile.ru — специфика трёх инструментов.  (lf-util-20260827)
   Неймспейс .ut- . База (панель/кнопки/бар/таблица) — из img-tools.css,
   дропзона .uz- — из site.css. Ниже только уникальное.
   ========================================================================== */
.ut-app{max-width:none;margin:0}
.ut-app *{box-sizing:border-box}
.ut-empty{margin:18px 0;color:#6b7488;text-align:center}
.ut-dim{color:#9aa2b4}

/* — общий заголовок-подпись — */
.ut-lbl{font-weight:700;font-size:.95rem;color:#1f2a44;display:block;margin:0 0 4px}

/* ————————————————————————————————— 1. Контрольная сумма ————————————————————— */
.ut-verify{background:#f6f8ff;border:1px solid #e0e8ff;border-radius:14px;padding:18px 18px 20px;margin-bottom:6px}
.ut-verify[hidden]{display:none}
.ut-vhint{margin:0 0 12px;font-size:.85rem;color:#5b6478}
.ut-vinput{width:100%;padding:12px 14px;border:1px solid #cfd9ee;border-radius:10px;font:inherit;font-size:.95rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#fff}
.ut-vinput:focus{outline:2px solid #3b6bff;outline-offset:1px;border-color:#3b6bff}
.ut-vinput.good{border-color:#1f7a45;background:#f4fbf6}
.ut-vinput.bad{border-color:#e0574e;background:#fdf3f2}
.ut-verdict{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:12px;border:1px solid}
.ut-verdict[hidden]{display:none}
.ut-vic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;font-weight:800;color:#fff}
.ut-vtx{display:flex;flex-direction:column;gap:2px}
.ut-vtx b{font-size:1.12rem}
.ut-vtx small{font-size:.86rem;color:#5b6478;line-height:1.45}
.ut-verdict.good{background:#eefaf1;border-color:#bfe6cd}.ut-verdict.good .ut-vic{background:#1f9d54}.ut-verdict.good b{color:#137a3d}
.ut-verdict.bad{background:#fdeeec;border-color:#f4cdc8}.ut-verdict.bad .ut-vic{background:#e0574e}.ut-verdict.bad b{color:#c23d34}
.ut-verdict.wait{background:#fff7ec;border-color:#f3e0bd}.ut-verdict.wait .ut-vic{background:#e2a33a}.ut-verdict.wait b{color:#9a6a12}
.ut-verdict.warn{background:#f4f6fb;border-color:#dfe5f1}.ut-verdict.warn .ut-vic{background:#8a93a6}.ut-verdict.warn b{color:#4a5570}
.ut-algos{margin-top:0;padding-top:0;border-top:0}

.ut-cksum-res{margin-top:20px}
.ut-cksum-res[hidden]{display:none}
.ut-hblock{border:1px solid #e6ebf5;border-radius:14px;padding:16px 18px;margin-bottom:14px;background:#fff}
.ut-hname{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ut-hname b{font-size:1rem;color:#1f2a44;word-break:break-all}
.ut-hname span{font-size:.8rem;color:#8a93a6}
.ut-herr{margin:0;color:#c23d34;font-size:.9rem}
.ut-htable{width:100%;border-collapse:collapse;font-size:.9rem}
.ut-htable td{padding:8px 10px;border-bottom:1px solid #f0f3f9;vertical-align:middle}
.ut-htable tr:last-child td{border-bottom:0}
.ut-halgo{font-weight:700;color:#3b6bff;white-space:nowrap;width:88px}
.ut-hhex{width:100%}
.ut-hhex code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#22304e;word-break:break-all}
.ut-hcopy{width:40px;text-align:right}
.ut-copy{appearance:none;border:1px solid #dfe5f1;background:#fff;color:#42506e;width:32px;height:32px;border-radius:8px;cursor:pointer;display:grid;place-items:center;padding:0}
.ut-copy:hover{border-color:#3b6bff;color:#3b6bff}
.ut-copy.ok{border-color:#1f9d54;color:#1f9d54;width:auto;padding:0 10px;font-size:.78rem;font-weight:700}
.ut-copy svg{width:16px;height:16px}

/* ————————————————————————————————— 2. Кодировка ——————————————————————————— */
.ut-tabs{display:inline-flex;gap:4px;padding:4px;background:#eef1f7;border-radius:11px;margin-bottom:16px}
.ut-tab{appearance:none;border:0;background:none;font:inherit;font-size:.92rem;font-weight:600;color:#5b6478;padding:8px 18px;border-radius:8px;cursor:pointer}
.ut-tab.active{background:#fff;color:#1f2a44;box-shadow:0 1px 4px rgba(31,42,68,.12)}
.ut-paste[hidden]{display:none}
.ut-ta{width:100%;min-height:130px;padding:14px;border:1px solid #dfe5f1;border-radius:12px;font:inherit;font-size:.95rem;resize:vertical;background:#fff}
.ut-ta:focus{outline:2px solid #3b6bff;outline-offset:1px;border-color:#3b6bff}
.ut-enc-out{margin-top:20px}
.ut-enc-out[hidden]{display:none}
.ut-enc-h{margin:0 0 14px;font-size:1.16rem}
.ut-variants{display:flex;flex-direction:column;gap:12px}
.ut-variant{border:1px solid #e6ebf5;border-radius:12px;overflow:hidden;background:#fff}
.ut-variant.sel{border-color:#3b6bff;box-shadow:0 0 0 2px rgba(59,107,255,.15)}
.ut-variant-h{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.ut-vradio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #c3ccdd}
.ut-variant.sel .ut-vradio{border-color:#3b6bff;background:radial-gradient(circle at center,#3b6bff 0 5px,#fff 6px)}
.ut-vlabel{display:flex;flex-direction:column;gap:1px;font-weight:700;color:#1f2a44}
.ut-vlabel small{font-weight:500;font-size:.78rem;color:#8a93a6}
.ut-preview{margin:0;padding:12px 16px 16px;border-top:1px solid #f0f3f9;font-size:.9rem;line-height:1.55;color:#22304e;white-space:pre-wrap;word-break:break-word;background:#fbfcff;max-height:200px;overflow:auto}
.ut-preview[hidden]{display:none}
.ut-manual{margin-top:14px;border:1px solid #e6ebf5;border-radius:12px;background:#fff;padding:2px 4px}
.ut-manual summary{cursor:pointer;padding:12px 14px;font-weight:600;color:#3b6bff;font-size:.9rem}
.ut-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:6px 14px 14px}
.ut-mlbl{font-size:.85rem;color:#5b6478;font-weight:600}
.ut-sel{padding:9px 12px;border:1px solid #dfe5f1;border-radius:9px;font:inherit;font-size:.88rem;background:#fff;flex:1;min-width:160px}
.ut-save{margin-top:18px;padding-top:16px;border-top:1px solid #eef1fa}
.ut-bom{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:#2a3350;cursor:pointer}
.ut-bom input{accent-color:#3b6bff}
.ut-csvnote{margin:8px 0 0;font-size:.84rem;color:#c0632a}

/* ————————————————————————————————— 3. EXIF ————————————————————————————————— */
.ut-exif-list{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.ut-exif-card{border:1px solid #e6ebf5;border-radius:14px;padding:14px 16px;background:#fff}
.ut-exif-top{display:flex;align-items:center;gap:10px}
.ut-exif-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ut-exif-name b{font-size:.95rem;color:#1f2a44;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ut-exif-name small{font-size:.76rem;color:#8a93a6}
.ut-exif-load{margin:10px 0 0;font-size:.86rem;color:#8a93a6}
.ut-badge{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:.88rem;font-weight:600;line-height:1.5}
.ut-badge.green{background:#eefaf1;color:#137a3d;border:1px solid #bfe6cd}
.ut-badge.yellow{background:#fff7e6;color:#9a6a12;border:1px solid #f3dfab}
.ut-badge.yellow a{color:#9a6a12;font-weight:700;text-decoration:underline;white-space:nowrap}
.ut-badge.done{background:#eff4ff;color:#2a4a9c;border:1px solid #cfdcff}
.ut-exif-group{margin-top:12px}
.ut-exif-gt{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:#8a93a6;font-weight:700;margin-bottom:6px}
.ut-exif-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0}
.ut-exif-dl dt{color:#6b7488;font-size:.86rem}
.ut-exif-dl dd{margin:0;color:#22304e;font-size:.9rem;font-weight:600;word-break:break-word}
.ut-icc{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:#2a3350;cursor:pointer;margin-bottom:4px}
.ut-icc input{accent-color:#3b6bff}

@media(max-width:560px){
  .ut-mrow .ut-sel{min-width:0;flex:1 1 100%}
  .ut-halgo{width:auto}
  .ut-exif-dl{grid-template-columns:1fr}
  .ut-exif-dl dt{margin-top:6px}
}