/* Res Opera Tools - image converters. Scoped to .ro-t-conv so several tools can share a page. */
.ro-t-conv .ro-card{background:var(--ro-card);border:1px solid var(--ro-line);border-radius:var(--ro-radius);padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04);margin-bottom:16px}
.ro-t-conv .ro-card h2{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--ro-ink)}
.ro-t-conv .ro-sub{margin:0 0 12px;color:var(--ro-muted);font-size:14px}
.ro-t-conv .ro-drop{border:2px dashed var(--ro-primary);background:var(--ro-soft);border-radius:var(--ro-radius);padding:34px 18px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.ro-t-conv .ro-drop:hover,.ro-t-conv .ro-drop.drag{background:var(--ro-soft2);border-color:var(--ro-accent)}
.ro-t-conv .ro-drop:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.ro-t-conv .ro-drop strong{display:block;font-size:18px;color:var(--ro-primary-dark);margin-bottom:4px}
.ro-t-conv .ro-drop span{color:var(--ro-muted);font-size:14px}
.ro-t-conv .ro-drop .ro-ic{font-size:34px;line-height:1;margin-bottom:8px}
.ro-t-conv .ro-opts{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin:16px 0 4px;font-size:14px}
.ro-t-conv .ro-opts label{display:flex;gap:8px;align-items:center;font-weight:600}
.ro-t-conv .ro-opts input[type=range]{width:160px;accent-color:var(--ro-primary)}
.ro-t-conv .ro-opts input[type=color]{width:38px;height:30px;padding:0;border:1.5px solid var(--ro-line);border-radius:8px;background:var(--ro-field);cursor:pointer}
.ro-t-conv .ro-opts output{font-family:ui-monospace,Menlo,Consolas,monospace;min-width:38px}
.ro-t-conv .ro-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ro-t-conv .ro-btn{border:1.5px solid var(--ro-primary);background:var(--ro-primary);color:#fff;padding:9px 15px;border-radius:var(--ro-radius-s);font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
.ro-t-conv .ro-btn:hover:not(:disabled){background:var(--ro-primary-dark)}
.ro-t-conv .ro-btn.ro-ghost{background:var(--ro-card);color:var(--ro-link)}
.ro-t-conv .ro-btn.ro-ghost:hover:not(:disabled){background:var(--ro-bg)}
.ro-t-conv .ro-btn.ro-accent{background:var(--ro-accent);border-color:var(--ro-accent);color:#1f1300}
.ro-t-conv .ro-btn.ro-accent:hover:not(:disabled){background:#d98a06}
.ro-t-conv .ro-btn.ro-sm{padding:6px 11px;font-size:13px;border-radius:8px}
.ro-t-conv .ro-btn:disabled{opacity:.45;cursor:not-allowed}
.ro-t-conv .ro-list{display:grid;gap:10px;margin-top:16px}
.ro-t-conv .ro-file{display:flex;gap:12px;align-items:center;border:1px solid var(--ro-line);border-radius:12px;padding:10px 12px;background:var(--ro-bg)}
.ro-t-conv .ro-th{flex:0 0 52px;height:52px;border-radius:8px;background:var(--ro-line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--ro-muted);overflow:hidden}
.ro-t-conv .ro-th img{width:100%;height:100%;object-fit:cover}
.ro-t-conv .ro-fi{flex:1;min-width:0}
.ro-t-conv .ro-fn{font-weight:700;font-size:14px;word-break:break-all}
.ro-t-conv .ro-fm{font-size:13px;color:var(--ro-muted)}
.ro-t-conv .ro-fm.ok{color:var(--ro-ok)}.ro-t-conv .ro-fm.bad{color:var(--ro-bad)}
.ro-t-conv .ro-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--ro-line);border-top-color:var(--ro-primary);border-radius:50%;animation:ro-s .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes ro-s{to{transform:rotate(360deg)}}
.ro-t-conv .ro-sum{margin-top:14px;font-size:14px;font-weight:700;color:var(--ro-ok)}
@media (max-width:640px){.ro-t-conv .ro-file{flex-wrap:wrap}.ro-t-conv .ro-opts input[type=range]{width:120px}}