/* Image color palette extractor (#127) */
.container--icpe { max-width: 1180px; }
.icpe-drop-zone { transition: border-color .2s ease, background .2s ease; }
.icpe-drop-zone.is-dragover { border-color: var(--color-primary); background: #eaf7f4; }
.icpe-file-label { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; cursor: pointer; font-weight: 750; }
.icpe-workspace { display: grid; min-width: 0; gap: 1.25rem; margin: 1.25rem 0; }
.icpe-workspace[hidden] { display: none; }
.icpe-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.icpe-heading h2, .icpe-heading p { margin-top: 0; }
.icpe-heading label { display: grid; flex: 0 0 8.5rem; gap: .35rem; font-weight: 800; }
.icpe-heading select { width: 100%; min-width: 0; }
.icpe-file-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0 0; }
.icpe-file-info div { min-width: 0; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #f8fbfa; }
.icpe-file-info dt { color: var(--color-muted); font-size: .72rem; font-weight: 800; }
.icpe-file-info dd { min-width: 0; margin: .2rem 0 0; overflow-wrap: anywhere; font-weight: 800; }
.icpe-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .95fr); align-items: start; gap: 1.25rem; }
.icpe-main-grid > *, .icpe-preview-panel, .icpe-palette-panel { min-width: 0; }
.icpe-canvas-wrap { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 220px; overflow: auto; padding: .65rem; border-radius: 12px; background: repeating-conic-gradient(#dfe7e5 0 25%, #fff 0 50%) 50% / 20px 20px; }
.icpe-canvas-wrap canvas { display: block; width: auto; max-width: 100%; height: auto; margin: auto; }
.icpe-palette-list { display: grid; gap: .65rem; margin: 1rem 0; padding: 0; list-style: none; }
.icpe-palette-card { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-width: 0; padding: .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.icpe-swatch { display: block; width: 3.4rem; height: 3.4rem; border: 1px solid rgba(0,0,0,.18); border-radius: .65rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.icpe-color-details { display: grid; min-width: 0; gap: .16rem; }
.icpe-color-details strong, .icpe-color-details span { min-width: 0; overflow-wrap: anywhere; }
.icpe-color-details span { color: var(--color-muted); font-size: .76rem; }
.icpe-palette-card .button { min-width: 0; white-space: nowrap; }
.icpe-palette-note { padding: .7rem .8rem; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary-dark); font-weight: 750; }
.icpe-copy-all { width: 100%; }
.icpe-long-message { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.icpe-file-label:focus-within, .icpe-heading select:focus-visible, .icpe-palette-card button:focus-visible, .icpe-copy-all:focus-visible { outline: 3px solid rgba(20,107,99,.34); outline-offset: 3px; }

@media (max-width: 900px) {
  .icpe-main-grid { grid-template-columns: minmax(0, 1fr); }
  .icpe-file-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .icpe-heading { display: grid; }
  .icpe-heading label { width: 100%; }
  .icpe-file-info { grid-template-columns: minmax(0, 1fr); }
  .icpe-palette-card { grid-template-columns: 3rem minmax(0, 1fr); }
  .icpe-swatch { width: 3rem; height: 3rem; }
  .icpe-palette-card .button { grid-column: 1 / -1; width: 100%; white-space: normal; }
}