.color-palette { margin: 1rem 0 2rem; }
.color-palette .cp-add input { margin-bottom: .4rem; }
.color-palette input[type="color"] { width: 100%; height: 2.45rem; padding: .15rem; cursor: pointer; }
.color-palette .cp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.color-palette .cp-toolbar h3 { margin: 0 0 1rem; }
.color-palette .cp-preview { display: flex; overflow-x: auto; border-radius: .5rem; margin: 1rem 0; box-shadow: 0 2px 12px #00000014; }
.color-palette .cp-preview:empty { display: none; }
.color-palette .cp-swatch { flex: 1 0 8rem; min-height: 14rem; display: flex; align-items: flex-end; justify-content: center; padding: 1rem .5rem; font: 600 1rem monospace; }
.color-palette .cp-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.color-palette .cp-color { border: 1px solid #d5dce4; border-radius: .5rem; padding: 1rem; background: #fff; color: #172033; }
.color-palette .cp-color legend { width: auto; padding: 0 .3rem; font-weight: 600; font-size: 1rem; }
.color-palette .cp-edit { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: .7rem; }
.color-palette .cp-edit input { min-width: 0; }
.color-palette .cp-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.color-palette .cp-actions .button { margin: 0; }
.color-palette .cp-status { min-height: 1.5rem; }
.color-palette [hidden] { display: none !important; }
@media (max-width: 639px) { .color-palette .cp-toolbar > button { width: 100%; } .color-palette .cp-swatch { min-height: 11rem; } }
.color-palette .cp-files { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.color-palette .cp-files h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
.color-palette .cp-files p { margin: 0; }
.color-palette .cp-file-actions, .color-palette .cp-image-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.color-palette .cp-file-actions .button, .color-palette .cp-image-actions .button { margin: 0; }
.color-palette .cp-file-label { position: relative; overflow: hidden; }
.color-palette .cp-file-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.color-palette .cp-file-label:focus-within { outline: 3px solid #1779ba; outline-offset: 3px; }
.color-palette .cp-drag { cursor: grab; touch-action: none; }
.color-palette .cp-drag:active { cursor: grabbing; }
.color-palette .cp-drop-target { outline: 3px dashed #1779ba; outline-offset: 3px; }
.color-palette .cp-drag-source { opacity: .45; }
.color-palette .cp-theme { margin-top: 1.5rem; }
.color-palette .cp-theme-scroll { margin: 0; overflow-x: auto; }
.color-palette .cp-theme canvas { display: block; width: 100%; min-width: 760px; height: auto; border-radius: .5rem; }
.color-palette .cp-theme figcaption { padding-top: .65rem; font-size: .85rem; color: #526171; }
@media (max-width: 639px) { .color-palette .cp-file-actions, .color-palette .cp-image-actions { width: 100%; } .color-palette .cp-file-actions > *, .color-palette .cp-image-actions > * { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .color-palette * { scroll-behavior: auto; } }
.color-palette .cp-bulk textarea { min-height: 8rem; resize: vertical; font-family: monospace; }
.color-palette .cp-bulk .button { margin-bottom: 0; }
.color-palette .cp-error { color: #b12121; font-weight: 600; }
.color-palette .cp-role { min-width: 0; margin-bottom: 1rem; padding: .75rem; border: 1px solid #d5dce4; border-radius: .4rem; }
.color-palette .cp-role legend { width: auto; padding: 0 .3rem; font-weight: 600; font-size: 1rem; }
.color-palette .cp-role-edit { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .5rem; }
.color-palette .cp-role-edit select { font-family: monospace; padding-right: 1.3rem; }
.color-palette .cp-role-edit input, .color-palette .cp-role-edit select { margin-bottom: 0; }
.color-palette .cp-completion h4 { font-size: 1.2rem; }
.color-palette .cp-suggestions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #bdbdbd; }
.color-palette .cp-suggestion-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .5rem; margin-bottom: 1rem; }
.color-palette .cp-suggestion { border: 1px solid #bdbdbd; border-radius: .3rem; padding: .75rem; display: flex; align-items: center; gap: .75rem; }
.color-palette .cp-suggestion-chip { flex: 0 0 2.5rem; height: 2.5rem; border: 1px solid #888; border-radius: .25rem; }
.color-palette .cp-suggestion p { font-size: .85rem; margin: 0; }
.color-palette .cp-readiness { margin-bottom: 1rem; }
.color-palette .cp-readiness p { margin-bottom: .4rem; }