.uv-palette-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.uv-palette-swatch {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 6px; border:2px solid transparent; border-radius:10px;
  background:rgba(255,255,255,.04); cursor:pointer; position:relative;
  transition: border-color var(--motion-fast,.18s) var(--ease-emphasized,ease);
}
.uv-palette-swatch:hover { border-color:rgba(255,255,255,.18); }
.uv-palette-swatch[aria-checked="true"] {
  border-color: currentColor;
  background: rgba(255,255,255,.10);
}
.uv-palette-swatch__pill {
  display:flex; width:48px; height:24px; border-radius:12px; overflow:hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.uv-palette-swatch__band { flex:1; }
.uv-palette-swatch__label { font-size:11px; font-weight:500; opacity:.85; }
.uv-palette-swatch__check {
  position:absolute; top:4px; right:4px; width:14px; height:14px; opacity:0;
  transition: opacity var(--motion-fast,.18s) var(--ease-emphasized,ease);
}
.uv-palette-swatch[aria-checked="true"] .uv-palette-swatch__check { opacity:1; }

.uv-palette-advanced { margin-top:12px; }
.uv-palette-advanced summary {
  cursor:pointer; font-size:12px; opacity:.7; padding:6px 0;
}
.uv-palette-advanced label {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; margin-top:8px; gap:8px;
}
.uv-palette-advanced input[type="color"] {
  width:42px; height:28px; border:none; border-radius:6px; cursor:pointer;
  background:transparent; padding:0;
}
.uv-palette-reset {
  margin-top:10px; font-size:11px; padding:4px 8px; border-radius:6px;
  background:transparent; border:1px solid currentColor; opacity:.7; cursor:pointer;
}
.uv-palette-reset:hover { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .uv-palette-swatch, .uv-palette-swatch__check { transition:none; }
}