/* RECATOOLS — Colour Palette Extractor */
.cpe-wrap { padding: 1.25rem; }
.cpe-drop { border: 2px dashed #f0abfc; border-radius: 14px; padding: 2rem 1rem; text-align: center; background: #fdf4ff; transition: background .15s, border-color .15s; }
.cpe-drop.cpe-drag { background: #fae8ff; border-color: #ec4899; }
.cpe-drop-icon { font-size: 2rem; }
.cpe-file-label { display: inline-block; margin-top: .6rem; padding: .6rem 1.3rem; font-size: .9rem; font-weight: 700; color: #fff; background: #ec4899; border-radius: 999px; cursor: pointer; }
.cpe-file-label input { display: none; }
.cpe-drop-hint { font-size: .78rem; color: #a855a0; margin: .6rem 0 0; }
.cpe-options { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1rem 0; font-size: .85rem; }
.cpe-options label { display: inline-flex; align-items: center; gap: .4rem; }
.cpe-options input[type="number"] { width: 60px; padding: .35rem .5rem; border: 1px solid #ebebeb; border-radius: 8px; }
.cpe-preview { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin: 1rem auto; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.cpe-status { font-size: .8rem; color: #6b6760; margin: .5rem 0; min-height: 1.1em; text-align: center; }
.cpe-fmt-toggle { display: flex; gap: .4rem; justify-content: center; margin: .75rem 0; }
.cpe-fmt-btn { padding: .35rem .85rem; font-size: .78rem; font-weight: 600; border: 1px solid #ebebeb; background: #fff; border-radius: 999px; cursor: pointer; color: #6b6760; }
.cpe-fmt-btn[aria-pressed="true"] { background: #ec4899; color: #fff; border-color: #ec4899; }
.cpe-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin: 1rem 0; }
.cpe-swatch { position: relative; border: none; border-radius: 12px; min-height: 96px; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: .6rem .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: transform .1s; }
.cpe-swatch:hover { transform: translateY(-2px); }
.cpe-swatch.cpe-copied::after { content: 'Copied ✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: 12px; font-family: inherit; font-size: .8rem; }
.cpe-val { font-size: .8rem; font-weight: 700; }
.cpe-pct { font-size: .68rem; opacity: .85; }
.cpe-export-wrap { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #ebebeb; }
.cpe-export-head { font-size: .8rem; font-weight: 700; color: #1a1814; margin-bottom: .5rem; }
.cpe-export-fmts { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .82rem; margin-bottom: .6rem; }
.cpe-export-fmts label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.cpe-export { padding: .9rem 1rem; background: #1a1814; color: #f3f4f6; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.5; white-space: pre; overflow-x: auto; max-height: 280px; overflow-y: auto; }
.cpe-copy-export { margin-top: .6rem; padding: .5rem 1.1rem; font-size: .82rem; font-weight: 700; color: #be185d; background: #fff; border: 1px solid #ec4899; border-radius: 999px; cursor: pointer; }