/* Color Converter — swatch on a checkerboard so alpha is visible; per-row copy buttons. */
.cc-swatch { min-height: 120px; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; position: relative; overflow: hidden; }
.cc-swatch::after { content: ""; position: absolute; inset: 0; background: var(--cc-color, transparent); }
.cc-row-copy { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; }
.cc-row-copy:hover { color: var(--text-primary); border-color: var(--text-muted); }
.cc-val { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.cc-val span { overflow-wrap: anywhere; }