/* ═══════════════════════════════════════════════════
   image-resizer.css  -  ChrysoKit Image Resizer v2.1
   ═══════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────── */
:root {
  --ir-r:      12px;
  --ir-rsm:    8px;
  --ir-rxs:    6px;
  --ir-t:      0.18s ease;
  --ir-gap:    1.25rem;
  --ir-bg:     #ffffff;
  --ir-surf:   #f8f5ef;
  --ir-surf2:  #f1ebe0;
  --ir-bdr:    #e2d9c9;
  --ir-bdr2:   #c9bfad;
  --ir-txt:    #221c10;
  --ir-muted:  #7a6a52;
  --ir-acc:    #D4A373;
  --ir-acc2:   #b8855a;
  --ir-acctxt: #fff8ef;
  --ir-danger: #d94f4f;
  --ir-ok:     #3a9e6e;
  --ir-sh:     0 2px 16px rgba(0,0,0,.08);
  --ir-shM:    0 4px 32px rgba(0,0,0,.12);
}
[data-theme="dark"] {
  --ir-bg:     #1c1812;
  --ir-surf:   #252019;
  --ir-surf2:  #2c2720;
  --ir-bdr:    #38322a;
  --ir-bdr2:   #4a4238;
  --ir-txt:    #f0e8d8;
  --ir-muted:  #9a8a72;
  --ir-acc:    #D4A373;
  --ir-acc2:   #c49060;
  --ir-acctxt: #1a1510;
  --ir-sh:     0 2px 16px rgba(0,0,0,.4);
  --ir-shM:    0 4px 32px rgba(0,0,0,.55);
  --ir-danger: #ef6262;
}

/* ── App ── */
.ir-app { position: relative; margin: 1.5rem 0 2.5rem; }

