/* Конвертер изображений. Токены темы — как у генератора QR, чтобы инструменты выглядели
   роднёй; изумруд тот же акцент. Светлая и тёмная темы работают без отдельных правил. */
.ims{--ims-acc:#10b981;--ims-acc-d:#0e9f6e;
     --ims-ink:var(--ink,#14161A);--ims-txt:var(--text,#3A3F46);--ims-mut:var(--muted,#62686F);
     --ims-line:var(--line,#DFE2E6);--ims-surf:var(--surface,#fff);--ims-surf2:var(--surface-2,#EDEFF1);
     font-family:var(--font-body,'Inter',-apple-system,Segoe UI,Roboto,sans-serif);}

/* ---------- зона загрузки ---------- */
.ims-drop{border:2px dashed var(--ims-line);border-radius:16px;padding:38px 22px;text-align:center;
  background:var(--ims-surf);transition:border-color .15s,background .15s;cursor:pointer;}
.ims-drop:hover,.ims-drop.ims-over{border-color:var(--ims-acc);background:rgba(16,185,129,.05);}
.ims-drop svg{width:40px;height:40px;stroke:var(--ims-acc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ims-drop b{display:block;margin:12px 0 4px;font:700 16px/1.3 var(--font-head,'Space Grotesk',sans-serif);color:var(--ims-ink);}
.ims-drop span{font:400 13px/1.5 inherit;color:var(--ims-mut);}
.ims-drop input{display:none;}

/* Панели появляются только после загрузки — до этого показывать нечего. */
.ims-body{display:none;}
.ims.ims-has .ims-body{display:block;}
.ims.ims-has .ims-drop{padding:18px;}

.ims-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;margin-top:20px;}
@media (max-width:900px){.ims-grid{grid-template-columns:1fr;}}

.ims-card{background:var(--ims-surf);border:1px solid var(--ims-line);border-radius:14px;padding:20px 22px;margin:0 0 16px;}
.ims-card h3{margin:0 0 16px;font:700 14px/1 var(--font-head,'Space Grotesk',sans-serif);color:var(--ims-ink);
  display:flex;align-items:center;gap:9px;}
.ims-card h3::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--ims-acc);}

.ims-row{margin:0 0 14px;}
.ims-row:last-child{margin-bottom:0;}
.ims-row label,.ims-lbl{display:block;margin:0 0 6px;font:600 12.5px/1.3 inherit;color:var(--ims-mut);}
.ims-sel{width:100%;padding:10px 13px;border-radius:9px;border:1px solid var(--field-border,#8A9099);
  background:var(--field-bg,#fff);color:var(--ims-ink);font:400 14.5px/1.4 inherit;}
.ims-sel:focus{outline:2px solid var(--ims-acc);outline-offset:1px;}
.ims-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.ims-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font:400 13.5px/1.35 inherit;color:var(--ims-txt);
  padding:9px 12px;border:1px dashed var(--ims-line);border-radius:10px;transition:border-color .15s,background .15s;}
.ims-check:hover{border-color:var(--ims-acc);}
.ims-check input{width:17px;height:17px;accent-color:var(--ims-acc);cursor:pointer;}
.ims-check:has(input:checked){border-style:solid;border-color:var(--ims-acc);background:rgba(16,185,129,.08);
  color:var(--ims-ink);font-weight:600;}

.ims-range{width:100%;accent-color:var(--ims-acc);}
.ims-range-row{display:flex;align-items:center;gap:12px;}
.ims-range-row output{min-width:62px;text-align:right;font:600 13px/1 inherit;color:var(--ims-ink);
  font-variant-numeric:tabular-nums;}

.ims-sub{margin:12px 0 0;padding:14px 16px;border-radius:10px;background:var(--ims-surf2);}
.ims-hint{margin:8px 0 0;font:400 12px/1.55 inherit;color:var(--ims-mut);}

/* ---------- предпросмотр ---------- */
.ims-side{position:sticky;top:16px;}
.ims-preview{background:var(--ims-surf);border:1px solid var(--ims-line);border-radius:14px;padding:20px;text-align:center;}
/* Шахматка — чтобы прозрачность после удаления фона была видна, а не сливалась с белым. */
.ims-stage{min-height:260px;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:12px;
  background-color:var(--ims-surf2);
  background-image:linear-gradient(45deg,rgba(0,0,0,.06) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.06) 75%),
                   linear-gradient(45deg,rgba(0,0,0,.06) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.06) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;}
.ims-stage img{max-width:100%;max-height:340px;height:auto;display:block;}
.ims-pickon .ims-stage{cursor:crosshair;outline:2px solid var(--ims-acc);outline-offset:-2px;}

.ims-stats{display:flex;justify-content:space-between;gap:10px;margin:14px 0 0;font:400 12.5px/1.4 inherit;
  color:var(--ims-mut);font-variant-numeric:tabular-nums;}
.ims-stats b{display:block;color:var(--ims-ink);font-weight:700;font-size:14px;}

.ims-actions{display:flex;flex-direction:column;gap:9px;margin:16px 0 0;}
.ims-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;
  border:1px solid var(--ims-line);background:var(--ims-surf);color:var(--ims-ink);cursor:pointer;
  font:600 14px/1 inherit;transition:border-color .15s,background .15s,color .15s;}
.ims-btn:hover:not(:disabled){border-color:var(--ims-acc);color:var(--ims-acc-d);}
.ims-btn.pri{background:var(--ims-acc);border-color:var(--ims-acc);color:#fff;}
.ims-btn.pri:hover:not(:disabled){background:var(--ims-acc-d);border-color:var(--ims-acc-d);color:#fff;}
.ims-btn:disabled,.ims-btn.ims-off{opacity:.45;cursor:not-allowed;}

.ims-swatch{width:26px;height:26px;border-radius:7px;border:2px solid var(--ims-line);display:inline-block;vertical-align:middle;}
.ims-note{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:rgba(16,185,129,.08);
  border-left:3px solid var(--ims-acc);font:400 12.5px/1.6 inherit;color:var(--ims-txt);}

/* ---------- выбор размеров значка ---------- */
.ims-icon{margin:18px 0 0;padding:16px;border:1px solid var(--ims-line);border-radius:12px;background:var(--ims-surf2);}
.ims-sizes{display:flex;flex-wrap:wrap;gap:7px;}
.ims-size{cursor:pointer;}
.ims-size input{position:absolute;opacity:0;width:0;height:0;}
.ims-size span{display:inline-block;padding:7px 11px;border-radius:8px;border:1px solid var(--ims-line);
  background:var(--ims-surf);color:var(--ims-txt);font:600 12.5px/1 inherit;transition:all .13s;
  font-variant-numeric:tabular-nums;}
.ims-size span:hover{border-color:var(--ims-acc);}
.ims-size input:checked + span{background:var(--ims-acc);border-color:var(--ims-acc);color:#fff;}
.ims-size input:focus-visible + span{outline:2px solid var(--ims-acc);outline-offset:2px;}