/* ============================================================
   Merge Images — Redact-style workspace layout (preview + side panel)
   ============================================================ */
.mi-wrap { max-width: 720px; margin: 0 auto; padding: 56px 22px 90px; }
.mi-wrap:has(#miArrange:not(.hidden)) { max-width: 1100px; }
.mi-wrap.mi-wide { max-width: 1100px; }  /* fallback for browsers without :has() */

.mi-head { text-align: center; margin-bottom: 30px; }
.mi-head h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; margin: 10px 0 8px; }
.mi-head p { color: var(--txt2); max-width: 560px; margin: 0 auto; }

/* ---- STEP 1: upload ---- */
.mi-drop { position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer; padding: 44px 30px; border: 2px dashed var(--line2);
  border-radius: var(--r-lg); background: var(--card); transition: all .25s; max-width: 720px; margin: 0 auto; }
.mi-drop:hover, .mi-drop.drag { border-color: var(--lime); background: var(--surface); }
.mi-drop-ic { width: 60px; height: 60px; margin-bottom: 16px; border-radius: 18px; display: grid;
  place-items: center; background: var(--lime); color: #0a0b0d; transition: transform .25s; }
.mi-drop:hover .mi-drop-ic { transform: translateY(-4px); }
.mi-drop .t { font-size: 1.3rem; font-weight: 700; }
.mi-drop .s { color: var(--txt2); font-size: .9rem; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }

/* ---- STEP 2: workspace shell (canvas | panel) ---- */
.mi-shell { display: grid; grid-template-columns: 1fr 320px; gap: 0;
  border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg); min-height: 560px; box-shadow: var(--shadow-lg); }
.mi-main { display: flex; flex-direction: column; min-width: 0; }
.mi-canvas-area { flex: 1; overflow-y: auto; padding: 26px 24px; background: var(--bg); }

/* ---- right panel (Redact rd-panel style) ---- */
.mi-panel { overflow-y: auto; padding: 22px 20px 30px; border-left: 1px solid var(--line2);
  background: var(--surface); }
.mi-panel-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 18px; }
.mi-panel-label { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt3); margin: 0 0 9px; }
.mi-ctrl { margin-bottom: 18px; }

/* mode toggle (now vertical-friendly in the panel) */
.mi-modebar { display: flex; gap: 8px; margin-bottom: 20px; }
.mi-mode { flex: 1; background: var(--surface2); color: var(--txt2); border: 1px solid var(--line2);
  padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .85rem;
  transition: all .15s; }
.mi-mode.sel { background: var(--lime); color: #0a0a0a; border-color: var(--lime); }

/* segmented controls — wrap nicely in the narrow panel */
.mi-seg { display: flex; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--line2);
  border-radius: 12px; padding: 3px; gap: 2px; }
.mi-seg button { border: none; background: none; color: var(--txt2); cursor: pointer;
  padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: .82rem; transition: all .12s; flex: 1; min-width: 38px; }
.mi-seg button.sel { background: var(--lime); color: #0a0a0a; }
/* Images-per-row: tidy 5-per-row grid of individual cells */
#miPerRow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: none; border: none; padding: 0; }
#miPerRow button {
  flex: none; min-width: 0; padding: 11px 0; text-align: center;
  background: var(--surface2); border: 1px solid var(--line2); border-radius: 10px;
  font-weight: 700; transition: all .14s;
}
#miPerRow button:hover { border-color: var(--lime); color: var(--lime); }
#miPerRow button.sel { background: var(--lime); color: #0a0a0a; border-color: var(--lime); box-shadow: 0 4px 12px -4px rgba(194,240,74,0.5); }

.mi-panel-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.mi-reset, .mi-back { background: none; border: 1px solid var(--line2); color: var(--txt2);
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .85rem;
  transition: all .15s; }
.mi-reset:hover, .mi-back:hover { border-color: var(--txt2); color: var(--txt); }