/* ══════════════════════════════════════
   DROP ZONE
══════════════════════════════════════ */
.ir-dropzone {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
  border: 2px dashed var(--ir-bdr2);
  border-radius: var(--ir-r);
  background: var(--ir-surf);
  cursor: pointer; outline: none;
  transition: border-color var(--ir-t), background var(--ir-t), box-shadow var(--ir-t);
}
.ir-dropzone:hover,
.ir-dropzone:focus-visible,
.ir-dropzone.drag-on {
  border-color: var(--ir-acc);
  background: var(--ir-surf2);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ir-acc) 15%, transparent);
}
.ir-file-input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  width: 100%; height: 100%; z-index: 1;
}
.ir-drop-body {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  pointer-events: none; user-select: none; padding: 2rem;
}
.ir-drop-ring {
  width: 76px; height: 76px; border-radius: 50%;
  background: color-mix(in srgb, var(--ir-acc) 14%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
  transition: transform var(--ir-t);
}
.ir-dropzone:hover .ir-drop-ring,
.ir-dropzone.drag-on .ir-drop-ring { transform: scale(1.08); }
.ir-drop-ico { width: 32px; height: 32px; color: var(--ir-acc); stroke-width: 1.7; }
.ir-drop-title { font-size: 1.1rem; font-weight: 700; color: var(--ir-txt); margin: 0; }
.ir-drop-sub   { font-size: .88rem; color: var(--ir-muted); margin: 0; }
.ir-drop-sub kbd {
  font-size: .75rem; padding: 1px 5px;
  background: var(--ir-surf2); border: 1px solid var(--ir-bdr2);
  border-radius: 4px; font-family: inherit;
}
.ir-browse { color: var(--ir-acc); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ir-drop-chips {
  display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .25rem;
}
.ir-drop-chips span {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 99px;
  background: var(--ir-surf2); border: 1px solid var(--ir-bdr); color: var(--ir-muted);
}

/* ══════════════════════════════════════
   EDITOR SHELL
══════════════════════════════════════ */
.ir-editor { display: flex; flex-direction: column; gap: 1rem; animation: irIn .3s ease; }
@keyframes irIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }

/* Toolbar */
.ir-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--ir-surf); border: 1px solid var(--ir-bdr); border-radius: var(--ir-rsm);
}
.ir-file-info {
  display: flex; align-items: center; gap: .5rem;
  overflow: hidden; flex: 1 1 0; min-width: 0;
}
.ir-fi-icon  { width: 15px; height: 15px; color: var(--ir-acc); flex-shrink: 0; }
.ir-fi-name  { font-size: .85rem; font-weight: 600; color: var(--ir-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-fi-meta  { font-size: .75rem; color: var(--ir-muted); white-space: nowrap; flex-shrink: 0; }
.ir-tbar-right { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.ir-sep { width: 1px; height: 20px; background: var(--ir-bdr); margin: 0 .1rem; }

.ir-tbtn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; padding: .35rem .65rem;
  border-radius: var(--ir-rxs); border: 1px solid var(--ir-bdr);
  background: var(--ir-bg); color: var(--ir-muted); cursor: pointer;
  transition: all var(--ir-t);
}
.ir-tbtn:hover { border-color: var(--ir-bdr2); color: var(--ir-txt); }
.ir-tbtn:disabled { opacity: .4; pointer-events: none; }
.ir-tbtn svg { width: 13px; height: 13px; stroke-width: 2.2; }
.ir-tbtn--accent { border-color: var(--ir-acc); color: var(--ir-acc); }
.ir-tbtn--accent:hover { background: var(--ir-acc); color: var(--ir-acctxt); }
.ir-tbtn--danger { border-color: var(--ir-danger); color: var(--ir-danger); }
.ir-tbtn--danger:hover { background: var(--ir-danger); color: #fff; }

/* Layout */
.ir-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: var(--ir-gap); align-items: start;
}
@media (max-width: 900px) { .ir-layout { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════
   PREVIEW COLUMN
══════════════════════════════════════ */
.ir-preview-col { display: flex; flex-direction: column; gap: .75rem; }

/* Mode bar */
.ir-mode-bar {
  display: flex; gap: .35rem;
  background: var(--ir-surf); border: 1px solid var(--ir-bdr); border-radius: var(--ir-rsm); padding: 3px;
}
.ir-mbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .3rem;
  font-size: .78rem; font-weight: 600; padding: .4rem .5rem;
  border-radius: calc(var(--ir-rsm) - 2px); border: none; background: none;
  color: var(--ir-muted); cursor: pointer; transition: all var(--ir-t); white-space: nowrap;
}
.ir-mbtn svg { width: 13px; height: 13px; stroke-width: 2.2; }
.ir-mbtn:hover { color: var(--ir-txt); }
.ir-mbtn--on { background: var(--ir-bg); color: var(--ir-acc); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* Preview box: checkerboard */
.ir-preview-box {
  border: 1px solid var(--ir-bdr); border-radius: var(--ir-r); overflow: hidden;
  background-image:
    linear-gradient(45deg,#ccc 25%,transparent 25%),
    linear-gradient(-45deg,#ccc 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#ccc 75%),
    linear-gradient(-45deg,transparent 75%,#ccc 75%);
  background-size: 16px 16px;
  background-position: 0 0,0 8px,8px -8px,-8px 0;
  background-color: #e0e0e0;
  min-height: 220px; position: relative;
}
[data-theme="dark"] .ir-preview-box {
  background-color: #2a2a2a;
  background-image:
    linear-gradient(45deg,#333 25%,transparent 25%),
    linear-gradient(-45deg,#333 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#333 75%),
    linear-gradient(-45deg,transparent 75%,#333 75%);
}

.ir-pane { width: 100%; }

/* Canvas scroll area */
.ir-canvas-scroll {
  display: flex; align-items: center; justify-content: center;
  overflow: auto; min-height: 220px; max-height: 460px; padding: 12px;
}
.ir-canvas { display: block; border-radius: 2px; }

/* Badge */
.ir-canvas-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,.52); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 99px; pointer-events: none; backdrop-filter: blur(4px); letter-spacing: .04em;
}

/* Zoom bar */
.ir-zoom-bar {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.45); border-radius: 99px; padding: 3px 7px;
  backdrop-filter: blur(6px);
}
.ir-zbtn {
  width: 22px; height: 22px; border-radius: 50%; border: none; background: none;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--ir-t);
}
.ir-zbtn:hover { background: rgba(255,255,255,.2); }
.ir-zbtn svg { width: 12px; height: 12px; stroke-width: 2.5; }
.ir-zval { font-size: .7rem; font-weight: 700; color: #fff; min-width: 36px; text-align: center; }

/* ── Before/After compare ──────────────
   Two canvases stacked. The overlay (resized)
   uses clip-path to reveal only the right portion.
────────────────────────────────────── */
.ir-cmp-wrap {
  position: relative; overflow: hidden; user-select: none;
  width: 100%; min-height: 220px;
}
/* Both canvases fill the wrap */
.ir-cmp-canvas {
  position: absolute; top: 0; left: 0; display: block;
  width: 100%; height: 100%;
}
/* Base (original) sits behind */
.ir-cmp-base  { z-index: 1; }
/* Overlay (resized) clipped to right of divider via inline style */
.ir-cmp-overlay { z-index: 2; }

/* Drag divider line */
.ir-cmp-div {
  position: absolute; top: 0; bottom: 0;
  width: 3px; background: #fff; z-index: 10;
  cursor: ew-resize; transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0,0,0,.4);
}
.ir-cmp-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #555; letter-spacing: -1px;
}
.ir-cmp-handle::before { content: '◀▶'; }
.ir-cmp-lbl {
  position: absolute; bottom: 10px;
  font-size: .7rem; font-weight: 700;
  background: rgba(0,0,0,.5); color: #fff;
  padding: 2px 8px; border-radius: 99px;
  pointer-events: none; backdrop-filter: blur(4px); z-index: 11;
}
.ir-cmp-lbl--l { left: 10px; }
.ir-cmp-lbl--r { right: 10px; }

/* ── Crop ── */
.ir-crop-wrap {
  position: relative; display: flex; align-items: flex-start;
  overflow: hidden;
}
.ir-crop-overlay { position: absolute; inset: 0; pointer-events: none; }
.ir-crop-box {
  position: absolute; border: 2px solid var(--ir-acc);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
  cursor: move; pointer-events: all;
}
.ir-crop-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
  pointer-events: none;
}
/* Handles */
.ir-ch {
  position: absolute; width: 12px; height: 12px;
  background: var(--ir-acc); border: 2px solid #fff;
  border-radius: 2px; pointer-events: all;
}
.ir-ch-nw { top:-6px;    left:-6px;   cursor: nw-resize; }
.ir-ch-ne { top:-6px;    right:-6px;  cursor: ne-resize; }
.ir-ch-sw { bottom:-6px; left:-6px;   cursor: sw-resize; }
.ir-ch-se { bottom:-6px; right:-6px;  cursor: se-resize; }
.ir-ch-n  { top:-6px;    left:50%;    transform:translateX(-50%); cursor: n-resize; }
.ir-ch-s  { bottom:-6px; left:50%;    transform:translateX(-50%); cursor: s-resize; }
.ir-ch-w  { top:50%;     left:-6px;   transform:translateY(-50%); cursor: w-resize; }
.ir-ch-e  { top:50%;     right:-6px;  transform:translateY(-50%); cursor: e-resize; }

.ir-crop-bar {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
  background: var(--ir-surf); border-top: 1px solid var(--ir-bdr);
}
.ir-crop-dims { font-size: .78rem; color: var(--ir-muted); flex: 1; font-variant-numeric: tabular-nums; }
.ir-crop-apply, .ir-crop-cancel {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 700; padding: .35rem .7rem;
  border-radius: var(--ir-rxs); border: none; cursor: pointer; transition: all var(--ir-t);
}
.ir-crop-apply  { background: var(--ir-acc); color: var(--ir-acctxt); }
.ir-crop-apply:hover { background: var(--ir-acc2); }
.ir-crop-cancel { background: var(--ir-surf2); color: var(--ir-muted); border: 1px solid var(--ir-bdr); }
.ir-crop-cancel:hover { color: var(--ir-txt); }
.ir-crop-apply svg, .ir-crop-cancel svg { width: 12px; height: 12px; stroke-width: 2.5; }

/* Info strip */
.ir-info-strip { font-size: .78rem; color: var(--ir-muted); text-align: center; min-height: 1.2rem; }

/* ══════════════════════════════════════
   CONTROLS COLUMN
══════════════════════════════════════ */
.ir-ctrl-col { display: flex; flex-direction: column; gap: .9rem; }

.ir-panel {
  background: var(--ir-bg); border: 1px solid var(--ir-bdr); border-radius: var(--ir-r);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem;
  box-shadow: var(--ir-sh);
}
.ir-ph {
  display: flex; align-items: center; gap: .4rem;
  font-size: .73rem; font-weight: 800; color: var(--ir-muted);
  letter-spacing: .07em; text-transform: uppercase;
}
.ir-ph svg { width: 13px; height: 13px; stroke-width: 2.3; }

/* Transform */
.ir-xrow { display: flex; gap: .4rem; flex-wrap: wrap; }
.ir-xbtn {
  flex: 1; min-width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .68rem; font-weight: 700; padding: .45rem .3rem;
  border-radius: var(--ir-rxs); border: 1px solid var(--ir-bdr);
  background: var(--ir-surf); color: var(--ir-muted); cursor: pointer; transition: all var(--ir-t);
}
.ir-xbtn svg { width: 15px; height: 15px; stroke-width: 2; }
.ir-xbtn:hover { border-color: var(--ir-acc); color: var(--ir-acc); background: color-mix(in srgb, var(--ir-acc) 8%, var(--ir-surf)); }
.ir-xbtn:active { transform: scale(.94); }

/* Tabs */
.ir-tabs {
  display: flex; gap: .3rem;
  background: var(--ir-surf); border: 1px solid var(--ir-bdr); border-radius: var(--ir-rsm); padding: 3px;
}
.ir-tab {
  flex: 1; font-size: .76rem; font-weight: 600; padding: .38rem .4rem;
  border-radius: calc(var(--ir-rsm) - 2px); border: none; background: none;
  color: var(--ir-muted); cursor: pointer; transition: all var(--ir-t); white-space: nowrap;
}
.ir-tab:hover { color: var(--ir-txt); }
.ir-tab--on { background: var(--ir-bg); color: var(--ir-acc); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* Tab bodies */
.ir-tbody { display: flex; flex-direction: column; gap: .55rem; }

/* W/H row */
.ir-wh { display: flex; align-items: flex-end; gap: .6rem; }
.ir-field { flex: 1; display: flex; flex-direction: column; gap: .28rem; }
.ir-field label { font-size: .75rem; font-weight: 700; color: var(--ir-muted); }
.ir-u { font-size: .7rem; font-weight: 400; opacity: .7; }

.ir-inp {
  width: 100%; padding: .5rem .65rem;
  font-size: .92rem; font-weight: 500; color: var(--ir-txt);
  background: var(--ir-surf); border: 1.5px solid var(--ir-bdr); border-radius: var(--ir-rsm);
  outline: none; transition: border-color var(--ir-t), box-shadow var(--ir-t);
  -moz-appearance: textfield;
}
.ir-inp::-webkit-outer-spin-button,
.ir-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.ir-inp:focus {
  border-color: var(--ir-acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ir-acc) 18%, transparent);
}
.ir-inp--sm { width: 68px; flex-shrink: 0; }
select.ir-inp { cursor: pointer; }

.ir-lock {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--ir-bdr); background: var(--ir-surf);
  color: var(--ir-muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--ir-t); margin-bottom: 2px;
}
.ir-lock svg { width: 14px; height: 14px; stroke-width: 2.3; }
.ir-lock--on { background: var(--ir-acc); border-color: var(--ir-acc); color: var(--ir-acctxt); }
.ir-note { font-size: .75rem; color: var(--ir-muted); margin: 0; }

/* Percentage */
.ir-pct { display: flex; align-items: center; gap: .6rem; }

/* Presets */
.ir-fitrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ir-fitleader { font-size: .75rem; color: var(--ir-muted); font-weight: 600; }
.ir-fitbtns { display: flex; gap: .3rem; }
.ir-fitbtn {
  font-size: .73rem; font-weight: 700; padding: .25rem .55rem;
  border-radius: var(--ir-rxs); border: 1px solid var(--ir-bdr);
  background: var(--ir-surf); color: var(--ir-muted); cursor: pointer; transition: all var(--ir-t);
}
.ir-fitbtn:hover { border-color: var(--ir-bdr2); color: var(--ir-txt); }
.ir-fitbtn--on { background: var(--ir-acc); border-color: var(--ir-acc); color: var(--ir-acctxt); }

.ir-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; max-height: 280px; overflow-y: auto; }
.ir-pbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: .55rem .65rem; background: var(--ir-surf);
  border: 1.5px solid var(--ir-bdr); border-radius: var(--ir-rsm);
  cursor: pointer; transition: all var(--ir-t); text-align: left;
}
.ir-pbtn:hover { border-color: var(--ir-acc); background: color-mix(in srgb, var(--ir-acc) 7%, var(--ir-surf)); }
.ir-pbtn--on   { border-color: var(--ir-acc); background: color-mix(in srgb, var(--ir-acc) 13%, var(--ir-surf)); }
.ir-pbtn-name  { font-size: .78rem; font-weight: 700; color: var(--ir-txt); }
.ir-pbtn-dims  { font-size: .68rem; color: var(--ir-muted); }

/* Slider */
.ir-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 99px; background: var(--ir-bdr); outline: none; cursor: pointer;
}
.ir-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ir-acc); border: 2px solid var(--ir-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; transition: transform .15s;
}
.ir-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ir-slider::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ir-acc); border: 2px solid var(--ir-bg); cursor: pointer;
}

