.color-preview-wrapper{position:relative;display:flex;justify-content:center}.color-input-native{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.color-preview{width:150px;height:150px;border-radius:var(--radius-xl);border:3px solid var(--color-border);cursor:pointer;transition:transform var(--transition-base)}.color-preview:hover{transform:scale(1.02)}.color-formats{display:flex;flex-direction:column;gap:var(--space-md)}.color-format{display:flex;flex-direction:column;gap:var(--space-sm)}.format-label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.format-value-row{display:flex;gap:var(--space-sm);align-items:center}.format-value{flex:1;padding:var(--space-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-base)}.color-input-manual{display:flex;flex-direction:column;gap:var(--space-sm)}.color-input-manual label{font-weight:500;color:var(--color-text-secondary)}