/* --- Minimal styles for modal and UI --- */
.icp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 10000;
}
.icp-modal {
  width: 92%;
  max-width: 900px;
  max-height: 90vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
.icp-header {
  padding: 12px 16px;
  background:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #eee;
}
.icp-title { font-weight:600 }
.icp-body { display:flex; gap:12px; padding: 12px; flex:1; overflow:hidden; }
.icp-canvas-wrap {
  background: #222;
  position: relative;
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  min-width: 300px;
  max-height: calc(90vh - 150px);
}
.icp-canvas {
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
}

/* Crop box visual */
.icp-crop-box {
  position: absolute;
  border: 2px dashed rgba(255,255,255,0.9);
  box-sizing: border-box;
  pointer-events: none;
  /* center default */
}

/* controls column */
.icp-controls {
  width: 260px;
  max-width: 40%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.icp-controls label { font-size:13px; margin-bottom:6px; display:block; }
.icp-controls input[type="range"] { width:100%; }
.icp-footer {
  padding:10px 12px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
  border-top:1px solid #eee;
  background:#fafafa;
}
.icp-btn {
  border:0;
  background:#2b6cb0;
  color:white;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
}
.icp-btn.secondary { background:#e2e8f0; color:#111; }
.icp-hint { font-size:12px; color:#333; }

.small { font-size:13px; padding:6px 9px; }

/* responsive */
@media (max-width:720px){
  .icp-controls{ width: 180px; }
}