/* Format buttons */
.ir-fmtrow { display: flex; gap: .5rem; }
.ir-fmt {
  flex: 1; padding: .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  border-radius: var(--ir-rxs); border: 1.5px solid var(--ir-bdr);
  background: var(--ir-surf); color: var(--ir-muted); cursor: pointer; transition: all var(--ir-t);
}
.ir-fmt:hover { border-color: var(--ir-bdr2); color: var(--ir-txt); }
.ir-fmt--on { background: var(--ir-acc); border-color: var(--ir-acc); color: var(--ir-acctxt); }

/* Quality */
.ir-qlabel { font-size: .78rem; color: var(--ir-muted); font-weight: 500; }

/* Toggle */
.ir-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding-top: .6rem; border-top: 1px solid var(--ir-bdr); cursor: pointer;
}
.ir-tlabel {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--ir-muted); font-weight: 500;
}
.ir-tlabel svg { width: 13px; height: 13px; stroke-width: 2.2; }
.ir-toggle { position: relative; flex-shrink: 0; }
.ir-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ir-track {
  display: block; width: 38px; height: 22px; border-radius: 99px;
  background: var(--ir-bdr); transition: background var(--ir-t); position: relative;
}
.ir-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform var(--ir-t); box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ir-toggle input:checked + .ir-track { background: var(--ir-acc); }
.ir-toggle input:checked + .ir-track::after { transform: translateX(16px); }

/* Summary */
.ir-summary {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .75rem; background: var(--ir-surf);
  border: 1px solid var(--ir-bdr); border-radius: var(--ir-rsm);
}
.ir-sum { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; }
.ir-sum span  { color: var(--ir-muted); }
.ir-sum strong { color: var(--ir-txt); font-variant-numeric: tabular-nums; }
strong.ir-save { color: var(--ir-ok) !important; }
strong.ir-over { color: var(--ir-danger) !important; }

/* Action buttons */
.ir-actrow { display: flex; gap: .5rem; }
.ir-dl {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem;
  font-size: .9rem; font-weight: 700; padding: .65rem 1rem;
  border-radius: var(--ir-rsm); border: none;
  background: var(--ir-acc); color: var(--ir-acctxt); cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ir-acc) 35%, transparent);
  transition: all var(--ir-t);
}
.ir-dl:hover { background: var(--ir-acc2); transform: translateY(-1px); }
.ir-dl:active { transform: none; }
.ir-dl svg { width: 15px; height: 15px; stroke-width: 2.3; }
.ir-copy, .ir-rst {
  width: 42px; height: 42px; border-radius: var(--ir-rsm);
  border: 1.5px solid var(--ir-bdr); background: var(--ir-surf);
  color: var(--ir-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--ir-t);
}
.ir-copy:hover { border-color: var(--ir-acc); color: var(--ir-acc); }
.ir-rst:hover  { border-color: var(--ir-danger); color: var(--ir-danger); }
.ir-copy svg, .ir-rst svg { width: 15px; height: 15px; stroke-width: 2.2; }

