/* Image Filter Suite tool-specific styles */
@import url('../../shared/css/styles.css');

#drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-normal) ease, background-color var(--transition-normal) ease;
  margin-bottom: 20px;
}
#drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-bg-secondary);
}
#drop-zone p { margin: 0; color: var(--color-text-muted); }

#filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
.filter-btn {
  background: var(--color-btn-bg);
  border: 1px solid var(--color-btn-border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text);
  transition: background-color var(--transition-normal) ease;
}
.filter-btn:hover { background: var(--color-btn-hover); }
.filter-btn.active {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}

#canvas {
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}