/* Color Palette Extractor Styles */
.drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); text-align: center; cursor: pointer; transition: all var(--transition-base); }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--color-primary); background: var(--color-surface); }
.drop-icon { font-size: 3rem; margin-bottom: var(--space-4); }
.drop-zone .hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

.image-preview { width: 100%; max-height: 400px; border-radius: var(--radius-md); object-fit: contain; display: block; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
.color-swatch {
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  transition: all var(--transition-base); border: 1px solid var(--color-border);
}
.color-swatch:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.swatch-color { height: 100px; width: 100%; }
.swatch-info { padding: var(--space-3); background: var(--color-bg-card); }
.swatch-hex { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); }
.swatch-rgb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.swatch-pct { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }