/* Image converter */
.ic-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .ic-layout { grid-template-columns: minmax(0, 1fr); } }
.ic-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 18px; border: 2px dashed var(--glass-border); border-radius: 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.ic-drop:hover, .ic-drop:focus-visible, .ic-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--brand) 8%, transparent); outline: none; }
.ic-drop__icon { font-size: 2rem; }
.ic-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ic-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.03); }
.ic-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: repeating-conic-gradient(#8884 0 25%, transparent 0 50%) 0 0 / 12px 12px; display: grid; place-items: center; font-size: 1.4rem; overflow: hidden; }
.ic-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ic-meta { min-width: 0; }
.ic-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.ic-meta small { color: var(--text-muted, #a5adc4); }
.ic-status.is-ok { color: #34d399; } .ic-status.is-err { color: #f87171; }
.ic-outs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ic-outs a { font-size: .8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-border); text-decoration: none; color: inherit; }
.ic-outs a:hover { border-color: var(--accent); }
.ic-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1.1rem; opacity: .7; padding: 6px; }
.ic-actions { margin-top: 16px; }
.ic-opts h2 { margin: 0 0 12px; font-size: 1.15rem; }
.ic-opts .field { margin-bottom: 12px; }
.ic-opts input[type=range] { width: 100%; }
.ic-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ic-inline { display: inline-flex; align-items: center; gap: 6px; }
.ic-inline .input { width: 90px; }
.ic-video { border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.ic-video legend { padding: 0 6px; font-weight: 600; font-size: .9rem; }
#icResizeVal { margin-top: 8px; }