.avatar-color-picker{display:flex;flex-wrap:wrap;gap:var(--space-3)}.color-option{position:relative;cursor:pointer;margin:0}.color-option .color-input{position:absolute;opacity:0;pointer-events:none}.color-option .color-swatch{display:block;width:48px;height:48px;border-radius:var(--radius-lg);border:2px solid var(--color-border-default);transition:all var(--transition-fast);box-shadow:var(--shadow-xs)}.color-option:hover .color-swatch{border-color:var(--color-border-strong);transform:scale(1.05);box-shadow:var(--shadow-sm)}.color-option .color-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-bg-primary);font-size:1.5rem;opacity:0;transition:opacity var(--transition-fast);pointer-events:none;text-shadow:0 0 4px rgba(0,0,0,.3)}.color-option .color-input:checked~.color-swatch{border-color:var(--color-primary);border-width:3px;box-shadow:var(--shadow-md),0 0 0 3px rgba(203,157,240,.2)}.color-option .color-input:checked~.color-check{opacity:1}.color-option .color-input:focus~.color-swatch{outline:2px solid var(--color-primary);outline-offset:2px}