/* Free Color Palette Extractor — additive to utility.css, which already
   supplies the hero, drop zone, and status line. */

.palette-workspace { border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); display: block; }
.palette-workspace[hidden] { display: none; }

.palette-preview-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
#palettePreview { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }

#paletteStatus { margin: 8px 0 4px; min-height: 1.4em; }
#paletteStatus.error { color: #991b1b; }
#paletteStatus.success { color: var(--purple); }

.palette-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-top: 14px; }

.palette-swatch { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0; cursor: pointer; background: #fff; font: inherit; text-align: left; transition: transform .15s; }
.palette-swatch:hover { transform: translateY(-2px); }
.palette-swatch-color { display: block; height: 74px; background: var(--swatch-color); }
.palette-swatch-hex { display: block; padding: 8px 10px 0; font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.palette-swatch-hex.copied { color: var(--purple); }
.palette-swatch-pct { display: block; padding: 2px 10px 10px; font-size: 12px; color: var(--muted); }

.palette-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.palette-actions .button { min-height: 44px; }

@media (max-width: 500px) {
  .palette-actions .button { flex: 1 1 100%; }
}