/* ---- preview grid (center) ---- */
.mi-hint { text-align: center; font-size: .78rem; color: var(--txt3); margin-bottom: 12px; }
.mi-preview { display: grid; gap: 10px; background: #fff; border: 1px solid var(--line2);
  border-radius: var(--r-lg); padding: 14px; min-height: 200px; align-content: start; }
.mi-preview.mi-checker {
  background-image:
    linear-gradient(45deg, #e3e6ea 25%, transparent 25%),
    linear-gradient(-45deg, #e3e6ea 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e3e6ea 75%),
    linear-gradient(-45deg, transparent 75%, #e3e6ea 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-color: #f4f5f7;
}
.mi-cell { position: relative; cursor: grab; line-height: 0; }
.mi-cell.dragging { opacity: .4; }
.mi-cell img { max-width: 100%; max-height: 200px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); display: block; }
.mi-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; background: #1a1a1a; color: #fff; border: 2px solid #fff;
  cursor: pointer; font-size: .7rem; line-height: 1; display: flex; align-items: center;
  justify-content: center; padding: 0; }
.mi-x:hover { background: #e23; }

/* ---- free canvas page (center) ---- */
.mi-page-wrap { display: flex; justify-content: center; }
.mi-page { position: relative; width: 100%; max-width: 560px; aspect-ratio: 595/842;
  background: #fff; border: 1px solid var(--line2); border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3); overflow: hidden; margin: 0 auto; }
.mi-free-item { position: absolute; cursor: grab; line-height: 0; outline: 1.5px dashed transparent; }
.mi-free-item:hover { outline-color: var(--lime); }
.mi-free-item img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none;
  transform-origin: center; }
.mi-free-handle { position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px;
  background: var(--lime); border: 2px solid #0a0a0a; border-radius: 3px; cursor: nwse-resize; z-index: 3; }
.mi-free-rot { position: absolute; left: -8px; bottom: -8px; width: 22px; height: 22px;
  background: #1a1a1a; color: #fff; border: 2px solid #fff; border-radius: 50%; cursor: pointer;
  font-size: .8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 3; }
.mi-free-rot:hover { background: var(--lime); color: #0a0a0a; }

/* mobile bits hidden on desktop */
.mi-mobtoggle, .mi-sheet-handle, .mi-sheet-backdrop { display: none; }

/* Safeguard: the two canvases (grid preview & free page) must never show at
   the same time. .hidden already handles this, but this keeps the free page
   collapsed if JS hasn't run yet, so only the grid is ever visible by default. */
.mi-free-only.hidden { display: none !important; }

/* ---- STEP 3: result ---- */
.mi-result-card { text-align: center; padding: 40px 26px; background: var(--card);
  border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  max-width: 560px; margin: 0 auto; }
.mi-check { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--lime);
  color: #0a0a0a; display: grid; place-items: center; }
.mi-result-card h3 { font-size: 1.5rem; }
.mi-result-card > p { color: var(--txt2); margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
.mi-preview-box { background: var(--surface); border: 1px solid var(--line2); border-radius: var(--r-lg);
  padding: 16px; margin: 18px auto; max-width: 440px; display: flex; align-items: center; justify-content: center; }
.mi-preview-box img { max-width: 100%; max-height: 320px; border-radius: 6px; display: block; }

/* ---- responsive: stack panel below ---- */
@media (max-width: 900px) {
  .mi-wrap:has(#miArrange:not(.hidden)), .mi-wrap.mi-wide { max-width: 720px; }
  .mi-shell { grid-template-columns: 1fr; min-height: 0; }
  .mi-panel { border-left: none; border-top: 1px solid var(--line2); }
}
@media (max-width: 600px) {
  .mi-drop { padding: 36px 18px; }
  .mi-drop-ic { width: 54px; height: 54px; }
  .mi-drop .t { font-size: 1.18rem; }
  .mi-seg button { padding: 6px 10px; }
}