/* Keyboard hint */
.ir-kbhint {
  font-size: .72rem; color: var(--ir-muted);
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; line-height: 1.8;
}
.ir-kbhint svg { width: 12px; height: 12px; stroke-width: 2; }
.ir-kbhint kbd {
  font-size: .68rem; padding: 1px 5px;
  background: var(--ir-surf2); border: 1px solid var(--ir-bdr);
  border-radius: 3px; font-family: inherit; color: var(--ir-txt);
}

/* ══════════════════════════════════════
   BATCH
══════════════════════════════════════ */
.ir-batch { display: flex; flex-direction: column; gap: 1rem; animation: irIn .3s ease; }
.ir-batch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ir-batch-head h2 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.1rem; font-weight: 700; color: var(--ir-txt); margin: 0;
}
.ir-batch-head h2 svg { width: 18px; height: 18px; stroke-width: 2; color: var(--ir-acc); }

.ir-bsettings {
  display: flex; gap: .65rem; flex-wrap: wrap;
  padding: 1rem; background: var(--ir-surf);
  border: 1px solid var(--ir-bdr); border-radius: var(--ir-r);
}
.ir-bset { display: flex; flex-direction: column; gap: .28rem; flex: 1; min-width: 110px; }
.ir-bset label { font-size: .74rem; font-weight: 700; color: var(--ir-muted); }

