.toolhub-color .toolhub-fieldset { margin: 1rem 0; }
.toolhub-color .toolhub-color__channels { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.toolhub-color .toolhub-color__channels label { display: grid; gap: .3rem; }
.toolhub-color .toolhub-color__picker { border: 1px solid var(--thub-border); border-radius: .45rem; cursor: pointer; height: 3rem; padding: .2rem; width: 100%; }
.toolhub-color .toolhub-color__code, .toolhub-color [data-output] { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; word-break: break-all; }
.toolhub-color .toolhub-color__swatches { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; }
.toolhub-color .toolhub-color__swatches > div { display: grid; gap: .35rem; }
.toolhub-color .toolhub-color__swatch { background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; border: 1px solid var(--thub-border); border-radius: .6rem; min-height: 5rem; }
.toolhub-color .toolhub-color__swatch--white { background-color: #fff; background-image: none; }
.toolhub-color .toolhub-color__swatch--black { background-color: #000; background-image: none; }
@media (max-width: 520px) { .toolhub-color .toolhub-color__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolhub-color .toolhub-color__swatches { grid-template-columns: 1fr; } }