:root{--cp-primary:var(--main-primary);--cp-text:#1f2937;--cp-text-muted:#6b7280;--cp-bg:#fff;--cp-bg-hover:#f9fafb;--cp-border:#e5e7eb;--cp-border-hover:#d1d5db;--cp-shadow:0 1px 3px #0000001a;--cp-shadow-lg:0 4px 12px #00000026;--cp-radius:.5rem;--cp-radius-lg:.75rem;--cp-checkerboard:repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 12px 12px}._cp-container{gap:var(--main-space-6);flex-direction:column;width:100%;max-width:900px;margin:0 auto;display:flex}._cp-layout{gap:var(--main-space-6);grid-template-columns:1fr 320px;align-items:start;display:grid}@media (max-width:768px){._cp-container{padding-left:1rem;padding-right:1rem}._cp-layout{grid-template-columns:1fr}}._cp-picker-area{gap:var(--main-space-4);flex-direction:column;display:flex}._cp-preview-card{background:var(--cp-bg);border-radius:var(--cp-radius-lg);padding:var(--main-space-4);box-shadow:var(--cp-shadow);border-style:solid;border-width:1px;border-color:var(--cp-border);align-items:center;gap:var(--main-space-4);display:flex}._cp-preview-box{border-radius:var(--cp-radius);background:var(--cp-checkerboard);flex-shrink:0;width:80px;height:80px;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}._cp-preview-inner{background:#3b82f6;width:100%;height:100%}._cp-preview-actions{gap:var(--main-space-2);flex-wrap:wrap;display:flex}._cp-btn{justify-content:center;align-items:center;gap:var(--main-space-2);border-radius:var(--cp-radius);font-size:var(--main-text-sm);cursor:pointer;background:0 0;border:none;padding:.5rem 1rem;font-weight:500;transition:opacity .15s,background .15s;display:inline-flex}._cp-btn:hover{opacity:.85}._cp-btn-icon{background:var(--cp-bg-hover);width:40px;height:40px;color:var(--cp-text-muted);border-style:solid;border-width:1px;border-color:var(--cp-border);padding:0}._cp-btn-icon:hover{color:var(--cp-text);border-color:var(--cp-border-hover)}._cp-btn-icon.active{color:#ef4444}._cp-btn-icon.hidden{display:none}._cp-btn-secondary{background:var(--cp-bg);color:var(--cp-text);border-style:solid;border-width:1px;border-color:var(--cp-border)}._cp-btn-secondary:hover{background:var(--cp-bg-hover)}._cp-sv-picker{border-radius:var(--cp-radius);cursor:crosshair;width:100%;height:200px;box-shadow:var(--cp-shadow);border-style:solid;border-width:1px;border-color:var(--cp-border);background:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000),#0062ff;position:relative}._cp-sv-handle{pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:80%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d,inset 0 0 0 1px #0000004d}._cp-slider-wrapper{align-items:center;gap:var(--main-space-3);display:flex}._cp-slider-label{font-size:var(--main-text-sm);color:var(--cp-text-muted);min-width:50px}._cp-hue-slider,._cp-alpha-slider{cursor:pointer;border-radius:8px;flex:1;height:16px;position:relative}._cp-hue-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:inset 0 0 0 1px #0000001a}._cp-alpha-slider{background:var(--cp-checkerboard);box-shadow:inset 0 0 0 1px #0000001a}._cp-alpha-gradient{background:linear-gradient(90deg,#0000,#3b82f6);border-radius:8px;position:absolute;top:0;bottom:0;left:0;right:0}._cp-slider-handle{pointer-events:none;background:#fff;border:2px solid #fff;border-radius:50%;width:20px;height:20px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0000004d}#_cp-hue-handle{left:60%}#_cp-alpha-handle{left:100%}@media (max-width:768px){._cp-sv-picker{height:180px}._cp-preview-box{width:64px;height:64px}}._cp-values-panel{background:var(--cp-bg);border-radius:var(--cp-radius-lg);padding:var(--main-space-4);box-shadow:var(--cp-shadow);border-style:solid;border-width:1px;border-color:var(--cp-border);gap:var(--main-space-3);flex-direction:column;display:flex}._cp-value-row{align-items:center;gap:var(--main-space-3);display:flex}._cp-value-label{font-size:var(--main-text-xs);color:var(--cp-text-muted);text-transform:uppercase;letter-spacing:.025em;align-items:center;gap:6px;min-width:54px;font-weight:600;display:flex}._cp-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}._cp-dot-hex{background:linear-gradient(135deg,#6366f1,#8b5cf6)}._cp-dot-rgb{background:linear-gradient(135deg,#ef4444,#22c55e,#3b82f6)}._cp-dot-rgba{opacity:.7;background:linear-gradient(135deg,#ef4444,#22c55e,#3b82f6)}._cp-dot-hsl{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)}._cp-dot-hsv{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:inset 0 0 2px #0000004d}._cp-dot-cmyk{background:linear-gradient(135deg,#06b6d4,#ec4899,#eab308,#1f2937)}._cp-value-input-wrapper{align-items:center;gap:var(--main-space-2);background:var(--cp-bg-hover);border-radius:var(--cp-radius);border-style:solid;border-width:1px;border-color:var(--cp-border);flex:1;min-width:0;padding:.375rem .5rem;transition:border-color .15s;display:flex;overflow:hidden}._cp-value-input-wrapper:focus-within{border-color:var(--cp-primary)}._cp-value-input{font-size:var(--main-text-sm);font-family:var(--main-font-mono);color:var(--cp-text);background:0 0;border:none;flex:1;min-width:0;padding:0}._cp-value-input:focus{outline:none}._cp-value-input._cp-hex-input{text-transform:uppercase}._cp-copy-btn{width:28px;height:28px;color:var(--cp-text-muted);cursor:pointer;border-radius:var(--cp-radius);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}._cp-copy-btn:hover{color:var(--cp-text);background:var(--cp-bg)}._cp-copy-btn.copied{color:var(--main-success)}._cp-copy-all{margin-top:var(--main-space-2);justify-content:center;width:100%}@media (max-width:768px){._cp-values-panel{gap:var(--main-space-2)}._cp-value-label{min-width:38px;font-size:.65rem}}._cp-saved-section{gap:var(--main-space-4);grid-template-columns:repeat(2,1fr);display:grid}._cp-saved-block{background:var(--cp-bg);border-radius:var(--cp-radius-lg);padding:var(--main-space-4);box-shadow:var(--cp-shadow);border-style:solid;border-width:1px;border-color:var(--cp-border)}._cp-saved-header{margin-bottom:var(--main-space-3);justify-content:space-between;align-items:center;display:flex}._cp-saved-title{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-sm);color:var(--cp-text);font-weight:600;display:flex}._cp-clear-btn{width:28px;height:28px;color:var(--cp-text-muted);cursor:pointer;border-radius:var(--cp-radius);background:0 0;border:none;justify-content:center;align-items:center;transition:color .15s,background .15s;display:flex}._cp-clear-btn:hover{color:#ef4444;background:#ef44441a}._cp-color-grid{flex-wrap:wrap;align-content:flex-start;gap:6px;height:96px;display:flex;overflow-y:auto}._cp-color-swatch{cursor:pointer;background:var(--cp-checkerboard);border-radius:4px;width:28px;height:28px;transition:box-shadow .1s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}._cp-color-swatch:hover{box-shadow:0 0 0 2px var(--cp-primary)}._cp-color-swatch-inner{width:100%;height:100%}._cp-color-swatch-remove{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:10px;line-height:1;display:none;position:absolute;top:-4px;right:-4px}._cp-color-swatch:hover ._cp-color-swatch-remove{display:flex}._cp-empty-hint{font-size:var(--main-text-xs);color:var(--cp-text-muted);padding:var(--main-space-2);text-align:center;width:100%}@media (max-width:768px){._cp-saved-section{grid-template-columns:1fr}._cp-color-swatch{width:32px;height:32px}}