.color-input-row{display:flex;align-items:center;gap:var(--space-3)}.color-picker{width:48px;height:48px;border:2px solid var(--color-border);border-radius:var(--radius-md);padding:2px;cursor:pointer;background:none;flex-shrink:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.hex-input{max-width:120px;font-family:var(--font-mono);text-transform:uppercase}.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}.palette-card{border-radius:var(--radius-lg);padding:var(--space-4);min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;transition:transform var(--duration-normal) var(--ease-default);box-shadow:var(--shadow-sm)}.palette-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.palette-label{font-size:var(--text-xs);opacity:.8;margin-bottom:var(--space-1)}.palette-hex{font-size:var(--text-base);font-weight:var(--weight-bold);font-family:var(--font-mono)}.palette-rgb,.palette-hsl{font-size:var(--text-xs);font-family:var(--font-mono);opacity:.7}@media(min-width:768px){.palette-grid{grid-template-columns:repeat(5,1fr)}}