.color-picker-popover{position:fixed;z-index:10000;display:none;background:var(--bg-card);border-radius:12px;box-shadow:0 8px 24px #0003;border:1px solid var(--border-subtle);padding:1.25rem;width:340px;max-width:calc(100vw - 2rem)}.color-picker-popover.open{display:block;animation:popoverSlideIn .2s cubic-bezier(.4,0,.2,1)}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.color-picker-body{display:flex;flex-direction:column;gap:1.25rem}.color-picker-section{display:flex;flex-direction:column;gap:.75rem}.color-picker-label{font-weight:500;color:var(--text-muted);font-size:.875rem}.color-picker-slider-container{display:flex;flex-direction:column;gap:.75rem}.color-picker-slider{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);outline:none;cursor:pointer}.color-picker-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent-warm);cursor:pointer;box-shadow:0 2px 6px #00000026}.color-picker-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent-warm);cursor:pointer;box-shadow:0 2px 6px #00000026}.color-preview-row{display:flex;align-items:center;gap:.75rem}.color-picker-preview{width:40px;height:40px;border-radius:8px;border:2px solid var(--border-subtle);flex-shrink:0}.color-picker-hex{font-family:Monaco,Menlo,monospace;font-size:.875rem;color:var(--text-main);font-weight:500}.appearance-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.appearance-option{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;border:1.5px solid var(--border-subtle);border-radius:8px;background:var(--bg-card);color:var(--text-muted);cursor:pointer;font-weight:500;font-size:.875rem;transition:all .15s}.appearance-option:hover{border-color:var(--accent-warm);background:var(--bg-hover)}.appearance-option.active{border-color:var(--accent-warm);background:var(--accent-warm);color:#fff}.appearance-option svg{flex-shrink:0}@media(max-width:768px){.color-picker-popover{width:calc(100vw - 2rem);left:1rem!important;right:1rem!important}}