.cp-spectrum-picker{display:flex;flex-direction:column;gap:var(--space-3)}.cp-spectrum-box{position:relative;width:100%;aspect-ratio:1;cursor:crosshair;overflow:hidden;touch-action:none}.cp-spectrum-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}.cp-spectrum-black{position:absolute;inset:0;background:linear-gradient(to top,#000,transparent)}.cp-spectrum-pointer{position:absolute;width:1rem;height:1rem;transform:translate(-50%,-50%);pointer-events:none}.cp-spectrum-pointer-inner{width:100%;height:100%;border-radius:var(--radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d,inset 0 0 0 1px #0000004d,0 2px 4px #0000004d}.cp-slider-wrapper{display:flex;align-items:center;gap:var(--space-3)}.cp-slider-label{min-width:var(--space-10);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-muted);text-transform:uppercase}.cp-slider-value{min-width:var(--space-10);text-align:end;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-primary);font-variant-numeric:tabular-nums}.cp-hue-slider{flex:1;position:relative;height:var(--space-3);border-radius:var(--radius-md);background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer;touch-action:none}.cp-alpha-slider{flex:1;position:relative;height:var(--space-3);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;touch-action:none;overflow:visible}.cp-alpha-checkerboard{position:absolute;inset:0;background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;opacity:.3}.cp-alpha-gradient{position:absolute;inset:0}.cp-slider-pointer{position:absolute;top:50%;width:1rem;height:1rem;transform:translate(-50%,-50%);background:#fff;border:2px solid #fff;border-radius:var(--radius-full);box-shadow:0 0 0 1px #0003,0 2px 4px #0003;pointer-events:none}[data-theme=light] .cp-slider-label{color:#64748b}[data-theme=light] .cp-slider-value{color:#1e293b}[dir=rtl] .cp-slider-value{text-align:start}@media(max-width:37.5rem){.cp-spectrum-box{aspect-ratio:4/3}}.cp-color-inputs{display:flex;flex-direction:column;gap:var(--space-3)}.cp-color-preview-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-color-preview-swatch{width:3rem;height:3rem;border-radius:var(--radius-md);border:1px solid var(--pixel-border);flex-shrink:0}.cp-color-preview-info{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.cp-color-preview-hex{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--pixel-text-primary);font-family:monospace;text-transform:uppercase}.cp-color-preview-name{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-input-group{display:flex;flex-direction:column;gap:var(--space-2)}.cp-input-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wider)}.cp-input-row{display:flex;gap:var(--space-2);align-items:center}.cp-input-triple{gap:var(--space-4);align-items:flex-start}.cp-input{flex:1;max-height:auto;padding:var(--space-1) var(--space-3);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-primary);font-size:var(--text-sm);font-family:monospace;transition:border-color .2s ease}.cp-input:focus{outline:none;border-color:var(--brand-color)}.cp-input-hex{text-transform:uppercase}.cp-input-channel{flex:1;display:flex;flex-direction:column;gap:var(--space-1);align-items:center}.cp-input-channel .cp-input{width:100%;text-align:center;padding:var(--space-1) var(--space-1)}.cp-channel-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-muted);text-transform:uppercase}.cp-input[type=number]::-webkit-inner-spin-button,.cp-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cp-input[type=number]{appearance:textfield;-moz-appearance:textfield}.cp-copy-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.25rem;padding:var(--space-2) var(--space-3);flex-shrink:0;background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-expand-formats{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2);background:transparent;border:1px dashed var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-muted);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-expand-formats:hover{background:var(--pixel-bg-primary);color:var(--pixel-text-secondary);border-color:var(--pixel-text-muted)}.cp-expand-formats i{font-size:var(--text-xs)}.cp-extended-formats{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-format-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0}.cp-format-label{min-width:3.5rem;font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase}.cp-format-value{flex:1;font-size:var(--text-xs);font-family:monospace;color:var(--pixel-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-format-item .cp-copy-btn{width:1.5rem;height:1.5rem;font-size:var(--text-xs)}[data-theme=light] .cp-color-preview-row,[data-theme=light] .cp-extended-formats{background:#f8fafc}[data-theme=light] .cp-color-preview-hex{color:#1e293b}[data-theme=light] .cp-input{background:#fff;border-color:#0000001f;color:#1e293b}[data-theme=light] .cp-copy-btn{background:#e2e8f0;border-color:#00000014;color:#475569}[data-theme=light] .cp-copy-btn:hover{background:#cbd5e1;color:#1e293b}[data-theme=light] .cp-expand-formats{border-color:#0000001f;color:#64748b}[data-theme=light] .cp-expand-formats:hover{background:#f1f5f9;color:#475569}[data-theme=light] .cp-format-value{color:#475569}@media(max-width:37.5rem){.cp-input-triple{flex-wrap:wrap}.cp-input-channel{flex:1 1 calc(33.333% - .5rem)}.cp-input-triple .cp-copy-btn{flex:0 0 100%;width:100%;margin-top:var(--space-1)}}.cp-palette-strip{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background:var(--pixel-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--pixel-border)}.cp-palette-header{display:flex;justify-content:space-between;align-items:center}.cp-palette-title{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-primary)}.cp-palette-count{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-palette-main-row{display:flex;align-items:center;gap:var(--space-3);justify-content:space-between}.cp-palette-swatches{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:1}.cp-palette-swatch{position:relative;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.cp-palette-swatch:hover{transform:scale(1.08);z-index:1}.cp-palette-swatch.selected{border-color:var(--pixel-text-primary);box-shadow:0 0 0 2px var(--pixel-bg-secondary),0 0 0 4px var(--brand-color)}.cp-palette-swatch.locked{border-color:var(--brand-color)}.cp-swatch-lock-badge{position:absolute;top:-.375rem;inset-inline-end:-.375rem;width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;background:var(--brand-color);border-radius:var(--radius-full);color:#fff;font-size:.5rem}.cp-palette-add{display:flex;align-items:center;justify-content:center;width:var(--space-10);height:var(--space-10);background:var(--pixel-bg-primary);border:2px dashed var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-muted);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base)}.cp-palette-add:hover{border-color:var(--brand-color);color:var(--brand-color);background:rgba(var(--brand-color-rgb),.1)}.cp-palette-action-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md);border:1px solid var(--pixel-border)}.cp-action-bar-preview{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp-action-bar-preview span{font-size:.5rem;font-family:monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);text-transform:uppercase}.cp-action-bar-buttons{display:flex;gap:var(--space-2);flex:1}.cp-action-bar-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2);background:var(--pixel-bg-tertiary);border:none;border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}.cp-action-bar-btn i{font-size:var(--text-xs)}.cp-action-bar-btn:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-action-bar-remove:hover{background:#ef444426;border-color:var(--color-error);color:var(--color-error)}.cp-action-bar-close{padding:var(--space-2);background:transparent;border:none;color:var(--pixel-text-muted);font-size:var(--text-base);cursor:pointer;transition:color var(--transition-fast);margin-left:auto}.cp-action-bar-close:hover{color:var(--pixel-text-primary)}.cp-palette-global-actions{display:flex;gap:var(--space-2);flex-shrink:0}.cp-palette-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);min-width:var(--space-10)}.cp-palette-btn i{font-size:var(--text-sm)}.cp-palette-btn:hover:not(:disabled){background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-palette-btn:disabled{opacity:.4;cursor:not-allowed}.cp-palette-btn-danger:hover:not(:disabled){background:#ef444426;border-color:var(--color-error);color:var(--color-error)}[data-theme=light] .cp-palette-strip{background:#f8fafc;border-color:#0000001f}[data-theme=light] .cp-palette-add{background:#fff;border-color:#0000001f;color:#64748b}[data-theme=light] .cp-palette-btn{background:#e2e8f0;border-color:#00000014;color:#475569}[data-theme=light] .cp-palette-btn:hover:not(:disabled){background:#cbd5e1;color:#1e293b}@media(max-width:37.5rem){.cp-palette-main-row{flex-direction:column;align-items:stretch}.cp-palette-swatches{justify-content:center}.cp-palette-global-actions{width:100%}.cp-palette-btn{flex:1}}.cp-share-modal-backdrop{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.cp-share-modal{background:var(--pixel-bg-secondary);border:1px solid var(--pixel-border);border-radius:var(--radius-xl);width:90%;max-width:32rem;box-shadow:0 20px 25px -5px #0000004d,0 10px 10px -5px #0003;animation:slideUp .2s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}.cp-share-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);border-bottom:1px solid var(--pixel-border)}.cp-share-modal-header h3{margin:0;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--pixel-text-primary)}.cp-share-modal-close{padding:var(--space-2);background:transparent;border:none;color:var(--pixel-text-secondary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-base)}.cp-share-modal-close:hover{background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}.cp-share-modal-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}.cp-share-modal-description{margin:0;font-size:var(--text-sm);color:var(--pixel-text-muted)}.cp-share-url-box{display:flex;gap:var(--space-2)}.cp-share-url-input{flex:1;padding:var(--space-3);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-lg);color:var(--pixel-text-primary);font-size:var(--text-sm);font-family:var(--font-mono);min-width:0}.cp-share-url-input:focus{outline:none;border-color:var(--brand-color)}.cp-share-copy-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--pixel-bg-tertiary);border:none;border-radius:var(--radius-lg);color:var(--pixel-text-primary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.cp-share-copy-btn:hover{background:var(--pixel-bg-hover)}.cp-share-copy-btn.copied{background:var(--color-success);color:#fff}.cp-share-native-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);background:var(--brand-color);border:none;border-radius:var(--radius-lg);color:#fff;font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base)}.cp-share-native-btn:hover{opacity:.9;transform:translateY(-1px)}.cp-share-native-btn:active{transform:translateY(0)}[data-theme=light] .cp-share-modal{background:#fff;border-color:#0000001f}[data-theme=light] .cp-share-modal-header{border-color:#00000014}[data-theme=light] .cp-share-modal-header h3{color:#1e293b}[data-theme=light] .cp-share-modal-close{color:#64748b}[data-theme=light] .cp-share-modal-close:hover{background:#f1f5f9;color:#1e293b}[data-theme=light] .cp-share-modal-description{color:#64748b}[data-theme=light] .cp-share-url-input{background:#f8fafc;border-color:#0000001f;color:#1e293b}[data-theme=light] .cp-share-copy-btn{background:#e2e8f0;color:#1e293b}[data-theme=light] .cp-share-copy-btn:hover{background:#cbd5e1}.cp-sl-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:15rem;overflow-y:auto}.cp-sl-item-preview{width:3rem;height:2rem;border-radius:var(--radius-sm);border:1px solid var(--pixel-border);flex-shrink:0}.cp-gradient-editor{display:flex;flex-direction:column;gap:var(--space-3)}.cp-ge-types{display:flex;gap:var(--space-2)}.cp-ge-type{flex:1;min-width:0;padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base);text-transform:capitalize}.cp-ge-type:hover:not(.active){background:var(--pixel-bg-tertiary)}.cp-ge-type.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}@media(max-width:20rem){.cp-ge-types{display:grid;grid-template-columns:repeat(2,1fr)}.cp-ge-type{width:100%}}.cp-ge-save-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.cp-ge-save-btn i{font-size:var(--text-sm)}.cp-ge-save-section{display:flex;flex-direction:column;gap:var(--space-3);overflow:visible}.cp-ge-angle{display:flex;flex-direction:column;gap:var(--space-2)}.cp-ge-angle label{font-size:var(--text-xs);color:var(--pixel-text-muted);text-transform:uppercase}.cp-ge-angle-control{display:flex;align-items:center;gap:var(--space-2)}.cp-ge-angle-control .cp-slider{flex:1}.cp-ge-angle-input{width:3.5rem;padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-primary);font-size:var(--text-xs);text-align:center}.cp-ge-angle-control span{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-ge-repeating{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--pixel-text-secondary);cursor:pointer}.cp-ge-repeating input{accent-color:var(--brand-color)}.cp-ge-preview{height:5rem;border-radius:var(--radius-lg);border:1px solid var(--pixel-border)}.cp-ge-track-container{padding:.5rem var(--space-2)}.cp-ge-track{position:relative;height:1rem;border-radius:var(--radius-lg);cursor:pointer}.cp-ge-stop{position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem;height:1.25rem;border:2px solid white;border-radius:var(--radius-full);cursor:grab;box-shadow:0 2px 4px #0000004d;transition:transform .1s ease}.cp-ge-stop:hover{transform:translate(-50%,-50%) scale(1.1)}.cp-ge-stop.selected{transform:translate(-50%,-50%) scale(1.15);border-width:3px;box-shadow:0 0 0 2px var(--brand-color),0 2px 8px #0006}.cp-ge-stop:active{cursor:grabbing}.cp-ge-stop-editor{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-ge-stop-color{display:flex;align-items:center;gap:var(--space-2)}.cp-ge-color-input{width:var(--space-10);height:var(--space-10);padding:var(--space-1);border:1px solid var(--pixel-border);border-radius:var(--radius-md);cursor:pointer}.cp-ge-hex-input{flex:1;padding:var(--space-2);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-primary);font-size:var(--text-sm);font-family:monospace;text-transform:uppercase}.cp-ge-stop-position{display:flex;align-items:center;gap:var(--space-2)}.cp-ge-stop-position label{font-size:var(--text-xs);color:var(--pixel-text-muted);white-space:nowrap}.cp-ge-stop-position .cp-slider{flex:1}.cp-ge-pos-input{width:3rem;padding:var(--space-2);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-primary);font-size:var(--text-xs);text-align:center}.cp-ge-stop-position span{font-size:var(--text-xs);color:var(--pixel-text-muted)}@media(max-width:38.5rem){.cp-ge-angle-control{flex-wrap:wrap}.cp-ge-angle-input{width:100%}.cp-ge-stop-color,.cp-ge-stop-position{flex-wrap:wrap}.cp-ge-pos-input{width:100%}.cp-ge-code{flex-wrap:wrap}.cp-ge-copy{width:100%}}.cp-ge-output{display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-ge-output code{flex:1;font-size:var(--text-xs);color:var(--pixel-text-secondary);word-break:break-all;line-height:var(--leading-snug)}.cp-ge-export{display:flex;flex-direction:column;gap:var(--space-2)}.cp-ge-export label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-secondary)}.cp-ge-code{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-lg);transition:border-color .2s ease}.cp-ge-code:hover{border-color:var(--pixel-text-muted)}.cp-ge-code code{flex:1;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--pixel-text-secondary);word-break:break-all;line-height:var(--leading-relaxed);min-width:0}.cp-ge-copy{padding:var(--space-2);background:var(--pixel-bg-tertiary);border:none;border-radius:var(--radius-md);color:var(--pixel-text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.cp-ge-copy:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-ge-copy.copied{background:var(--color-success);color:#fff}.cp-ge-copy i{font-size:var(--text-sm)}.cp-ge-palette{margin-top:var(--space-3);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-ge-palette-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.cp-ge-palette-header span{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-secondary)}.cp-ge-palette-colors{display:flex;flex-wrap:wrap;gap:var(--space-2)}.cp-ge-palette-color{width:1.5rem;height:1.5rem;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.cp-ge-palette-color:hover{transform:scale(1.15);border-color:var(--pixel-text-primary)}[data-theme=light] .cp-ge-type{background:#fff;border-color:#0000001f;color:#475569}[data-theme=light] .cp-ge-type:hover:not(.active){background:#f1f5f9}[data-theme=light] .cp-ge-angle-input,[data-theme=light] .cp-ge-stop-editor,[data-theme=light] .cp-ge-output{background:#f8fafc}[data-theme=light] .cp-ge-hex-input,[data-theme=light] .cp-ge-pos-input{background:#fff;border-color:#0000001f;color:#1e293b}[data-theme=light] .cp-ge-code{background:#fff;border-color:#0000001f}[data-theme=light] .cp-ge-code code{color:#475569}[data-theme=light] .cp-ge-copy{background:#e2e8f0;color:#475569}[data-theme=light] .cp-ge-copy:hover{background:#cbd5e1;color:#1e293b}.cp-image-tab{display:flex;flex-direction:column;gap:var(--space-3)}.cp-image-instructions{position:relative;padding:var(--space-3) var(--space-2);background:rgba(var(--pixel-text-primary));border:1px solid rgba(var(--pixel-text-primary),.1);border-radius:var(--radius-md);color:var(--color-warning);font-size:var(--text-sm);line-height:1.5}.cp-image-instructions p{margin:0;padding-right:var(--space-8)}.cp-instructions-close{position:absolute;top:50%;right:var(--space-3);transform:translateY(-50%);background:none;border:none;color:var(--pixel-text-secondary);cursor:pointer;padding:var(--space-2);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease;opacity:.6}.cp-instructions-close:hover{opacity:1;background:rgba(var(--pixel-text-primary),.05);color:var(--pixel-text-primary)}.cp-instructions-close i{font-size:var(--text-sm)}.cp-image-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-8);background:var(--pixel-bg-primary);border:2px dashed var(--pixel-border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base)}.cp-image-dropzone:hover{border-color:var(--brand-color);background:rgba(var(--brand-color-rgb),.05)}.cp-image-dropzone i{font-size:var(--text-4xl);color:var(--pixel-text-muted)}.cp-image-dropzone:hover i{color:var(--brand-color)}.cp-dropzone-text{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--pixel-text-secondary)}.cp-dropzone-hint{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-image-preview-container{display:flex;flex-direction:column;gap:var(--space-3)}.cp-image-toolbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-image-tool{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-fast)}.cp-image-tool i{font-size:var(--text-xs)}.cp-image-tool:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-image-tool.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-image-hover-preview{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}.cp-hover-swatch{width:2rem;height:2rem;border-radius:var(--radius-md);border:1px solid var(--pixel-border)}.cp-image-hover-preview span{font-size:var(--text-sm);font-family:monospace;color:var(--pixel-text-secondary);text-transform:uppercase}.cp-toolbar-divider{width:1px;height:var(--space-6);background:var(--pixel-border);margin:0 var(--space-2)}.cp-sample-size-selector{display:flex;align-items:center;gap:var(--space-2)}.cp-sample-size-selector label{font-size:var(--text-xs);color:var(--pixel-text-muted);white-space:nowrap}.cp-sample-size-selector select{padding:var(--space-1) var(--space-2);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-sample-size-selector select:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-zoom-control{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}.cp-zoom-control label{display:flex;align-items:center;color:var(--pixel-text-muted);font-size:var(--text-sm)}.cp-zoom-control input[type=range]{width:6rem;height:var(--space-1);background:var(--pixel-bg-tertiary);border-radius:var(--radius-full);outline:none;cursor:pointer}.cp-zoom-control input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--space-4);height:var(--space-4);background:var(--brand-color);border-radius:var(--radius-full);cursor:pointer}.cp-zoom-control input[type=range]::-moz-range-thumb{width:var(--space-4);height:var(--space-4);background:var(--brand-color);border:none;border-radius:var(--radius-full);cursor:pointer}.cp-zoom-control span{font-size:var(--text-xs);color:var(--pixel-text-secondary);min-width:3rem;text-align:right}.cp-image-wrapper{position:relative;width:100%;max-height:32rem;overflow:auto;display:flex;align-items:flex-start;justify-content:center;background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-image-preview{display:block;max-width:100%;max-height:32rem;width:auto;height:auto;object-fit:contain;cursor:default;transition:transform .1s ease;transform-origin:top left}.cp-image-preview.eyedropper-active{cursor:crosshair}.cp-magnifier{position:fixed;width:120px;height:120px;border:3px solid white;border-radius:50%;box-shadow:0 4px 12px #00000080,inset 0 0 0 1px #0000004d;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);overflow:hidden;background:#000}.cp-magnifier-canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.cp-picked-history{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-history-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--pixel-text-muted);white-space:nowrap}.cp-history-label i{font-size:var(--text-xs)}.cp-history-strip{display:flex;gap:var(--space-1);flex-wrap:wrap;flex:1;overflow-x:auto;scrollbar-width:none}.cp-history-strip::-webkit-scrollbar{display:none}.cp-history-swatch{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-md);border:2px solid var(--pixel-border);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.cp-history-swatch:hover{transform:scale(1.15);border-color:var(--pixel-text-primary);z-index:1}.cp-history-clear{display:flex;align-items:center;justify-content:center;width:var(--space-8);height:var(--space-8);padding:var(--space-1);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.cp-history-clear:hover{background:var(--color-error);border-color:var(--color-error);color:#fff}.cp-history-clear i{font-size:var(--text-xs)}.cp-magnifier-color{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);padding:var(--space-1) var(--space-2);background:#000000e6;border:1px solid white;border-radius:var(--radius-md);color:#fff;font-size:var(--text-xs);font-family:var(--font-mono);font-weight:600;white-space:nowrap;text-transform:uppercase;box-shadow:0 2px 8px #00000080}.cp-color-count{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--pixel-bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--pixel-border);width:100%}.cp-color-count label{font-size:var(--text-xs);color:var(--pixel-text-muted);white-space:nowrap}.cp-color-count-buttons{display:grid;grid-template-columns:repeat(8,1fr);flex:1;gap:var(--space-2)}.cp-extracting-indicator{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--brand-color);margin-left:auto}.cp-extracting-indicator i{font-size:var(--text-base)}.cp-count-btn{flex:1;padding:var(--space-1);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-count-btn:hover:not(.active){background:var(--pixel-bg-hover)}.cp-count-btn.active{background:var(--brand-color);border-color:var(--brand-color);color:#fff}.cp-extracting{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);color:var(--pixel-text-muted);font-size:var(--text-sm)}.cp-extracted-colors{display:flex;flex-direction:column;gap:var(--space-2)}.cp-extracted-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.cp-extracted-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase}.cp-sort-buttons{display:flex;gap:var(--space-1)}.cp-sort-btn{display:flex;align-items:center;justify-content:center;width:var(--space-8);height:var(--space-8);padding:var(--space-1);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-sort-btn:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-sort-btn.active{background:var(--brand-color);border-color:var(--brand-color);color:#fff}.cp-sort-btn i{font-size:var(--text-xs)}.cp-extracted-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:var(--space-2)}.cp-extracted-swatch{position:relative;aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-base);overflow:hidden}.cp-extracted-swatch:hover{transform:scale(1.05);z-index:1}.cp-extracted-actions{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;opacity:0;transition:opacity .2s ease}.cp-extracted-swatch:hover .cp-extracted-actions{opacity:1}.cp-extracted-action{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background:#fff;border:none;border-radius:var(--radius-full);color:#1e293b;font-size:var(--text-xs);cursor:pointer;transition:transform var(--transition-base)}.cp-extracted-action:hover{transform:scale(1.1)}.cp-extracted-hex{position:absolute;bottom:var(--space-1);left:50%;transform:translate(-50%);font-size:var(--text-xs);font-family:var(--font-mono);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);opacity:0;transition:opacity .2s ease}.cp-extracted-swatch:hover .cp-extracted-hex{opacity:1}.cp-btn-small{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.cp-btn-full{width:100%}.cp-image-error{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--text-xs)}[data-theme=light] .cp-image-dropzone{background:#f8fafc;border-color:#0000001f}[data-theme=light] .cp-image-dropzone:hover{background:rgba(var(--brand-color-rgb),.05)}[data-theme=light] .cp-color-count{background:#f8fafc}[data-theme=light] .cp-count-btn{background:#e2e8f0;border-color:#00000014;color:#475569}[data-theme=light] .cp-count-btn:hover:not(.active){background:#cbd5e1}@media(max-width:38.5rem){.cp-image-toolbar{flex-wrap:wrap;justify-content:flex-start}.cp-sample-size-selector,.cp-zoom-control,.cp-image-hover-preview,.cp-toolbar-divider{display:none}.cp-color-count{flex-direction:column;align-items:stretch}.cp-color-count-buttons{grid-template-columns:repeat(4,1fr)}.cp-extracting-indicator{margin-left:0;justify-content:center}}.cp-tools-tab{display:flex;flex-direction:column;gap:var(--space-4)}.cp-tools-info-section{display:flex;flex-direction:column;gap:var(--space-3)}.cp-color-name{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-color-name .cp-info-value{font-size:var(--text-base);font-weight:var(--font-semibold)}.cp-tools-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.cp-info-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-info-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-muted);text-transform:uppercase}.cp-info-value{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--pixel-text-primary)}.cp-tools-section{display:flex;flex-direction:column;gap:var(--space-2)}.cp-tools-section-title{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase;margin:0}.cp-tools-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.cp-tool-action{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.cp-tool-action:hover{border-color:var(--brand-color);background:rgba(var(--brand-color-rgb),.05)}.cp-tool-preview{width:1.5rem;height:1.5rem;border-radius:var(--radius-md);border:1px solid var(--pixel-border)}.cp-tool-action span{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-secondary);text-transform:uppercase}.cp-color-mixer{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-mixer-colors{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.cp-mixer-color{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.cp-mixer-swatch{width:var(--space-10);height:var(--space-10);border-radius:var(--radius-md);border:1px solid var(--pixel-border)}.cp-mixer-input{width:var(--space-10);height:var(--space-10);padding:var(--space-1);border:1px solid var(--pixel-border);border-radius:var(--radius-md);cursor:pointer}.cp-mixer-color span{font-size:var(--text-xs);font-family:monospace;color:var(--pixel-text-muted);text-transform:uppercase}.cp-mixer-plus{color:var(--pixel-text-muted);font-size:var(--text-xs)}.cp-mixer-slider{display:flex;align-items:center;gap:var(--space-2)}.cp-mixer-slider span{font-size:var(--text-xs);color:var(--pixel-text-muted);min-width:var(--space-8);text-align:center}.cp-mixer-slider .cp-slider{flex:1}.cp-mixer-result{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-tertiary);border-radius:var(--radius-md)}.cp-mixer-result-swatch{width:var(--space-8);height:var(--space-8);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-base)}.cp-mixer-result-swatch:hover{transform:scale(1.1)}.cp-mixer-result-info{flex:1;display:flex;flex-direction:column}.cp-mixer-result-hex{font-size:var(--text-sm);font-family:monospace;font-weight:var(--font-semibold);color:var(--pixel-text-primary);text-transform:uppercase}.cp-mixer-result-label{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-analysis-grid{display:flex;flex-direction:column;gap:var(--space-2)}.cp-analysis-item{display:flex;flex-direction:column;gap:var(--space-1)}.cp-analysis-label{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-muted)}.cp-analysis-bar{height:var(--space-1);background:var(--pixel-bg-primary);border-radius:var(--radius-sm);overflow:hidden}.cp-analysis-fill{height:100%;border-radius:var(--radius-sm);transition:width .3s ease}.cp-analysis-fill.cp-temp-warm{background:linear-gradient(90deg,#fbbf24,#ef4444)}.cp-analysis-fill.cp-temp-cool{background:linear-gradient(90deg,#06b6d4,#3b82f6)}.cp-analysis-fill.cp-temp-neutral{background:linear-gradient(90deg,#6b7280,#9ca3af)}.cp-analysis-fill.cp-brightness{background:linear-gradient(90deg,#1e293b,#f1f5f9)}.cp-analysis-fill.cp-saturation{background:linear-gradient(90deg,#6b7280,var(--brand-color))}.cp-analysis-value{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-secondary);text-transform:capitalize}.cp-analysis-category{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-category-badge{display:flex;align-items:center;gap:var(--space-2);text-transform:capitalize}.cp-hue-range{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-tailwind-match{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-tailwind-swatch{width:var(--space-10);height:var(--space-10);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-base)}.cp-tailwind-swatch:hover{transform:scale(1.1)}.cp-tailwind-info{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.cp-tailwind-name{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--pixel-text-primary)}.cp-tailwind-hex{font-size:var(--text-xs);font-family:monospace;color:var(--pixel-text-muted);text-transform:uppercase}.cp-tailwind-exact{font-size:var(--text-xs);color:var(--color-success);font-weight:var(--font-medium)}.cp-tailwind-distance{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-tools-hint{font-size:var(--text-xs);color:var(--pixel-text-muted);margin:0}.cp-css-filter{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-filter-code{flex:1;font-size:var(--text-xs);font-family:monospace;color:var(--pixel-text-secondary);word-break:break-all;line-height:var(--leading-snug)}.cp-psychology{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-psychology-meaning{font-size:var(--text-xs);color:var(--pixel-text-secondary);margin:0;font-style:italic}.cp-psychology-tags{display:flex;flex-direction:column;gap:var(--space-2)}.cp-psychology-group{display:flex;flex-direction:column;gap:var(--space-1)}.cp-psychology-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase}.cp-tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}.cp-tag{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-sm);text-transform:capitalize}.cp-tag-mood{background:rgba(var(--brand-color-rgb),.15);color:var(--brand-color)}.cp-tag-industry{background:#10b98126;color:#10b981}.cp-tag-avoid{background:#ef444426;color:#ef4444}[data-theme=light] .cp-color-name,[data-theme=light] .cp-info-item,[data-theme=light] .cp-color-mixer,[data-theme=light] .cp-analysis-category,[data-theme=light] .cp-tailwind-match,[data-theme=light] .cp-css-filter,[data-theme=light] .cp-psychology{background:#f8fafc}[data-theme=light] .cp-analysis-bar{background:#e2e8f0}[data-theme=light] .cp-tool-action{background:#fff;border-color:#0000001f}[data-theme=light] .cp-tool-action:hover{background:rgba(var(--brand-color-rgb),.05)}[data-theme=light] .cp-info-value,[data-theme=light] .cp-mixer-result-hex{color:#1e293b}[data-theme=light] .cp-mixer-result{background:#e2e8f0}@media(max-width:25rem){.cp-tools-actions{grid-template-columns:repeat(2,1fr)}.cp-tools-info-grid{grid-template-columns:1fr}}.cp-color-wheel{position:relative;margin:0 auto}.cp-wheel-canvas{display:block;cursor:crosshair}.cp-wheel-indicator{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:var(--radius-full);transform:translate(-50%,-50%);box-shadow:0 2px 6px #0006,inset 0 0 2px #0003;pointer-events:none}.cp-wheel-sv-container{position:absolute;overflow:hidden}.cp-wheel-sv-canvas{display:block;width:100%;height:100%;cursor:crosshair;border-radius:0}.cp-wheel-sv-indicator{position:absolute;width:1rem;height:1rem;border:2px solid white;border-radius:var(--radius-full);transform:translate(-50%,-50%);box-shadow:0 2px 4px #0006;pointer-events:none}.cp-save-load{display:flex;flex-direction:column;gap:var(--space-3)}.cp-sl-actions{display:flex;gap:var(--space-2)}.cp-sl-actions .cp-btn{flex:1}.cp-sl-actions .cp-btn.copied{background:var(--color-success);border-color:var(--color-success)}.cp-btn-success{background:var(--color-success)!important;border-color:var(--color-success)!important;color:#fff!important}.cp-btn-success:hover{background:#059669!important;border-color:#059669!important}.cp-sl-save-form{display:flex;gap:var(--space-2)}.cp-sl-input{flex:1;padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-primary);font-size:var(--text-sm)}.cp-sl-input:focus{outline:none;border-color:var(--brand-color)}.cp-sl-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:15rem;overflow:visible}.cp-sl-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);color:var(--pixel-text-muted);font-size:var(--text-xs)}.cp-sl-empty i{font-size:var(--text-2xl);opacity:.5}.cp-sl-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-lg);transition:border-color .2s ease}.cp-sl-item:hover{border-color:var(--pixel-text-muted)}.cp-sl-item-preview{display:flex;align-items:center}.cp-sl-swatch{width:1.25rem;height:1.25rem;margin-inline-start:calc(var(--space-1) * -1.5);border-radius:var(--radius-sm);border:2px solid var(--pixel-bg-primary)}.cp-sl-swatch:first-child{margin-inline-start:0}.cp-sl-more{margin-inline-start:var(--space-1);font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-sl-item-info{flex:1;min-width:0;display:flex;flex-direction:column}.cp-sl-item-name{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-sl-item-date{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-sl-item-actions{display:flex;gap:var(--space-2)}.cp-sl-action{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-2);background:var(--pixel-bg-tertiary);border:none;border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-sl-action i{font-size:var(--text-xs)}.cp-sl-action span{font-weight:var(--font-medium)}.cp-sl-action:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-sl-delete:hover{background:#ef444426;color:var(--color-error)}.cp-sl-delete.confirm{background:var(--color-error);color:#fff}.cp-sl-url-display{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md)}.cp-sl-url-text{flex:1;font-size:var(--text-xs);color:var(--pixel-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);min-width:0;word-break:break-all}.cp-sl-url-copy{padding:var(--space-1) var(--space-2);background:var(--pixel-bg-tertiary);border:none;border-radius:var(--radius-sm);color:var(--pixel-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.cp-sl-url-copy:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-sl-url-copy i.fa-check{color:var(--color-success)}[data-theme=light] .cp-sl-input{background:#fff;border-color:#0000001f;color:#1e293b}[data-theme=light] .cp-sl-item{background:#fff;border-color:#0000001f}[data-theme=light] .cp-sl-item-name{color:#1e293b}[data-theme=light] .cp-sl-swatch{border-color:#fff}[data-theme=light] .cp-sl-action{background:#e2e8f0;color:#475569}[data-theme=light] .cp-sl-action:hover{background:#cbd5e1;color:#1e293b}[data-theme=light] .cp-sl-url-display{background:#fff;border-color:#0000001f}[data-theme=light] .cp-sl-url-text{color:#475569}[data-theme=light] .cp-sl-url-copy{background:#e2e8f0;color:#475569}[data-theme=light] .cp-sl-url-copy:hover{background:#cbd5e1;color:#1e293b}.cp-named-colors{display:flex;flex-direction:column;gap:var(--space-3)}.cp-nc-search{position:relative;display:flex;align-items:center}.cp-nc-search i{position:absolute;inset-inline-start:var(--space-3);color:var(--pixel-text-muted);font-size:var(--text-xs);pointer-events:none}.cp-nc-search-input{width:100%;padding:var(--space-2) var(--space-3);padding-inline-start:2rem;padding-inline-end:2rem;background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-primary);font-size:var(--text-sm)}.cp-nc-search-input:focus{outline:none;border-color:var(--brand-color)}.cp-nc-clear{position:absolute;inset-inline-end:.5rem;display:flex;align-items:center;justify-content:center;padding:var(--space-1);background:transparent;border:none;color:var(--pixel-text-muted);font-size:var(--text-xs);cursor:pointer;transition:color .15s ease}.cp-nc-clear:hover{color:var(--pixel-text-primary)}.cp-nc-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:var(--space-2)}.cp-nc-category{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-nc-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1rem;padding:0 var(--space-1);background:var(--pixel-bg-tertiary);border-radius:var(--radius-lg);font-size:var(--text-xs);font-weight:var(--font-semibold)}.cp-nc-category.active .cp-nc-count-badge{background:rgba(var(--brand-color-rgb),.3)}.cp-nc-category:hover:not(.active){background:var(--pixel-bg-tertiary)}.cp-nc-category.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-nc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:var(--space-2);max-height:auto;max-width:auto;padding:var(--space-1);scrollbar-width:thin;scrollbar-color:var(--pixel-border) transparent}.cp-nc-grid::-webkit-scrollbar{width:6px}.cp-nc-grid::-webkit-scrollbar-track{background:transparent}.cp-nc-grid::-webkit-scrollbar-thumb{background:var(--pixel-border);border-radius:var(--radius-sm)}.cp-nc-grid::-webkit-scrollbar-thumb:hover{background:var(--pixel-text-muted)}.cp-nc-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);color:var(--pixel-text-muted);font-size:var(--text-xs)}.cp-nc-empty i{font-size:var(--text-xl);opacity:.5}.cp-nc-color{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .25rem;border:none;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-base);min-height:3.5rem}.cp-nc-color:hover{transform:scale(1.05);z-index:1}.cp-nc-name{font-size:.5rem;font-weight:var(--font-medium);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);text-align:center;line-height:var(--leading-tight)}.cp-nc-hex{font-size:.5rem;font-family:monospace;color:#fffc;text-shadow:0 1px 2px rgba(0,0,0,.8);text-transform:uppercase}.cp-nc-name.dark-text,.cp-nc-hex.dark-text{color:#000c;text-shadow:none}.cp-nc-count{text-align:center;font-size:var(--text-xs);color:var(--pixel-text-muted)}[data-theme=light] .cp-nc-search-input{background:#fff;border-color:#0000001f;color:#1e293b}[data-theme=light] .cp-nc-clear{background:#e2e8f0;color:#475569}[data-theme=light] .cp-nc-category{background:#fff;border-color:#0000001f;color:#475569}[data-theme=light] .cp-nc-category:hover:not(.active){background:#f1f5f9}.cp-preset-palettes{display:flex;flex-direction:column;gap:var(--space-3)}.cp-preset-categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--space-2)}.cp-preset-category{display:flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);white-space:nowrap;cursor:pointer;transition:all var(--transition-base)}.cp-preset-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1rem;padding:0 var(--space-1);background:var(--pixel-bg-tertiary);border-radius:var(--radius-lg);font-size:var(--text-xs);font-weight:var(--font-semibold)}.cp-preset-category.active .cp-preset-count{background:rgba(var(--brand-color-rgb),.3)}.cp-preset-category:hover:not(.active){background:var(--pixel-bg-tertiary)}.cp-preset-category.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-preset-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:auto;overflow-y:auto}.cp-preset-item{background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s ease}.cp-preset-item:hover{border-color:var(--pixel-text-muted)}.cp-preset-item.expanded{border-color:var(--brand-color)}.cp-preset-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);cursor:pointer}.cp-preset-preview{display:flex;flex-shrink:0}.cp-preset-swatch-mini{width:1rem;height:1rem;margin-inline-start:var(--space-1);border-radius:var(--radius-sm);border:1px solid var(--pixel-bg-primary)}.cp-preset-swatch-mini:first-child{margin-inline-start:0}.cp-preset-name{flex:1;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-primary)}.cp-preset-header i{color:var(--pixel-text-muted);font-size:var(--text-xs);transition:transform var(--transition-base)}.cp-preset-expanded{padding:0 var(--space-2) var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}.cp-preset-colors{display:flex;flex-wrap:wrap;gap:var(--space-2)}.cp-preset-swatch{position:relative;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-base)}.cp-preset-swatch:hover{transform:scale(1.1);z-index:1}.cp-preset-hex{position:absolute;bottom:.125rem;left:50%;transform:translate(-50%);font-size:.4375rem;font-family:monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);opacity:0;transition:opacity .2s ease;text-transform:uppercase}.cp-preset-swatch:hover .cp-preset-hex{opacity:1}[data-theme=light] .cp-preset-category{background:#fff;border-color:#0000001f;color:#475569}[data-theme=light] .cp-preset-category:hover:not(.active){background:#f1f5f9}[data-theme=light] .cp-preset-item{background:#fff;border-color:#0000001f}[data-theme=light] .cp-preset-name{color:#1e293b}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:var(--space-1) var(--space-2);background:var(--bg-elevated);color:var(--text-primary);font-size:var(--text-xs);font-weight:var(--font-medium);white-space:nowrap;border-radius:var(--radius-sm);border:1px solid var(--border-default);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-fast),visibility var(--transition-fast);transition-delay:0s;z-index:var(--z-tooltip)}@media(hover:hover)and (pointer:fine){[data-tooltip]:hover:after{opacity:1;visibility:visible;transition-delay:.4s}}[data-tooltip-placement=bottom]:after{bottom:auto;top:calc(100% + 6px)}[data-tooltip-placement=left]:after{bottom:auto;left:auto;right:calc(100% + 6px);top:50%;transform:translateY(-50%)}[data-tooltip-placement=right]:after{bottom:auto;left:calc(100% + 6px);top:50%;transform:translateY(-50%)}[dir=rtl] [data-tooltip]:after{direction:rtl;text-align:right}.color-picker{width:100%;max-width:100%;padding:1rem 0;color:var(--pixel-text-primary);font-family:inherit}.cp-layout{display:grid;grid-template-columns:20rem 1fr;gap:var(--space-6);align-items:start}@media(max-width:56.25rem){.cp-layout{grid-template-columns:1fr}}.cp-picker-section{display:flex;flex-direction:column;gap:var(--space-4)}.cp-features-section{display:flex;flex-direction:column;gap:var(--space-2)}.cp-section{background:var(--pixel-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--pixel-border);overflow:visible;padding:var(--radius-lg)}.cp-section-header{padding:var(--space-3) var(--space-4)}.cp-section-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--pixel-text-primary);margin:0}.cp-section-title i{color:var(--brand-color);font-size:var(--text-sm)}.cp-section-content{padding:var(--space-0)}.cp-subsection-title{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase;margin:1rem 0 .5rem}.cp-subsection-title:first-child{margin-top:0}.cp-tabs{display:flex;background:var(--pixel-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--pixel-border);padding:var(--space-1);gap:.25rem}.cp-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2);background:transparent;border:none;border-radius:var(--radius-lg);color:var(--pixel-text-secondary);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.cp-tab:hover:not(.active){background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}.cp-tab.active{background:var(--brand-color);color:#fff}.cp-tab i{font-size:var(--text-sm)}.cp-tab span{display:none}@media(min-width:48rem){.cp-tab span{display:inline}}.cp-tab-content{min-height:15rem}.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base)}.cp-btn:disabled{opacity:.5;cursor:not-allowed}.cp-btn-primary{background:var(--brand-color);color:#fff}.cp-btn-primary:hover:not(:disabled){filter:brightness(1.1)}.cp-btn-secondary{background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}.cp-btn-secondary:hover:not(:disabled){background:var(--pixel-bg-hover)}.cp-copy-btn{display:flex;align-items:center;justify-content:center;width:var(--space-8);height:var(--space-9);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.cp-copy-btn:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-copy-btn.copied{background:var(--color-success);border-color:var(--color-success);color:#fff}.cp-harmony-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:var(--space-2);margin-bottom:var(--space-4)}.cp-harmony-type{padding:var(--radius-lg) var(--radius-md);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:.7rem;font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);text-transform:capitalize;text-align:center}.cp-harmony-type:hover:not(.active){background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}.cp-harmony-type.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-harmony-preview{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);max-width:100%;overflow-x:visible}.cp-harmony-color{flex:0 0 auto;width:3.5rem;height:3.5rem;min-width:var(--space-8);border-radius:var(--radius-lg);cursor:pointer;position:relative;transition:transform var(--transition-base)}.cp-harmony-color:hover{transform:scale(1.05)}.cp-harmony-hex{position:absolute;bottom:.25rem;left:50%;transform:translate(-50%);font-size:.5rem;font-family:monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);opacity:0;transition:opacity .2s ease}.cp-harmony-color:hover .cp-harmony-hex{opacity:1}.cp-harmony-add{position:absolute;top:.25rem;inset-inline-end:.25rem;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:var(--radius-full);color:#fff;font-size:.5rem;cursor:pointer;opacity:0;transition:all var(--transition-fast)}.cp-harmony-color:hover .cp-harmony-add{opacity:1}.cp-harmony-add:hover{background:var(--brand-color);transform:scale(1.1)}.cp-shades-section{margin-top:var(--space-4)}.cp-shades-row{display:flex;gap:var(--space-2);overflow-x:visible}.cp-shade-swatch{position:relative;flex:0 0 auto;width:3.5rem;height:3.5rem;min-width:var(--space-8);border-radius:var(--radius-lg);cursor:pointer;transition:transform var(--transition-base)}.cp-shade-swatch:hover{transform:scale(1.1);z-index:1}.cp-shade-add{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:var(--radius-full);color:#fff;font-size:var(--text-xs);cursor:pointer;opacity:0;transition:all var(--transition-fast)}.cp-shade-swatch:hover .cp-shade-add{opacity:1}.cp-shade-add:hover{background:var(--brand-color);transform:translate(-50%,-50%) scale(1.1)}.cp-contrast-preview{margin-bottom:var(--space-4)}.cp-contrast-sample{padding:var(--space-6);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2);text-align:center}.cp-contrast-text-large{font-size:var(--text-2xl);font-weight:var(--font-bold)}.cp-contrast-text-normal{font-size:var(--text-sm)}.cp-contrast-inputs{display:flex;gap:var(--space-4);margin-bottom:var(--space-4)}.cp-contrast-input-group{flex:1}.cp-contrast-input-group label{display:block;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--pixel-text-muted);margin-bottom:var(--space-2);text-transform:uppercase}.cp-contrast-color{height:var(--space-10);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-family:monospace;border:1px solid var(--pixel-border)}.cp-contrast-color-input{width:100%;height:var(--space-10);padding:var(--space-1);border:1px solid var(--pixel-border);border-radius:var(--radius-md);cursor:pointer}.cp-contrast-results{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--pixel-bg-primary);border-radius:var(--radius-lg)}.cp-contrast-ratio{text-align:center}.cp-contrast-ratio-value{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--pixel-text-primary)}.cp-contrast-ratio-label{display:block;font-size:var(--text-xs);color:var(--pixel-text-muted);text-transform:uppercase}.cp-contrast-wcag{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.cp-wcag-badge{padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-semibold)}.cp-wcag-badge.pass{background:#10b98126;color:var(--color-success)}.cp-wcag-badge.fail{background:#ef444426;color:var(--color-error)}.cp-contrast-standard{padding:var(--space-3);background:var(--pixel-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--pixel-border)}.cp-standard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}.cp-standard-title{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--pixel-text-primary)}.cp-standard-info{font-size:var(--text-xs);color:var(--pixel-text-muted)}.cp-apca-result{display:flex;justify-content:center;align-items:center;gap:var(--space-3)}.cp-apca-score{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--pixel-text-primary)}.cp-apca-rating{padding:.25rem .625rem;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:capitalize}.cp-apca-rating.excellent{background:#10b98126;color:var(--color-success)}.cp-apca-rating.good{background:#10b9811a;color:#34d399}.cp-apca-rating.minimum{background:#f59e0b26;color:var(--color-warning)}.cp-apca-rating.fail{background:#ef444426;color:var(--color-error)}.cp-cvd-section{margin-top:1.5rem}.cp-cvd-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:var(--space-2);margin-bottom:var(--space-3)}.cp-cvd-type{padding:var(--space-2) var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base);text-align:center}.cp-cvd-type:hover:not(.active){background:var(--pixel-bg-tertiary)}.cp-cvd-type.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-cvd-preview{display:flex;align-items:center;justify-content:center;gap:var(--space-4)}.cp-cvd-swatch{width:4rem;height:4rem;border-radius:var(--radius-lg);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.25rem}.cp-cvd-swatch span{font-size:.5rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}.cp-cvd-preview>i{color:var(--pixel-text-muted)}.cp-gradient-types{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}.cp-gradient-type{flex:1;padding:var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base);text-transform:capitalize}.cp-gradient-type:hover:not(.active){background:var(--pixel-bg-tertiary)}.cp-gradient-type.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-gradient-angle{margin-bottom:var(--space-4)}.cp-gradient-angle label{display:block;font-size:var(--text-xs);color:var(--pixel-text-muted);margin-bottom:var(--space-2)}.cp-slider{width:100%;height:.375rem;appearance:none;background:var(--pixel-bg-tertiary);border-radius:var(--radius-sm);cursor:pointer}.cp-slider::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;background:var(--brand-color);border:2px solid white;border-radius:var(--radius-full);cursor:pointer}.cp-gradient-preview{height:4rem;border-radius:var(--radius-lg);margin-bottom:var(--space-4)}.cp-gradient-css{display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-md)}.cp-gradient-css code{flex:1;font-size:var(--text-xs);color:var(--pixel-text-secondary);word-break:break-all}.cp-tools-info{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.cp-tool-info-item{padding:var(--space-3);background:var(--pixel-bg-primary);border-radius:var(--radius-md);text-align:center}.cp-tool-label{display:block;font-size:var(--text-xs);color:var(--pixel-text-muted);text-transform:uppercase;margin-bottom:var(--space-1)}.cp-tool-value{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--pixel-text-primary)}.cp-tools-hint{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--pixel-text-muted);text-align:center;font-style:italic}.cp-export-empty{text-align:center;color:var(--pixel-text-muted);font-size:var(--text-sm);padding:var(--space-8)}.cp-export-formats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.cp-export-format{background:var(--pixel-bg-primary);border-radius:var(--radius-lg);overflow:hidden}.cp-export-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);background:var(--pixel-bg-tertiary);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-primary)}.cp-export-code{padding:var(--space-3);font-size:var(--text-xs);font-family:monospace;color:var(--pixel-text-secondary);white-space:pre-wrap;word-break:break-all;margin:0;max-height:8rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--pixel-text-muted) var(--pixel-bg-primary)}.cp-export-code::-webkit-scrollbar{width:6px}.cp-export-code::-webkit-scrollbar-track{background:var(--pixel-bg-primary);border-radius:var(--radius-sm)}.cp-export-code::-webkit-scrollbar-thumb{background:var(--pixel-text-muted);border-radius:var(--radius-sm)}.cp-export-code::-webkit-scrollbar-thumb:hover{background:var(--pixel-text-secondary)}.cp-history-strip{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--pixel-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--pixel-border);overflow:visible}.cp-history-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--pixel-text-muted);text-transform:uppercase;white-space:nowrap}.cp-history-colors{display:flex;gap:var(--space-2);flex:1;overflow-x:auto}.cp-history-swatch{width:1.5rem;height:1.5rem;border-radius:var(--radius-md);cursor:pointer;flex-shrink:0;transition:transform var(--transition-base)}.cp-history-swatch:hover{transform:scale(1.15)}.cp-picker-toolbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2);background:var(--pixel-bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--pixel-border);margin-bottom:var(--space-2)}.cp-picker-modes{display:flex;gap:.25rem}.cp-picker-mode{display:flex;align-items:center;justify-content:center;width:var(--space-8);height:var(--space-8);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-base)}.cp-picker-mode:hover:not(.active){background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}.cp-picker-mode.active{background:var(--brand-color);border-color:var(--brand-color);color:#fff}.cp-eyedropper-btn{display:flex;align-items:center;justify-content:center;width:var(--space-8);height:var(--space-8);background:var(--pixel-bg-tertiary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-base)}.cp-eyedropper-btn:hover{background:var(--brand-color);border-color:var(--brand-color);color:#fff}.cp-export-downloads{display:flex;gap:var(--space-2);margin-top:var(--space-3)}.cp-export-downloads .cp-btn{flex:1}.cp-export-saveload,.cp-export-presets,.cp-export-named{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--pixel-border)}.cp-palette-section{margin-bottom:1.5rem}.cp-palette-section:last-child{margin-bottom:0}.cp-palette-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin-bottom:var(--space-4)}.cp-export-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-4)}.cp-palette-tab,.cp-export-tab{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-lg);color:var(--pixel-text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base)}.cp-palette-tab:hover,.cp-export-tab:hover{background:var(--pixel-bg-tertiary);border-color:var(--pixel-text-muted);color:var(--pixel-text-primary)}.cp-palette-tab.active,.cp-export-tab.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}.cp-generate-section{text-align:center}.cp-generate-info{font-size:var(--text-xs);color:var(--pixel-text-muted);margin-bottom:var(--space-4)}.cp-generate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.cp-generate-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-2);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base);text-align:center}.cp-generate-card i{font-size:var(--text-xl);color:var(--brand-color)}.cp-generate-card:hover{background:var(--pixel-bg-tertiary);border-color:var(--brand-color);transform:translateY(-2px)}.cp-generate-card:active{transform:translateY(0)}.cp-gradient-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-bottom:var(--space-4)}.cp-gradient-tab{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-1);background:var(--pixel-bg-primary);border:1px solid var(--pixel-border);border-radius:var(--radius-md);color:var(--pixel-text-secondary);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-base)}.cp-gradient-tab i{font-size:var(--text-xs)}.cp-gradient-tab:hover:not(.active){background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}.cp-gradient-tab.active{background:rgba(var(--brand-color-rgb),.15);border-color:var(--brand-color);color:var(--brand-color)}@media(max-width:616px){.cp-section{padding:var(--space-3)}.cp-section-header{padding:var(--space-2) var(--space-3)}.cp-tabs{flex-wrap:wrap}.cp-tab{flex:1 1 calc(33.333% - .25rem);min-width:0}.cp-harmony-preview{flex-wrap:wrap}.cp-harmony-color{flex:1 1 calc(33.333% - .5rem)}.cp-gradient-types{flex-wrap:wrap}.cp-gradient-type{flex:1 1 calc(50% - var(--space-2));min-width:0}.cp-export-formats{grid-template-columns:1fr}.cp-palette-tabs,.cp-generate-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:20rem){.cp-harmony-types{grid-template-columns:repeat(2,1fr)}.cp-harmony-preview{flex-wrap:wrap}.cp-harmony-color{flex:1 1 3.5rem;width:auto;min-width:0}.cp-shades-row{flex-wrap:wrap}.cp-shade-swatch{flex:1 1 3.5rem;width:auto;min-width:0}}@media(max-width:37.5rem){.cp-tabs{flex-wrap:wrap}.cp-tab{flex:1 1 calc(33.333% - .25rem)}.cp-harmony-preview{flex-wrap:wrap}.cp-harmony-color{flex:1 1 calc(33.333% - .5rem)}.cp-contrast-inputs{flex-direction:column}.cp-tools-info{grid-template-columns:1fr}}[data-theme=light] .cp-section{background:var(--pixel-bg-secondary);border-color:var(--pixel-border)}[data-theme=light] .cp-section-title{color:var(--pixel-text-primary)}[data-theme=light] .cp-tabs{background:var(--pixel-bg-secondary);border-color:var(--pixel-border)}[data-theme=light] .cp-tab{color:var(--pixel-text-secondary)}[data-theme=light] .cp-tab:hover:not(.active){background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}[data-theme=light] .cp-harmony-type,[data-theme=light] .cp-gradient-type,[data-theme=light] .cp-cvd-type{background:var(--pixel-bg-primary);border-color:var(--pixel-border);color:var(--pixel-text-secondary)}[data-theme=light] .cp-harmony-type:hover:not(.active),[data-theme=light] .cp-gradient-type:hover:not(.active),[data-theme=light] .cp-cvd-type:hover:not(.active){background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}[data-theme=light] .cp-contrast-results,[data-theme=light] .cp-tool-info-item,[data-theme=light] .cp-export-format,[data-theme=light] .cp-gradient-css{background:var(--pixel-bg-primary)}[data-theme=light] .cp-export-header{background:var(--pixel-bg-tertiary);color:var(--pixel-text-primary)}[data-theme=light] .cp-copy-btn{background:var(--pixel-bg-tertiary);border-color:var(--pixel-border);color:var(--pixel-text-secondary)}[data-theme=light] .cp-copy-btn:hover{background:var(--pixel-bg-hover);color:var(--pixel-text-primary)}[data-theme=light] .cp-history-strip{background:var(--pixel-bg-secondary);border-color:var(--pixel-border)}[data-theme=light] .cp-slider{background:var(--pixel-bg-tertiary)}[data-theme=light] .cp-contrast-ratio-value,[data-theme=light] .cp-tool-value{color:var(--pixel-text-primary)}[data-theme=light] .cp-contrast-color,[data-theme=light] .cp-contrast-color-input{border-color:var(--pixel-border)}