.ir-bdrop {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .5rem; min-height: 130px;
  border: 2px dashed var(--ir-bdr2); border-radius: var(--ir-r);
  background: var(--ir-surf); cursor: pointer; outline: none; transition: all var(--ir-t);
}
.ir-bdrop:hover, .ir-bdrop:focus-visible, .ir-bdrop.drag-on {
  border-color: var(--ir-acc); background: var(--ir-surf2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ir-acc) 15%, transparent);
}
.ir-bdrop svg { width: 26px; height: 26px; color: var(--ir-acc); stroke-width: 1.7; pointer-events: none; }
.ir-bdrop p { font-size: .88rem; font-weight: 600; color: var(--ir-muted); pointer-events: none; margin: 0; }

.ir-blist { display: flex; flex-direction: column; gap: .6rem; }
.ir-blist-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; font-weight: 600; color: var(--ir-muted);
}
.ir-bitems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 320px; overflow-y: auto; }
.ir-bitem {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  background: var(--ir-surf); border: 1px solid var(--ir-bdr); border-radius: var(--ir-rsm);
}
.ir-bitem-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--ir-rxs); border: 1px solid var(--ir-bdr); flex-shrink: 0; }
.ir-bitem-info { flex: 1; min-width: 0; }
.ir-bitem-name { font-size: .82rem; font-weight: 600; color: var(--ir-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-bitem-meta { font-size: .72rem; color: var(--ir-muted); }
.ir-bitem-rm {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ir-bdr);
  background: none; color: var(--ir-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--ir-t); flex-shrink: 0;
}
.ir-bitem-rm:hover { background: var(--ir-danger); border-color: var(--ir-danger); color: #fff; }
.ir-bitem-rm svg { width: 12px; height: 12px; stroke-width: 2.5; }

.ir-bactions { display: flex; flex-direction: column; gap: .65rem; }
.ir-bprog { display: flex; flex-direction: column; gap: .4rem; }
/* FIX: actual progress bar wrapper */
.ir-progbar-wrap {
  height: 8px; border-radius: 99px; background: var(--ir-surf);
  border: 1px solid var(--ir-bdr); overflow: hidden;
}
.ir-progbar {
  height: 100%; border-radius: 99px;
  background: var(--ir-acc); width: 0%; transition: width .2s ease;
}
#irProgLabel { font-size: .8rem; color: var(--ir-muted); text-align: center; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.ir-toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #1a1510; color: #f0e8d8;
  font-size: .86rem; font-weight: 600; padding: .55rem 1.2rem;
  border-radius: 99px; box-shadow: var(--ir-shM);
  opacity: 0; pointer-events: none; z-index: 9999; white-space: nowrap;
  transition: opacity .22s, transform .22s;
}
.ir-toast--on { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .ir-toast { background: #f0e8d8; color: #1a1510; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .ir-panel { padding: .85rem; }
  .ir-xrow  { gap: .3rem; }
  .ir-xbtn  { min-width: 48px; font-size: .62rem; }
  .ir-actrow { flex-wrap: wrap; }
  .ir-dl    { min-width: 100%; }
  .ir-mode-bar { flex-wrap: wrap; }
  .ir-tbtn span { display: none; }
  .ir-bsettings { gap: .5rem; }
  .ir-bset { min-width: 100px; }
  .ir-preset-grid { grid-template-columns: 1fr 1fr; }
}