/* 画像のモザイク・ぼかし — ツール固有 */
.im-drop {
  border: 2px dashed var(--sg-border, #cfd4dc);
  border-radius: 12px;
  padding: 34px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.im-drop:hover, .im-drop:focus, .im-drop.is-over {
  border-color: var(--sg-primary, #3b5bdb);
  background: rgba(59, 91, 219, 0.05);
  outline: none;
}
.im-drop__title { font-weight: 600; margin: 0 0 4px; }
.im-drop__sub { margin: 0; font-size: .85rem; color: var(--sg-muted, #777); }

.im-controls { margin-top: 4px; }
.im-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.im-row .sg-label { margin: 0; }
.im-effect { width: auto; }
.im-range { flex: 1 1 160px; min-width: 140px; }
.im-strength-val { font-weight: 400; color: var(--sg-muted, #777); font-size: .85rem; }

.im-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.im-stage { text-align: center; }
.im-canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) 0 0/16px 16px,
    linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%) 8px 8px/16px 16px;
  touch-action: none;
  cursor: crosshair;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.im-status { margin: 10px 0 0; min-height: 1.2em; }

:root.sg-dark .im-canvas {
  background:
    linear-gradient(45deg, #333 25%, transparent 25%, transparent 75%, #333 75%) 0 0/16px 16px,
    linear-gradient(45deg, #333 25%, #222 25%, #222 75%, #333 75%) 8px 8px/16px 16px;
}