.cpal-wrap{display:flex;flex-direction:column;gap:1rem}.cpal-control-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,34%);gap:1rem;align-items:stretch;padding:1rem;border-radius:8px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card)}.cpal-input-row{display:flex;flex-direction:column;justify-content:center;gap:.65rem;min-width:0}.cpal-label{font-size:.78rem;font-weight:800;line-height:1.2;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:0}.cpal-color-input-wrap{display:flex;align-items:flex-start;gap:.75rem;min-width:0}.cpal-picker{width:58px;height:58px;flex:0 0 58px;padding:3px;border:0;border-radius:8px;cursor:pointer;background:var(--color-bg-secondary);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.cpal-picker::-webkit-color-swatch-wrapper{padding:0}.cpal-picker::-webkit-color-swatch{border:0;border-radius:6px}.cpal-picker::-moz-color-swatch{border:0;border-radius:6px}.cpal-hex-input-wrap{display:flex;flex-direction:column;gap:.35rem;min-width:0}.cpal-hex-input{width:min(100%,12ch);min-height:46px;padding:.72rem .82rem;border:0;border-radius:8px;background:var(--color-bg-secondary);color:var(--color-text);font-family:var(--font-mono);font-size:.98rem;font-weight:700;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),box-shadow var(--transition-fast)}.cpal-hex-input:focus{outline:none;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 4px var(--color-primary-light)}.cpal-hex-input.cpal-error{box-shadow:inset 0 0 0 1px var(--color-danger),0 0 0 4px color-mix(in oklch,var(--color-danger) 14%,transparent)}.cpal-hex-error{min-height:1.1em;color:var(--color-danger);font-size:.78rem;line-height:1.25}.cpal-base-preview{display:flex;align-items:flex-end;justify-content:flex-end;min-height:108px;padding:.9rem;border-radius:8px;font-family:var(--font-mono);font-size:.88rem;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1px #ffffff40,inset 0 -42px 68px #0000001f}.cpal-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.cpal-card{overflow:hidden;border-radius:8px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card)}.cpal-card-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:start;padding:.92rem 1rem;background:var(--color-surface-muted);box-shadow:inset 0 -1px 0 var(--color-border-soft)}.cpal-card-title-wrap{display:flex;flex-direction:column;gap:.22rem;min-width:0}.cpal-card-title{color:var(--color-text);font-size:.94rem;font-weight:820;line-height:1.2}.cpal-card-desc{color:var(--color-text-secondary);font-size:.78rem;line-height:1.35}.cpal-copy-all-btn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:.34rem .74rem;border:0;border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font:inherit;font-size:.76rem;font-weight:780;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}@media(hover:hover){.cpal-copy-all-btn:hover{background:var(--color-primary-light);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 38%,transparent)}}.cpal-copy-all-btn:active{transform:scale(.96)}.cpal-swatch-row{display:flex;min-height:154px;background:var(--color-bg-secondary)}.cpal-color-swatch{position:relative;display:flex;flex:1 1 0;align-items:flex-end;justify-content:center;min-width:0;padding:.72rem .42rem;border:0;cursor:pointer;font:inherit;transition:filter var(--transition-fast),transform var(--transition-fast)}@media(hover:hover){.cpal-color-swatch:hover{filter:saturate(1.12) brightness(1.03)}}.cpal-color-swatch:focus-visible{z-index:1;outline:2px solid var(--color-primary);outline-offset:-3px}.cpal-color-swatch:active{transform:scale(.985)}.cpal-swatch-hex{max-width:100%;padding:.34rem .44rem;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.68rem;font-weight:800;line-height:1;text-align:center;word-break:break-word;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff29,0 8px 18px #0000001a}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .cpal-base-preview{box-shadow:inset 0 0 0 1px #ffffff29,inset 0 -42px 68px #0000003d}}[data-theme=dark] .cpal-base-preview{box-shadow:inset 0 0 0 1px #ffffff29,inset 0 -42px 68px #0000003d}@media(max-width:760px){.cpal-control-panel{grid-template-columns:1fr}.cpal-base-preview{min-height:84px}.cpal-palettes{grid-template-columns:1fr}}@media(max-width:460px){.cpal-control-panel,.cpal-card-header{padding:.82rem}.cpal-card-header{grid-template-columns:1fr}.cpal-copy-all-btn{justify-self:start}.cpal-swatch-row{min-height:128px}.cpal-color-swatch{padding:.58rem .28rem}.cpal-swatch-hex{padding:.3rem .34rem;font-size:.62rem}}