.pik-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.pik-panel{border:1px solid var(--color-border);padding:var(--space-5)}.pik-panel-title{font-size:var(--text-sm);font-weight:700;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-4)}.pik-preview{height:200px;border:1px solid var(--color-border);display:flex;align-items:flex-end;padding:var(--space-4);margin-bottom:var(--space-5);transition:background var(--duration-fast) var(--ease)}.pik-preview-info{display:flex;flex-direction:column;gap:var(--space-1);background:#ffffffd9;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pik-preview-hsl{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text)}.pik-preview-rgb{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-soft)}.pik-sliders{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-5)}.pik-slider-row{display:grid;grid-template-columns:64px 1fr 48px;align-items:center;gap:var(--space-3)}.pik-slider-row label{font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);color:var(--color-text-soft)}.pik-slider-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--color-border);border-radius:var(--radius-full);outline:none}.pik-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--space-4);height:var(--space-4);background:var(--color-text);border-radius:var(--radius-full);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 0 0 1px var(--color-border)}.pik-slider-row input[type=range]::-moz-range-thumb{width:var(--space-4);height:var(--space-4);background:var(--color-text);border-radius:var(--radius-full);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 0 0 1px var(--color-border)}.pik-slider-val{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);text-align:right}.pik-actions{display:flex;gap:var(--space-3)}.pik-btn{flex:1;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-strong);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);color:var(--color-text);background:var(--color-bg);transition:background var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease)}.pik-btn:hover,.pik-btn-primary{background:var(--color-text);color:var(--color-bg)}.pik-btn-primary:hover{background:var(--color-primary);border-color:var(--color-primary)}.pik-btn-sm{flex:none;padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.pik-btn:disabled{opacity:.4;cursor:not-allowed}.pik-board{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin-bottom:var(--space-3)}.pik-slot{aspect-ratio:1;border:1px solid var(--color-border);background:var(--color-surface);position:relative;cursor:pointer;transition:border-color var(--duration-fast) var(--ease)}.pik-slot:hover{border-color:var(--color-border-strong)}.pik-slot.filled{border-color:transparent}.pik-slot .slot-num{position:absolute;top:var(--space-1);left:var(--space-1);font-size:var(--text-xs);font-weight:600;color:#fffc;background:#0000004d;padding:1px 4px;border-radius:var(--radius-sm)}.pik-slot .slot-delete{position:absolute;top:var(--space-1);right:var(--space-1);width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:#fffc;background:#0000004d;border-radius:var(--radius-full);opacity:0;transition:opacity var(--duration-fast) var(--ease)}.pik-slot:hover .slot-delete{opacity:1}.pik-board-actions{display:flex;justify-content:flex-end;margin-bottom:var(--space-5)}.pik-match-title{margin-top:var(--space-5)}.pik-match{display:flex;flex-direction:column;gap:var(--space-2)}.pik-match-empty{padding:var(--space-5);text-align:center;font-size:var(--text-sm);color:var(--color-text-muted);border:1px dashed var(--color-border)}.pik-match-item{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border)}.pik-match-swatch{width:48px;height:48px;border-radius:var(--radius-sm)}.pik-match-info{display:flex;flex-direction:column;gap:2px}.pik-match-name{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}.pik-match-hsl{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted)}.pik-match-diff{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-primary);font-weight:600}@media (max-width: 768px){.pik-layout{grid-template-columns:1fr}}