.color-sample-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.color-sample-controls select { max-width: 170px; }
.color-sample-result { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 11px; }
.color-sample-swatch { display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid var(--line, rgba(15,23,42,.34)); background: repeating-conic-gradient(#d1d5db 0% 25%, #fff 0% 50%) 50% / 8px 8px; }
.color-sample-swatch i { display: block; width: 100%; height: 100%; background: var(--sample-color, transparent); }
.color-sample-hint { color: var(--ink-soft); font-size: 10px; }
.color-palette .color-sample-controls { margin-top: 8px; }
.color-palette .color-sample-result { display: flex; margin-top: 5px; }
.color-palette .color-sample-hint { display: block; margin-top: 3px; }