/* ============================================================
   Crop Image — Redact-style workspace layout (stage + side panel)
   ============================================================ */
.ci-wrap { max-width: 720px; margin: 0 auto; padding: 56px 22px 90px; }
/* the crop workspace needs full width */
.ci-wrap:has(#ciCrop:not(.hidden)) { max-width: 1100px; }
.ci-wrap.ci-wide { max-width: 1100px; }  /* fallback for browsers without :has() */

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

/* ---- STEP 1: upload ---- */
.ci-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; }
.ci-drop:hover { border-color: var(--lime); background: var(--surface); }
.ci-drop.drag { border-color: var(--lime); background: var(--surface); }
.ci-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; }
.ci-drop:hover .ci-drop-ic { transform: translateY(-4px); }
.ci-drop .t { font-size: 1.3rem; font-weight: 700; }
.ci-drop .s { color: var(--txt2); font-size: .9rem; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }

/* ---- STEP 2: workspace shell (canvas | panel) ---- */
.ci-shell { display: grid; grid-template-columns: 1fr 340px; gap: 0;
  border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg); min-height: 540px; box-shadow: var(--shadow-lg); }

.ci-main { display: flex; flex-direction: column; min-width: 0; }
.ci-canvas-area { flex: 1; overflow-y: auto; padding: 28px 24px; background: var(--bg);
  display: flex; flex-direction: column; }

.ci-stage-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.ci-stage { position: relative; max-width: 100%; display: flex; align-items: center;
  justify-content: center; user-select: none; touch-action: none; }
.ci-stage img { max-width: 100%; max-height: 64vh; display: block; -webkit-user-drag: none; user-select: none; }

/* dark shade with a transparent hole over the selected area */
.ci-shade { position: absolute; background: rgba(8, 10, 14, 0.62); pointer-events: none; }

/* selection rectangle */
.ci-sel { position: absolute; border: 1.5px solid var(--lime); box-sizing: border-box;
  cursor: move; box-shadow: 0 0 0 1px rgba(0,0,0,.3); transition: border-radius .12s; }
.ci-h { position: absolute; width: 14px; height: 14px; background: var(--lime);
  border: 2px solid #0a0a0a; border-radius: 3px; }
.ci-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.ci-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.ci-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ci-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ci-n { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ci-s { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.ci-w { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ci-e { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.ci-info { text-align: center; font-size: .82rem; color: var(--txt2);
  font-family: 'JetBrains Mono', monospace; margin-top: 16px; }

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

.ci-shape-row { display: flex; flex-direction: column; gap: 8px; }
.ci-shape-btn { background: var(--surface2); color: var(--txt); border: 1px solid var(--line2);
  padding: 11px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .9rem;
  text-align: left; transition: all .15s; }
.ci-shape-btn:hover { border-color: var(--lime); color: var(--lime); }
.ci-shape-btn.is-active { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }

.ci-radius-inner { display: flex; gap: 12px; align-items: center; }
.ci-radius-slider { flex: 1; accent-color: var(--lime); cursor: pointer; }
.ci-radius-val { color: var(--txt); font-size: .85rem; font-weight: 600; min-width: 42px; text-align: right; }

.ci-rotate-row { display: flex; gap: 10px; }
.ci-rotate-btn { flex: 1; background: var(--surface2); color: var(--txt); border: 1px solid var(--line2);
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .88rem;
  transition: all .15s; }
.ci-rotate-btn:hover { border-color: var(--lime); color: var(--lime); }

.ci-panel-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.ci-reset, .ci-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; }
.ci-reset:hover, .ci-back:hover { border-color: var(--txt2); color: var(--txt); }

/* ---- mobile toggle + sheet handle (hidden on desktop) ---- */
.ci-mobtoggle { display: none; }
.ci-sheet-handle { display: none; }
.ci-sheet-backdrop { display: none; }

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

/* ---- responsive: stack panel below on tablet, slide-up sheet on mobile ---- */
@media (max-width: 900px) {
  .ci-wrap:has(#ciCrop:not(.hidden)), .ci-wrap.ci-wide { max-width: 720px; }
  .ci-shell { grid-template-columns: 1fr; min-height: 0; }
  .ci-panel { border-left: none; border-top: 1px solid var(--line2); }
  .ci-shape-row { flex-direction: row; flex-wrap: wrap; }
  .ci-shape-btn { flex: 1; text-align: center; min-width: 90px; }
}

@media (max-width: 600px) {
  .ci-h { width: 18px; height: 18px; }
  .ci-drop { padding: 36px 18px; }
  .ci-drop-ic { width: 54px; height: 54px; }
  .ci-drop .t { font-size: 1.18rem; }
}